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

• Bootstrapのボタン
• Bootstrapのボタンクラス
• ボタンのカスタマイズ
• 【実習】ボタンを変更してみよう
• ◎まとめ

Bootstrapのボタン

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

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

もう一つは、リンクタグやinputタグで使用する方法です。
こちらは「ボタン風のデザインにする」という意味合いが強いです。

リンクタグは他ページなどへの遷移の為のリンクボタンで使用します。
インプットタグは、前のページに戻るというボタンなどで使用します。

Bootstrapのボタンクラス

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

タイプという属性は、「submit＝送信」や「button＝汎用的に使えるボタン」などのボタンの役割を指定します。
フォームで使う場合は、入力内容を送信するので「submit」になります。

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

ボタンのカスタマイズ

ボタンの配色

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

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

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

ボタンのサイズ

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

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

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

 

全幅表示にする場合

ボタンを親要素の幅いっぱいに表示するには「w-100」クラスを使うとできます。
w-100＝width: 100%;です。

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

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

• ボタンの配色クラスをお好きなものに変更
• ボタンを幅いっぱいまで伸ばす

◎まとめ

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