Bootstrapのボタン
今回はこれまでに使ったナビゲーションやフォームでも登場した、ボタンについて詳しく見ていきましょう。
htmlにおけるボタンの役割・コード
ボタンを作るためのコーディングは、大きく分けて３つあります。
- ボタンを作成するための「button」タグを使う
- 「input」タグを使って、ボタンを作る
- リンクタグ（aタグ）など、その他の要素を使う
1つ目は、ボタンを作成するための「button」タグを使う方法です。 これは、フォームの送信ボタンなどのボタンを作る時に使います。
2つ目の「input」タグの button型（type="button"）を使う方法。
こちらも、buttonタグとほぼ同じ目的で使用する事が多いです。
最後のリンクタグなどを使う方法は「ボタン風のデザインにする」という意味合いが強いです。 「もっと見る」「詳しくはこちら」など、ページ遷移をわかりやすくする時によく使います。
buttonタグとinputタグの違い
buttonタグと button型のinputタグはよく似た存在。
フォームの送信ボタンなどでは、どちらを使っても間違いではありませんが、buttonタグのほうが一般的に使われています。理由としては、以下MDNの説明にある通り、buttonタグは開始タグと閉じタグがある＝柔軟なスタイリングできることが大きいでしょう。
メモ: input 要素の button 型は完全に妥当な HTML ですが、より新しい button要素が、ボタンの作成にはより好まれるようになりました。 buttonのラベル文字列は開始タグと終了タグの間に挿入され、ラベルに画像を含む HTML を含めることができます。
引用元：https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/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が用意している中から、お好きな色を選んで下さい）
- ボタンを幅いっぱいまで伸ばす
【作成例】
◎まとめ
- 見出しタグやクラスには、沢山の種類がある
- 装飾の為のタグも予め用意されている
- ボタンもカラー含め、テンプレートが複数存在する
- ボタンタグだけでなく、リンクタグなどでもテンプレートが使える