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

現行最新版（Bootstrap 5）講座をリリースしました

→Bootstrap 5講座のご受講はこちら

吉田先生

ボタンも簡単に作成できます。非常に美しくCall to Actionにも即役立つものが用意されていますよ。

• ボタン
• まとめ

ボタン

前章で学んだフォームでも使われていた、ボタンについてみていきましょう。ボタンの使い方には、大きく分けて２つあります。一つは、ボタンを作成するための「button」タグを使う方法です。これは、フォームなどのボタンの時に使います。

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

・ボタンのカスタマイズ

ボタンのデザインのカスタマイズを学んでいきましょう。まず、ボタンタグ及び、ボタンのCSSクラスの構造を確認します。

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

次にCSSクラスです。ボタンは、btnというCSSクラスを使用します。これは、ボタン作成の為のクラスです。そしてもうひとつは、ボタンのデザインを指定する為のCSSクラスです。この部分は、Bootstrapで用意されているカラーテンプレートから任意のものを選び使用します。では、一例ですが色々なデザインを見てみましょう。

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

・サイズ

ボタンのサイズのカスタマイズ方法を見ていきます。用意されているボタンのサイズには、大きく分けて４種類あります。小・中（標準）・大・親要素の幅いっぱいの４種類です。では、これら一つ一つの指定方法とイメージを見てみましょう。

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

◎ＬＰ制作②

前回のＬＰ制作の続きを行なっていきます。前回は、以下イメージの所まで制作しました。この項目では、テキストとボタンを追加します。では、テキストを制作しましょう。以下を参考に制作してください。

テキストは、サイト内で頻繁に使用するかと思いますので、タグなどを使い分けられるように練習しましょう。

次に、ボタンです。今回は、ヒーローエリアのカルーセルの部分に追加します。詳細はこちらという意味のボタンです。また、前章で追加したテキストもカスタマイズしてみましょう。

ここまで制作できた場合のイメージ図をご覧ください。レイアウトが崩れるなど問題なく、出来ているでしょうか？

◎ＬＰ制作③

この項目では、カードを追加していきます。そして、カード内のテキストも少しカスタマイズしてみましょう。

テンプレートをカスタマイズしていく流れが掴めたでしょうか。今回のカスタマイズは、ほんの少しでしたが、テンプレートの構造や意味を理解してカスタマイズを重ねていけばオリジナリティがあるお洒落なサイトを作ることが出来ます。

◎まとめ

・見出しタグやクラスには、沢山の種類がある

・装飾の為のタグも予め用意されている

・ボタンもカラー含め、テンプレートが複数存在する

・ボタンタグだけでなく、リンクタグなどでもテンプレートが使える