Bootstrap4 のテキスト レイアウト
このガイドでは、Bootstrap 4 の定義済みスタイルとクラスを使用して、Web ページのテキストコンテンツをフォーマットする方法について説明します。
1. 見出し (Headings)
Bootstrap 4 は、h1 から h6 までの 6 つのレベルの見出しスタイルを提供しています。 .h1 から .h6 クラスを使用して、見出しスタイルを適用します。
<h1>見出し 1</h1>
<h2>見出し 2</h2>
<h3>見出し 3</h3>
<h4>見出し 4</h4>
<h5>見出し 5</h5>
<h6>見出し 6</h6>
2. ディスプレイ見出し (Display headings)
より大きく、より目立つ見出しスタイルには、.display-1 から .display-4 クラスを使用します。
<h1 class="display-1">ディスプレイ見出し 1</h1>
<h2 class="display-2">ディスプレイ見出し 2</h2>
<h3 class="display-3">ディスプレイ見出し 3</h3>
<h4 class="display-4">ディスプレイ見出し 4</h4>
3. 本文 (Body)
デフォルトの本文段落スタイルは、<p> タグを使用して作成します。
リードテキストは、段落の先頭に表示される、少し大きく太字のテキストです。 .lead クラスを使用してリードテキストを作成します。
<p class="lead">これはリードテキストです。</p>
4. インラインテキスト要素 (Inline text elements)
以下のインラインテキスト要素を使用して、テキストをマークアップおよびフォーマットできます。
| 要素 | 説明 |
|---|---|
<strong>, <b> |
太字テキスト |
<em>, <i> |
斜体テキスト |
<mark> |
マーカーテキスト |
<del> |
削除されたテキスト |
<s> |
取り消し線テキスト |
<ins> |
挿入されたテキスト |
<u> |
下線付きテキスト |
<small> |
小さいテキスト |
<abbr> |
省略形 |
5. テキストの色 (Text color)
以下の定義済みクラスを使用して、テキストの色を変更できます。
| クラス | 説明 |
|---|---|
.text-primary |
プライマリカラーのテキスト |
.text-secondary |
セカンダリカラーのテキスト |
.text-success |
成功を示す緑色のテキスト |
.text-danger |
危険を示す赤色のテキスト |
.text-warning |
警告を示す黄色のテキスト |
.text-info |
情報メッセージを示すシアン色のテキスト |
.text-light |
明るいグレーのテキスト |
.text-dark |
暗いグレーのテキスト |
.text-white |
白いテキスト |
.text-muted |
淡色表示されたテキスト |
6. テキストの配置 (Text alignment)
以下の定義済みクラスを使用して、テキストの配置を制御できます。
| クラス | 説明 |
|---|---|
.text-left |
左寄せ |
.text-center |
中央寄せ |
.text-right |
右寄せ |
.text-justify |
両端揃え |
7. テキストの変換 (Text transform)
以下の定義済みクラスを使用して、テキストの大文字と小文字を制御できます。
| クラス | 説明 |
|---|---|
.text-lowercase |
すべて小文字 |
.text-uppercase |
すべて大文字 |
.text-capitalize |
単語の先頭を大文字 |
8. その他 (Other)
その他、便利なテキスト排版クラスがあります。
.font-weight-bold,.font-weight-light,.font-italic: 太字、軽量、斜体を適用します。.list-unstyled,.list-inline: リストのスタイルを変更します。.blockquote,.blockquote-footer: 引用をフォーマットします。
Bootstrap 4 文字排版に関するQA
Q1: Bootstrap 4でカスタムフォントを使うにはどうすればいいですか？
A1: Bootstrapのデフォルトフォントを変更するには、公式ドキュメントを参照して、SCSS変数を変更するか、独自のCSSを追加してください。
Q2: 特定の画面サイズでのみテキストスタイルを変更するにはどうすればいいですか？
A2: Bootstrapのレスポンシブユーティリティクラス (例: .d-md-block, .text-lg-center) を使用して、特定の画面サイズでのみスタイルを適用できます。
Q3: リードテキストのフォントサイズを変更するにはどうすればいいですか？
A3: リードテキストのフォントサイズは、.leadクラスに独自のCSSを追加して変更できます。例えば、.lead { font-size: 1.8rem; }のように記述します。