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

吉田先生

Bootstrapではボタンも簡単に作成できます。
見た目もとても美しく、Call to Actionにも即役立つものが用意されていますよ。

Bootstrapのボタン

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

一つは、ボタンを作成するための「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種類です。

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

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

 

全幅表示にする場合

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

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

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

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

◎まとめ

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

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×