【Bootstrap超入門】ボタンの種類・使い方について徹底解説!

こんにちは、フリーランスエンジニア兼ライターのワキザカ サンシロウです。

皆さんは、Bootstrapを使ったことがありますか?

WEBアプリ・WEBサービスを作るとき、デザインの基盤としてBootstrapを使うケースはよくあります。

Bootstrapを使うと簡単におしゃれなボタンが使えるので、使い方を覚えておくと便利です!

そこで今回は、

・Bootstrapとは

・【最新版】Boobstrap4を使う方法

といった基礎的なことから、

・Boobstrapのボタンの種類・使い方

・合わせて覚えておくと便利なBootstrapの部品の使い方

といった応用的な方法まで、徹底的に解説します!

Bootstrapとは

まず、Bootstrapについて簡単に解説します。

Bootstrapは、「WEBサイトやWEBページを効率よく開発するためのWEBフレームワーク」です。
(WEBフレームワークって何?という方は、先にこちらの記事をご覧ください。)

HTML・CSS・JavaScriptから構成される、最も有名なWEBフレームワークですね。

WEBページでよく使われるフォーム・ボタン・メニューなどの部品がテンプレートとして用意されています。

また、レスポンシブ対応がされているため、Bootstrapを使うだけでパソコン、iPad、スマホなど画面サイズに自動対応した画面を作ることができます。

WEB開発をするときは必須のフレームワークなので、使い方を覚えておくと便利です!

【最新版】Boobstrap4を使う方法

次に、Bootstrap4を使う方法について解説します。

Bootstrap4は、2018年2月にリリースされた最新バージョンのBootstrapです。

最新のデザインを取り入れたバージョンになっているので、今から使う方はBootstrap4がおすすめです。

最新版Bootstrap4の概要・使い方については以下で詳しく解説しているので、まだ使ったことがない方は先にこちらを見てみてくださいね!

Bootstrapとは?最新版のBootstrap4の使い方についても徹底解説!
更新日 : 2019年5月6日

Boobstrapでボタンを使う方法

次に、Bootstrapでボタンを使う方法について解説します。

ボタンを使う時の基礎知識

まずは、ボタンを使う時の基礎知識について解説します。

ボタンは、buttonタグinputタグで次のように指定することができます。

HTMLでボタンを使う方法:

この中でBootstrapのデザインを使う時は、タグの中のclassを指定します。

Bootstrapを使う方法:

そのため、背景・枠線の色、サイズ等のデザインclassで指定して使います。

また、Bootstrapで色を指定するときは次のような方法で指定できます。

primary」「success」のように色を指定する名前がついています。

この名前を使ってボタンに色を付けていくので、最初に覚えておくのがおすすめです!

次に、それぞれのボタンの使い方について解説します。

背景色つきボタン

まずは、「背景色つきボタン」です。

class名に「btn-〇〇〇」を指定することで、色を簡単に設定することができます。

Bootstrapの中で一番シンプルなボタンで、次のように簡単に色を指定することができます。

サンプルコード:

実行結果:

枠線色つきボタン

つぎは、「枠線色つきボタン」です。

class名に「btn-outline-〇〇〇」を指定することで、色を簡単に設定することができます。

先ほどのボタンを反転したような色になり、次のように簡単に指定することができます。

サンプルコード:

実行結果:

サイズ変更ボタン

つぎは、「サイズ変更ボタン」です。

ボタンのサイズを以下3つからclassで指定することができます。


・btn-lg:大サイズ
・btn-sm:中サイズ
・btn-x :小サイズ

サンプルコード:

実行結果:

横幅フルボタン

つぎは、「横幅フルボタン」です。

class名に「btn-block」を指定することで、画面幅いっぱいのサイズを指定することができます。

サンプルコード:

実行結果:

アクティブ・非アクティブボタン

つぎは、「アクティブ・非アクティブボタン」です。

アクティブボタンは指定なし、非アクティブボタンは「disabled="disabled"」をタグに指定します。

サンプルコード:

実行結果:

横並びボタン

つぎは、「横並びボタン」です。

class名に「btn-secondary」を指定することで、ボタンを横並びにすることができます。

ページナビゲーションを作るときなどにも使える方法なので、覚えておくと便利です!

サンプルコード:

実行結果:

合わせて覚えておくと便利なBootstrapの使い方

ここまでボタンに特化して解説してきましたが、画面を作るときにボタンだけ使うケースはないですよね。

テキストボックス、ラベル、ドロップダウンリスト、チェックボックス、ラジオボタン、ヘッダナビゲーションなど他の部品を使って作っていくケースがほとんどです。

そのため、それぞれ使い方を覚えておくと便利です!

Bootstrapさえ入れておけば、ボタンと同じようにHTMLコードを書いてすぐ使えるので、ぜひ見てみてくださいね!

【Bootstrap超入門】フォームの種類・使い方について徹底解説!
更新日 : 2019年5月14日
【Bootstrap】Navbarの使い方・カスタマイズ方法を徹底解説
更新日 : 2019年5月9日

まとめ

今回は、Bootstrapのボタンの種類・使い方について徹底的に解説しました!

ボタンはアプリを作るときに必ず使います。

Bootstrapを使えば簡単におしゃれなボタンを使うことができるので、ぜひ使ってみてくださいね!

自分にプログラミングなんて・・・と思っていませんか?

今後10年間で今ある職業の『77%』はなくなると言われています。

人工知能や機械学習を筆頭にVR、AR、ドローンなどの最先端技術の発達はこれからのあなたの働き方に間違いなく影響を与えるでしょう。

将来を見据えてプログラミングができるようになってエンジニアになりたい、自分だけにしかできないクリエイティブな仕事がしたい、、、とお考えの方も少なくないでしょう。

と、同時に「難しそう、、自分にはできないだろう、、、」と諦めている方も多いのではないでしょうか。

弊社マンツーマンレッスンは、お一人お一人に専属のインストラクターがつくので、通常のスクールでは難しい、オリジナルアプリ開発や、フリーランスとしての仕事獲得まで支援しています。

まずは『無料体験レッスン』で弊社コンサルタントと一緒にあなた専用の学習カリキュラムを考えてみてはいかがでしょうか?

詳しくは下の画像をクリックしてください。

cta_mtm2

LINEで送る
Pocket

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

フリーランスエンジニア兼ライターのワキザカ サンシロウです。
ExcelVBAの自動化ツール開発、WEB開発をメインにエンジニア業務をこなしつつ、サムライエンジニアにてライター業務をしております。

プログラミングをこれからやってみたい方に向けて、ためになる記事を全力で書いていきますので宜しくお願い致します!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説