Bootstrap5のボタンを理解する【図解たっぷりBootstrap5入門】

• Bootstrapのボタン
• htmlにおけるボタンの役割・コード
• Bootstrapのボタンクラス
• ボタンのカスタマイズ
• ボタンの配色
• ボタンのサイズ
• 【実習】ボタンを変更してみよう
• ◎まとめ

Bootstrapのボタン

今回はこれまでに使ったナビゲーションやフォームでも登場した、ボタンについて詳しく見ていきましょう。

htmlにおけるボタンの役割・コード

ボタンを作るためのコーディングは、大きく分けて３つあります。

• ボタンを作成するための「button」タグを使う
• 「input」タグを使って、ボタンを作る
• リンクタグ（aタグ）など、その他の要素を使う

1つ目は、ボタンを作成するための「button」タグを使う方法です。
これは、フォームの送信ボタンなどのボタンを作る時に使います。

2つ目の「input」タグの button型（type="button"）を使う方法。
こちらも、buttonタグとほぼ同じ目的で使用する事が多いです。

最後のリンクタグなどを使う方法は「ボタン風のデザインにする」という意味合いが強いです。
「もっと見る」「詳しくはこちら」など、ページ遷移をわかりやすくする時によく使います。

Bootstrapのボタンクラス

Bootstrap5での、ボタンタグ及び、ボタンのCSSクラスの構造を確認しましょう。

タイプという属性は、ボタンの役割を指定します。

• submit＝送信
• button＝汎用的に使えるボタン

フォームで使う場合は、入力内容を送信するので「submit」になります。

次にCSSクラスです。

Bootstrapのボタンデザインは、btnというCSSクラスを使用します。
これは、ボタン作成の為のクラスです。
それに加えて、色やサイズなどのCSSクラスを使用することでボタンの見た目を変更できます。

ボタンのカスタマイズ

ボタンの配色

上図ではbtn-primaryになっていた、ボタンのデザインを指定するためのCSSクラス。
この部分は、Bootstrapで用意されているカラーテンプレートから任意のものを選び使用することができます。

使用できるCSSクラスは、BootstrapサイトのComponents > Buttons に掲載されています。
https://getbootstrap.jp/docs/5.3/components/buttons/

ボタン内のテキストが配色名です。これを「btn-配色名」の部分に入れて使用します。

ボタンのサイズ

次に、ボタンの大きさを見てみましょう。
BootstrapのCSSSクラスとして用意されているボタンのサイズは、小・中（標準）・大の3種類です。

では、これら一つ一つの指定方法とイメージを見てみましょう。

標準サイズ（上から２番目）以外は、専用のCSSクラスが存在します。
１番最後の親要素の幅いっぱいに広がる種類は、高さは標準タイプと同じくらいです。

全幅表示にする場合

ボタンを親要素の幅いっぱいに表示するにはw-100クラスを使うとできます。
.w-100は、width: 100%;を指定するユーティリティクラスです。

【実習】ボタンを変更してみよう

前回のレッスンで作成した、form.htmlのボタンをカスタマイズしてみましょう。

変更箇所は以下の２点です。

• ボタンをアウトラインボタンに変更（Bootstrapが用意している中から、お好きな色を選んで下さい）
• ボタンを幅いっぱいまで伸ばす

【作成例】

◎まとめ

• 見出しタグやクラスには、沢山の種類がある
• 装飾の為のタグも予め用意されている
• ボタンもカラー含め、テンプレートが複数存在する
• ボタンタグだけでなく、リンクタグなどでもテンプレートが使える