吉田先生
Bootstrapではボタンも簡単に作成できます。
見た目もとても美しく、Call to Actionにも即役立つものが用意されていますよ。
今回はこれまでに使ったナビゲーションやフォームでも登場した、ボタンについて詳しく見ていきましょう。
ボタンの使い方には、大きく分けて2つあります。
一つは、ボタンを作成するための「button」タグを使う方法です。
これは、フォームなどのボタンの時に使います。
もう一つは、リンクタグやinputタグで使用する方法です。
こちらは「ボタン風のデザインにする」という意味合いが強いです。
リンクタグは他ページなどへの遷移の為のリンクボタンで使用します。
インプットタグは、前のページに戻るというボタンなどで使用します。
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 [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。