タイポグラフィ・ボタン

見出しやボタンの種類もたくさんあります。ページにあわせて使い分けてみましょう。

見出し
文字の装飾
ボタン
ＬＰ制作②
ＬＰ制作③
まとめ

◎見出し

今回の章では、タイポグラフィ（文字の体裁）から学んでいきます。まず、見出しについてです。<h1>～<h6>というタグを使い、見出しを作ります。この「ｈタグ」にも、それぞれCSSが用意されています。では、Bootstrapのｈタグを使うと文字はどのような見え方になるかを見てみましょう。

一番上は、本文等用のｐタグです。ｐタグに比べ、ｈタグは太さがあり、サイズも大きいことが分かります。一番右の項目は、それぞれの文字サイズ指定のCSSです。これは、Bootstrapで用意されているCSSです。

「rem」というのは単位の一つです。これは、デフォルトのフォントサイズを「１」として考えます。Bootstrapではデフォルトのフォントサイズは１６pxです。なので、例を挙げると「２rem」は「３２px」という事です。

・display

「display」は、CSSクラスです。これは、先ほどのｈタグよりも、見出しを大きく目立つようにしたい場合などに使います。「display」の後に、ハイフンと１～４までの数字を付ける形で書きます。では、見え方を確認しましょう。

このように、spanタグなどを使って書きます。もちろんｈタグでも良いですが、ｈ１～ｈ６タグが持つフォントサイズよりも、CSSクラスの「display」のフォントサイズが優先されることだけご注意ください。

◎文字の装飾

まず「lead」というCSSクラスについて学んでいきましょう。これは、ｐタグに適用されるクラスです。ｐタグで文章を書いているとき、目立たせたい一文があったとします。そのような時に「lead」クラスを書いたｐタグで、一文を囲うのです。では、どのような見え方になるか見てみましょう。

少し文字が大きくなっているのが分かるでしょうか？「lead」クラスのフォントサイズ指定は、１.２５remになっています。そして、ｐタグで囲まれた文の一部を目立たせるときはspanタグを使い「lead」を指定しています。段落を丸ごと目立たせる場合はｐタグに「lead」を適用していますね。

・装飾

Bootstrapでは、テキストの装飾の為のタグが複数用意されています。以下はその一例です。strongタグを使用すれば太字になり、markタグは文中などにハイライトを入れることが出来ます。このような、装飾の為のタグ一覧はBootstrap公式サイト（https://getbootstrap.com/）「content」欄「Typography」の「Inline text elements」という項目にあります。

◎ボタン

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

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

・ボタンのカスタマイズ

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

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

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