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

吉田先生

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

見出しの文字サイズ

今回の章では、タイポグラフィ（文字の体裁）を学んでいきます。

Bootstrapで用意されているCSS/CSSクラスに関しては、公式ドキュメントのContentグループ > Typography で確認できます。

URL：https://getbootstrap.jp/docs/5.3/content/typography/

Bootstrapの見出しとスタイル

まず、見出しを作る際にはHTMLの<h1>～<h6>というタグを使います。
このhタグ自体に、BootstrapではそれぞれCSSが適用されています。

では、Bootstrapのｈタグを使うと文字はどのような見え方になるかを見てみましょう。

一番下は、本文等用のpタグです。
pタグに比べ、hタグは文字が太めになっています。
hの数字が若いほど、サイズが大きいことも分かりますね。

h1~h6クラスでも設定可能

見出しタグ（h1~6）のスタイルは、CSSクラスを使って表現することもできます。

例えば、文字サイズ・太さは<h2>が丁度良いけれど、文脈的にはもっと下位の見出しである。
見出しではなくテキストだけど、デザイン的に文字を大きくしたい…なんてときに便利ですね。

スタイリングのために、ページ全体や文章の構成を無視してhタグを使うのはよくありません。
見栄えのための調整は自分でCSSを書くか、BootstrapのCSSクラスを使って行うと良いです。

BootstrapのCSSでは、h*タグと、h1～h6までのクラスは全く同じ見え方になります。
h1～h6クラスは、見出しタグにも、pタグやspanタグにでも、何にでも設定可能です。

文字のサイズ・スタイル

特大サイズにするdisplay-*クラス

「display」は、Bootstrapで用意されているCSSクラスです。

h1タグ・h1クラスよりも、見出しを大きく目立つようにしたい場合などに使います。
「display」の後に、ハイフンと1～6までの数字を付ける形で書きます。

では、見え方を確認しましょう。

display-クラスも、hタグやpタグなど要素を選ばず使用できます。
ただし、見出しタグに使う場合はhタグのスタイルよりも、display-クラスのスタイル指定が優先される点は注意しましょう。

hクラスやdisplayクラスの文字サイズに関して

hクラスやdisplayクラスは、数字が若いほど文字のサイズが大きくなります。
れぞれ何pxになるのかは、相対的な指定になっています。

「rem」はhtml要素のフォントサイズを１として考える単位です。デフォルトのフォントサイズは16px。
PCモニターで表示する場合、h1とh1クラスは2.5remと設定されているので、16×2.5＝40pxとなります。

1200px以下の幅で表示する場合は、vwを使った計算式でフォントサイズが設定されています。
このあたりは覚える必要はありません。柔軟に対応できるよう設定されている、 という認識でOKです。

文字を目立たせるleadクラス

まず「lead」というCSSクラスについて学んでいきましょう。

これは、ｐタグに適用されるクラスです。
ｐタグで文章を書いているとき、目立たせたい一文があったとします。
そのような時に「lead」クラスを書いたｐタグで、一文を囲うのです。

では、どのような見え方になるか見てみましょう。

少し文字が大きくなっているのが分かるでしょうか？
「lead」クラスのフォントサイズ指定は、1.25remになっています。

そして、ｐタグで囲まれた文の一部を目立たせるときはspanタグを使い「lead」を指定しています。
段落を丸ごと目立たせる場合はｐタグに「lead」を適用していますね。

強調やハイライト

Bootstrapでは、テキストの装飾の為のタグが複数用意されています。
以下はその一例です。

strongタグを使用すれば太字になり、markタグは文中などにハイライトを入れることが出来ます。

markとsmallはCSSクラス名として指定しても、タグと同じスタイリングができます。
HTMLタグは基本的に意味があるものですので、沿わない場合はspanタグにクラスを指定すると良いでしょう。

また、要素名（タグ名）と同じではありませんが、<srtong>タグを使うとなる太字表現はfw-boldクラス。
削除済みを示す<del>タグで表現される、文字の打消し線はtext-decoration-line-througクラス。
……など、テキスト系のユーティリティクラス名を使って表現可能です。

このようなテキストの装飾の為のタグ一覧は、Typographyページ内の“インラインテキスト”項目に書かれています。

日常的にはあまり使わないHTMLタグも解説されているので、目を通してみましょう。

URL：https://getbootstrap.jp/docs/5.3/content/typography/

これら、すべてを覚える必要はありません。
ただし、必要に応じてHTMLタグ、またはTextやTypographyのページに掲載されているCSSクラスを使って、最適なマークアップが出来る必要があります。どこを見れば調べられるか、大まかに把握しておくと良いでしょう。

練習も兼ねて、Bootstrapで用意されている様々なタイポグラフィを使ってみましょう！

【実習】タイポグラフィのクラスを使う

実際にBootstrapのタイポグラフィを使ってみましょう。

前回のカルーセルの実習で使った「carousel.html」を使います。
carousel.htmlを複製（別名で保存）してから作業すると見直しがしやすいです。

下記の4つの変更を行ってください。

  1. カルーセルの上に、h1タグで「タイポグラフィ実習」と入力
  2. 「タイポグラフィ」の文字サイズを、h1そのままよりも大きくする
  3. キャプションの見出しを、見た目は変えずに h5 から h2 に変更
  4. キャプションのpタグに、leadクラスを適用
  5. キャプション全体の文字色を変更

実習作成例

ポイント

1) h1タグの追加

<body>タグの直下に、h1タグで囲って「タイポグラフィ実習」という文字を打ちます。
そのままだと画面左上ピッタリの位置に来ますので、containerクラスや余白のクラスを指定すると良いでしょう。

文字サイズはdisplay-*クラスで大きくします。
h1そのままよりも大きければ、文字のサイズ・太さは問いません。

2) カルーセル内テキスト

<div class="carousel-caption ...>の中にあるh5タグを、h2に変更。
タグを変えると文字が大きくなるので、Bootstrapのクラスを使って最初と同じ大きさに保ちます。

見出し下の<p>タグには、leadクラスを適用して、文字を大きくします。

最後の文字色変更は、Bootstrapのユーティリティを理解するの復習です。
文字色は、BootstrapのCSSクラスで変えられるものなら何でも構いません。

ご用意している画像を使っている場合、文字を何色にしても、読みにくさは残ります。
文字を見やすくするための設定例は、最後の実習で紹介しています。
今はそのまま、レッスンを進めてください。

前のレッスン 次のレッスン レッスン一覧へ

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

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

無料講座一覧を見る

コース素材一覧

レッスン素材一覧

×