【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月28日
【Bootstrap】Navbarの使い方・カスタマイズ方法を徹底解説
更新日 : 2019年5月9日

まとめ

今回は、Bootstrapのボタンの種類・使い方について徹底的に解説しました!ボタンはアプリを作るときに必ず使います。Bootstrapを使えば簡単におしゃれなボタンを使うことができるので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

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

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

おすすめコンテンツ

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

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