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

吉田先生

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


◎見出し

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

 

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

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

display

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

 

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

◎文字の装飾

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

 

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

装飾

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

 

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×