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

Bootstrap 5 のタイポグラフィ：見出し・本文・行間・文字色のベストプラクティス

先生と生徒の会話形式で理解しよう

生徒

「Webサイトの文字の見た目って、どうやって整えるんですか？」

先生

「Bootstrap 5（ブートストラップファイブ）を使えば、文字の大きさや色、間隔をとても簡単に設定できますよ。」

生徒

「難しそうですが、初心者でも使えるんですか？」

先生

「もちろん！これから順番にタイポグラフィの基本を見ていきましょう！」

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

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

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

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. 本文のサイズを変えたいときのクラス

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


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

ブラウザ表示

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

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

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


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

ブラウザ表示

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

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


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

ブラウザ表示

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

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

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


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

ブラウザ表示

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

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


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

ブラウザ表示

まとめ

Bootstrap 5 タイポグラフィの全体像を振り返る

ここまで、Bootstrap 5を使ったタイポグラフィ設定について、初心者でも理解できるように基礎から丁寧に学んできました。タイポグラフィとは単に文字を表示するだけではなく、見出し、本文、行間、文字サイズ、文字色、文字の太さなどを調整することで、 Webページ全体の読みやすさや印象を大きく左右する重要な要素です。特にBootstrap 5では、あらかじめ用意されたクラスをHTMLに指定するだけで、デザイン性の高い文字表現を簡単に実現できる点が大きな特徴といえます。

見出しタグであるh1からh6は、ページ構成を分かりやすく整理するために欠かせません。検索結果での評価やユーザーの読みやすさにも関わるため、意味を意識して正しく使うことが大切です。また、hタグを使わなくても、h1クラスやh2クラスを使えば、pタグに見出し風のデザインを適用できるため、レイアウトの自由度も高まります。

文字サイズ・行間・文字色の重要性

本文の文字サイズを調整できるfsクラスや、行と行の間隔を調整できるlhクラスは、長文コンテンツを読みやすくするうえで非常に重要です。文字が小さすぎたり、行間が詰まりすぎていると、内容が良くても読まれにくくなってしまいます。逆に、適切な文字サイズと行間を設定することで、ユーザーはストレスなく情報を理解できます。

文字色についても、Bootstrap 5にはtext-primaryやtext-dangerなどの便利なクラスが用意されています。強調したい部分や注意喚起したい文章を色で分かりやすく表現することで、情報の重要度を視覚的に伝えることができます。ただし、色を使いすぎると逆に見づらくなるため、全体のバランスを考えて使うことがポイントです。

まとめとしてのサンプルプログラム

ここでは、これまで学んだタイポグラフィの要素を組み合わせたサンプルプログラムを確認します。見出し、文字サイズ、行間、文字色を一度に使うことで、実際のWebページに近い表現になります。


<h2 class="fw-bold text-center text-primary">
    お知らせ
</h2>

<p class="fs-5 lh-lg text-center">
    サイトリニューアルに伴い、一部機能がご利用いただけません。
</p>

<p class="fw-bold text-danger text-center">
    メンテナンス予定日：七月十五日 午前一時から午前五時まで
</p>

ブラウザ表示

このようにBootstrap 5のタイポグラフィクラスを活用すれば、 CSSを細かく書かなくても、統一感のある読みやすい文字デザインを作ることができます。初心者の方は、まず既存のクラスを組み合わせて使い、慣れてきたら独自のデザインに発展させていくと理解が深まります。

先生と生徒の振り返り会話

生徒

「文字の大きさや色って、なんとなく決めていましたけど、 Bootstrap 5を使うとルールがはっきりしていて分かりやすいですね。」

先生

「そうですね。タイポグラフィは感覚だけでなく、読みやすさや構造を意識することが大切です。 Bootstrapのクラスを使えば、その基本を自然に身につけられます。」

生徒

「見出し、本文、強調部分を分けるだけで、文章がすごく読みやすくなるのが実感できました。」

先生

「その気づきはとても重要です。タイポグラフィを意識するだけで、Webサイトの完成度は大きく上がります。今回学んだ基本を土台にして、ぜひ実際のページ制作に活かしてください。」