Bootstrap: タイポグラフィ
最終更新：2026-08-26
1. レッスン概要
(1) 前提条件
- 3種類のコンテナタイプの違いと選択方法をマスターしていること（レッスン2から）。
.containerのレスポンシブな幅の変更を理解していること。
(2) 🎯 学習内容
- Bootstrapの見出しシステム（
h1〜h6）とディスプレイ見出しをマスターする。 .leadを使った導入段落とインラインテキスト要素の使用方法を学ぶ。- テキストカラーのユーティリティクラス
.text-*と透明度の制御をマスターする。 - テキストの配置、変換、フォントサイズのユーティリティクラスを習熟する。
- 完全なブログ記事レイアウトを独力で作成できるようになる。
(3) 課題点
チャーリーは、異なるページ間で一貫した見出しスタイルと段落間隔を必要とするブログプロジェクトを引き継ぎました。純粋なCSSを使用する場合、各ページのセレクターを書く必要があり、優先度の競合にも悩まされることになります。
(4) 解決策
Bootstrapのタイポグラフィクラスを使えば、これは簡単になります。Bootstrapはフォントサイズから行間、テキストカラーから間隔に至るまで、完全なタイポグラフィスタイルセットを提供しています。すべて事前に設定されているため、適切なクラスを使用するだけです。
理解のポイント： Bootstrapのタイポグラフィは、Wordのスタイルペインのようなものです。「見出し1」を選択すると、フォントサイズや行間を手動で調整することなく、テキストが自動的に太字で大きくなります。
(5) 利点
HTMLに対応するタイポグラフィクラスを追加するだけで、チャーリーはカスタムCSSコードを一切書かずに、すべてのブログページで一貫した見出しスタイルと段落間隔を維持できます。
2. 見出し
▶ サンプル 見出しとディスプレイ見出し
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Typography</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<!-- Standard headings -->
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<hr>
<!-- Heading classes on any element -->
<p class="h1">This paragraph looks like an h1</p>
<p class="h2">This paragraph looks like an h2</p>
<p class="h3">This paragraph looks like an h3</p>
<hr>
<!-- Display headings (extra-large) -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
</div>
</body>
</html>
出力： Bootstrap 5.3のスタイル付きコンポーネント（ボタン、カード、Carousel、Collapseなど）が表示され、ページはBootstrapのデフォルトテーマ（ライトモード）とレスポンシブグリッドで表示されます。
(1) デフォルトのフォントサイズ
| レベル | タグ/クラス | フォントサイズ | ウェイト |
|---|---|---|---|
h1 |
<h1> |
2.5rem (40px) | 500 |
h2 |
<h2> |
2rem (32px) | 500 |
h3 |
<h3> |
1.75rem (28px) | 500 |
h4 |
<h4> |
1.5rem (24px) | 500 |
h5 |
<h5> |
1.25rem (20px) | 500 |
h6 |
<h6> |
1rem (16px) | 500 |
3. ディスプレイ見出し
display-1〜display-6は、標準の見出しよりも大きく、細い（font-weight: 300）見出しで、ホームページのタイトル、ブランドスローガン、視覚的なインパクトが必要な他の領域に適しています：
<h1 class="display-3">Build <span class="text-primary">fast</span> with Bootstrap</h1>
<p class="lead">A powerful, feature-packed frontend toolkit.</p>
出力： Bootstrap 5.3のスタイル付きコンポーネント（ボタン、カード、Carousel、Collapseなど）が表示され、ページはBootstrapのデフォルトテーマ（ライトモード）とレスポンシブグリッドで表示されます。
| クラス | フォントサイズ | ウェイト | 適用場面 |
|---|---|---|---|
display-1 |
5rem | 300 | ホームページヒーロータイトル |
display-3 |
4rem | 300 | ランディングページタイトル |
display-6 |
2.5rem | 300 | サブページバナー |
(2) 全ディスプレイ見出しの比較
| クラス | フォントサイズ | 行の高さ | font-weight | 適用場面 |
|---|---|---|---|---|
display-1 |
5rem (80px) | 1.2 | 300 (Light) | ホームページヒーロータイトル |
display-2 |
4.5rem (72px) | 1.2 | 300 (Light) | ランディングページメインタイトル |
display-3 |
4rem (64px) | 1.2 | 300 (Light) | ブランドスローガン |
display-4 |
3.5rem (56px) | 1.2 | 300 (Light) | イベントページタイトル |
display-5 |
3rem (48px) | 1.2 | 300 (Light) | サブページバナー |
display-6 |
2.5rem (40px) | 1.2 | 300 (Light) | セクションタイトル |
graph TD
A[Bootstrap Typography System] --> B[Headings h1~h6]
A --> C[Display Headings display-1~6]
A --> D[Lead Paragraphs .lead]
A --> E[Inline Elements]
A --> F[Utility Classes]
B --> G[Standard Heading Tags]
B --> H[class h1 Simulating Headings]
E --> I[mark / del / ins / small]
E --> J[strong / em / u / s]
F --> K[Text Colors text-*]
F --> L[Text Alignment text-start/center/end]
F --> M[Text Transformation uppercase/lowercase/capitalize]
F --> N[Font Size fs-1~fs-6]
出力： Bootstrap 5.3のスタイル付きコンポーネント（ボタン、カード、Carousel、Collapseなど）が表示され、ページはBootstrapのデフォルトテーマ（ライトモード）とレスポンシブグリッドで表示されます。
4. リード段落
.leadは段落を大きく目立たせ、記事の導入部や強調テキストに適しています：
<p>This is a normal paragraph with default font size (1rem).</p>
<p class="lead">This is a lead paragraph. It stands out from regular content with larger font and lighter weight.</p>
出力： Bootstrap 5.3のスタイル付きコンポーネント（ボタン、カード、Carousel、Collapseなど）が表示され、ページはBootstrapのデフォルトテーマ（ライトモード）とレスポンシブグリッドで表示されます。
5. インラインテキスト要素
Bootstrapは一般的なHTMLインラインタグのスタイルをリセットし、すぐに使用できる状態にしています：
<p>You can <mark>highlight</mark> text with the mark tag.</p>
<p><del>This line is deleted text.</del></p>
<p><s>This line is no longer accurate.</s></p>
<p><ins>This line is newly inserted.</ins></p>
<p><u>This line is underlined.</u></p>
<p><small>This line is small text.</small></p>
<p><strong>This line is bold.</strong></p>
<p><em>This line is italic.</em></p>
出力： Bootstrap 5.3のスタイル付きコンポーネント（ボタン、カード、Carousel、Collapseなど）が表示され、ページはBootstrapのデフォルトテーマ（ライトモード）とレスポンシブグリッドで表示されます。
| タグ | 効果 | 用途 |
|---|---|---|
<mark> |
黄色の背景ハイライト | キーワード / 検索結果 |
<del> |
取り消し線 | 削除されたコンテンツ |
<ins> |
下線（通常は緑色） | 新規コンテンツ |
<small> |
小さいテキスト 0.875em | 注釈 / 脚注 |
<strong> |
太字 | キーワードの強調 |
6. テキストカラー
▶ サンプル テキストカラー
<p class="text-primary">.text-primary - Primary blue</p>
<p class="text-success">.text-success - Success green</p>
<p class="text-danger">.text-danger - Danger red</p>
<p class="text-warning bg-dark p-2">.text-warning - Warning amber</p>
<p class="text-info bg-dark p-2">.text-info - Info cyan</p>
<p class="text-muted">.text-muted - Muted gray</p>
<p class="text-dark">.text-dark - Dark text</p>
<p class="text-body">.text-body - Default body color</p>
出力： Bootstrap 5.3のスタイル付きコンポーネント（ボタン、カード、Carousel、Collapseなど）が表示され、ページはBootstrapのデフォルトテーマ（ライトモード）とレスポンシブグリッドで表示されます。
テキストの透明度（Bootstrap 5.3）：
<p class="text-primary">100% opacity</p>
<p class="text-primary text-opacity-75">75% opacity</p>
<p class="text-primary text-opacity-50">50% opacity</p>
<p class="text-primary text-opacity-25">25% opacity</p>
出力： Bootstrap 5.3のスタイル付きコンポーネント（ボタン、カード、Carousel、Collapseなど）が表示され、ページはBootstrapのデフォルトテーマ（ライトモード）とレスポンシブグリッドで表示されます。
7. テキストの配置
<p class="text-start">Left aligned on all viewports.</p>
<p class="text-center">Center aligned on all viewports.</p>
<p class="text-end">Right aligned on all viewpoints.</p>
<p class="text-sm-end">Right aligned on sm+ viewports.</p>
<p class="text-md-center">Center aligned on md+ viewports.</p>
出力： Bootstrap 5.3のスタイル付きコンポーネント（ボタン、カード、Carousel、Collapseなど）が表示され、ページはBootstrapのデフォルトテーマ（ライトモード）とレスポンシブグリッドで表示されます。
ブレークポイントの接尾辞 sm/md/lg/xl/xxl はテキストの配置でも同様に有効です。
8. テキストの変換とフォントサイズ
<p class="text-lowercase">Lowercased Text</p>
<p class="text-uppercase">Uppercased Text</p>
<p class="text-capitalize">capitalized text</p>
<p class="fs-1">fs-1 - font-size: 2.5rem</p>
<p class="fs-2">fs-2 - font-size: 2rem</p>
<p class="fs-3">fs-3 - font-size: 1.75rem</p>
<p class="fs-4">fs-4 - font-size: 1.5rem</p>
<p class="fs-5">fs-5 - font-size: 1.25rem</p>
<p class="fs-6">fs-6 - font-size: 1rem</p>
▶ サンプル インライン要素の活用
さまざまなインラインテキスト要素を組み合わせた例です：
出力： Bootstrap 5.3のスタイル付きコンポーネント（ボタン、カード、Carousel、Collapseなど）が表示され、ページはBootstrapのデフォルトテーマ（ライトモード）とレスポンシブグリッドで表示されます。
| クラス | CSSプロパティ | 等価 |
|---|---|---|
text-lowercase |
text-transform: lowercase |
全文字を小文字に |
❓ よくある質問
.h1〜.h6クラスと<h1>〜<h6>タグの違いは何ですか？.h1クラスを使用します。SEOやスクリーンリーダーに正しい階層を伝えたい場合は<h1>タグを使用してください。.leadはいつ使うべきですか？.leadを適用すると効果が薄れるため、ページ全体で1〜2箇所に限定することを推奨します。text-opacity-*ユーティリティの仕組みは？--bs-text-opacityを通じて透明度を制御します。text-primaryで色を設定し、text-opacity-50でその色の透明度を50%に変更します。text-sm-start（小画面以上で左揃え）、text-md-center（中画面以上で中央揃え）、text-lg-end（大画面以上で右揃え）。📖 まとめ
- Bootstrapのタイポグラフィは
h1〜h6、.display-1〜.display-6、.leadで構成される - インラインテキスト要素（
<mark>、<small>、<text-muted>など）で強調と視覚的手がかりを追加する .text-*カラーユーティリティと.text-opacity-*で文字色と透明度を制御する.text-start/center/endで配置を、.text-lowercase/uppercase/capitalizeで変換を制御する
📝 練習問題
- ⭐ ブログ記事のヘッダーを作成しましょう：
<h1>でタイトル、.leadで導入文、<small>で日付と著者情報を表示する。 - ⭐⭐ 商品一覧ページのスタイル設定：商品名を
<h5>、価格を.text-primary、割引前価格を.text-decoration-line-through、割引率を.text-dangerで表示する。 - ⭐⭐⭐ レスポンシブな引用ブロック：モバイルでは中央揃え、デスクトップでは左揃えになる引用を
<blockquote>と.text-sm-center.text-lg-startで作成する。
