Bootstrap 5 のタイポグラフィ設定を完全解説！初心者でもわかる見出し・文字サイズ・文字色の基本

1. タイポグラフィってなに？初心者向けに解説

1. タイポグラフィってなに？初心者向けに解説

タイポグラフィとは、「文字の見せ方」のことをいいます。文字の大きさ、太さ、色、行と行の間隔（行間）などを調整して、読みやすくデザインする技術です。

たとえば、重要なタイトルは大きく太く表示して、説明文は少し小さめにするなどの工夫が含まれます。

2. Bootstrap 5で見出し（h1〜h6）を使う

2. Bootstrap 5で見出し（h1〜h6）を使う

Bootstrap 5では、見出しタグ（h1〜h6）を使って、自然に文字の大きさを変えることができます。h1が一番大きく、h6が一番小さいです。

<h1>これは h1 の見出し</h1>
<h2>これは h2 の見出し</h2>
<h3>これは h3 の見出し</h3>

また、.h1や.h2などのクラスを使えば、段落タグ（pタグ）にも見出し風のスタイルを付けられます。

<p class="h1">pタグでもh1風に表示できます</p>

3. 本文のサイズを変えたいときのクラス

3. 本文のサイズを変えたいときのクラス

通常の文字サイズを変更したいときは、Bootstrapのテキストサイズクラスを使います。たとえば.fs-1が一番大きく、.fs-6が一番小さいです。

<p class="fs-1">一番大きな文字サイズ</p>
<p class="fs-6">一番小さな文字サイズ</p>

4. 行と行の間隔（行間）を設定する方法

4. 行と行の間隔（行間）を設定する方法

文章が詰まりすぎて読みにくいと感じたことはありませんか？そんなときに使えるのが.lh-baseや.lh-lgなどのクラスです。

.lh-1は狭め、.lh-lgは広めです。

<p class="lh-1">行間がせまい文章です。</p>
<p class="lh-lg">行間が広めの文章です。読みやすくなります。</p>

5. 文字色の設定方法（カラー）

5. 文字色の設定方法（カラー）

Bootstrap 5では、あらかじめ用意された文字色クラスがあり、すぐに色をつけることができます。たとえば.text-primaryは青色、.text-dangerは赤色です。

<p class="text-primary">これは青い文字です。</p>
<p class="text-danger">これは赤い文字です。</p>
<p class="text-success">これは緑の文字です。</p>

6. 補足：文字の太さと揃え方

6. 補足：文字の太さと揃え方

文字を太くするには.fw-bold、薄くするには.fw-lightを使います。

文字を中央に揃えたいときは.text-center、右寄せは.text-endを使います。

<p class="fw-bold text-center">中央で太字の文字</p>
<p class="fw-light text-end">右寄せで細い文字</p>

7. 実用例：お知らせ文のスタイル

7. 実用例：お知らせ文のスタイル

実際のWebページでは、たとえば下記のようにニュースやお知らせ文を目立たせることができます。

<p class="fs-5 fw-bold text-danger lh-lg text-center">
    【重要】システムメンテナンスのお知らせ：○月○日 午前2時〜5時
</p>

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Bootstrap 5で見出しの文字サイズはどうやって変えられますか？

Bootstrap 5では、h1からh6までの見出しタグを使うことで、文字の大きさを自動的に調整できます。h1が一番大きく、h6が一番小さくなります。