改9.Bootstrapのボタンを理解する

• ボタン
• まとめ

 

ボタン

今回は【6. Bootstrapのフォームを理解する】のフォームでも使われていた、ボタンについてみていきましょう。ボタンの使い方には、大きく分けて２つあります。

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

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

 

・ボタンのカスタマイズ

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

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

 

次にCSSクラスです。 ボタンは、btnというCSSクラスを使用します。これは、ボタン作成の為のクラスです。

そしてもうひとつは、ボタンのデザインを指定する為のCSSクラスです。この部分は、Bootstrapで用意されているカラーテンプレートから任意のものを選び使用します。

 

では、一例ですが色々なデザインを見てみましょう。 ボタン内のテキストが配色名です。これを「btn-配色名」の部分に入れて使用します。

 

 

・サイズ

ボタンのサイズのカスタマイズ方法を見ていきます。 用意されているボタンのサイズには、大きく分けて４種類あります。小・中（標準）・大・親要素の幅いっぱいの４種類です。

 

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

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

 

 

◆LP制作課題③

1.ボタンを作ろう

前回作成したテキスト部分の下にボタンを作ります。

ヒーローエリアのカルーセルの部分にもボタンを加えます。クリックするとページに移動できるイメージですね。前章の復習も兼ねてキャプション部分も読みやすいように変更してみましょう。

 

 

完成したカルーセル部分がこちらです。

 

 

2.ナビゲーションにボタンを追加

ヘッダーに入れているナビゲーションバーにボタンを追加します。

 

行うことはとてもシンプル。 Bpptstrapサイトからコピーしてきたナビゲーションテンプレートの中の<form>タグ内、メールアドレスと会員登録の間に<button>タグを入れるだけです。

 

 

3.カードエリアを追加する

テキスト部分の下に３枚のカードを並べたエリアを作ります。 そして、カード内のテキストも少しカスタマイズしてみましょう。

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

 

 

◎まとめ

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

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

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

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