Bootstrapのタイポグラフィを理解する【図解たっぷりBootstrap入門】

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

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

吉田先生

Bootstrapの仕様に従って文字を設定するだけで美しい文字組み（タイポグラフィ）が実現できますよ。文字の空け方なででも悩まなくてすみますし、とても助かります。

• 見出し
• 文字の装飾

◎見出し

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

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

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

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」という項目にあります。