Bootstrap5 タイポグラフィ
Bootstrap 5 デフォルト設定
Bootstrap 5 デフォルトのfont-sizeは 16px、line-heightは 1.5 です。
デフォルトのfont-familyは "Helvetica Neue", Helvetica, Arial, sans-serif です。
さらに、すべての<p>要素margin-top: 0 、 margin-bottom: 1rem (16px)。
<h1> - <h6>
Bootstrap ではすべての HTML 見出し（h1 から h6）のスタイルが定義されています。次の例をご覧ください：
例
<div class="container">
<h1>h1 Bootstrap 見出し</h1>
<h2>h2 Bootstrap 見出し</h2>
<h3>h3 Bootstrap 見出し</h3>
<h4>h4 Bootstrap 見出し</h4>
<h5>h5 Bootstrap 見出し</h5>
<h6>h6 Bootstrap 見出し</h6>
</div>
試してみる »
次のようにも使用できます.h1 到 .h6クラスを使用して要素のスタイルを設定する：
例
<div class="container">
<p class="h1">h1 Bootstrap 見出し</p>
<p class="h2">h2 Bootstrap 見出し</p>
<p class="h3">h3 Bootstrap 見出し</p>
<p class="h4">h4 Bootstrap 見出し</p>
<p class="h5">h5 Bootstrap 見出し</p>
<p class="h6">h6 Bootstrap 見出し</p>
</div>
試してみる »
Display 見出しクラス
Bootstrap には見出しのスタイルを制御する 4 つの Display クラスもあります: .display-1, .display-2, .display-3, .display-4。
例
<div class="container">
<h1>Display 見出し</h1>
<p>Display 見出しは、より大きく太いフォントスタイルを出力できます。</p>
<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>
</div>
試してみる »
<small>
Bootstrap 5 では、HTML<small>要素は、より小さなフォントサイズでより薄い色のテキストを作成するために使用されます：
例
<div class="container">
<h1>より小さいテキスト見出し</h1>
<p>small 要素は、より小さなフォントサイズでより薄い色のテキストに使われます：</p>
<h1>h1 見出し<small>副見出し</small></h1>
<h2>h2 見出し<small>副見出し</small></h2>
<h3>h3 見出し<small>副見出し</small></h3>
<h4>h4 見出し<small>副見出し</small></h4>
<h5>h5 見出し<small>副見出し</small></h5>
<h6>h6 見出し<small>副見出し</small></h6>
</div>
試してみる »
<mark>
Bootstrap 5 は定義します<mark>タグおよび.markクラスを黄色の背景と一定の内側余白（パディング）を持つものとして：
例
<div class="container">
<h1>ハイライトテキスト</h1>
<p>mark 要素を使用して<mark>ハイライト</mark>テキスト。</p>
</div>
試してみる »
<abbr>
Bootstrap 5 は HTML<abbr>要素のスタイルとして、テキストの下部に表示される点線の枠線を定義します：
例
<div class="container">
<h1>Abbreviations</h1>
<p>The abbr element is used to mark up an abbreviation or acronym:</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
試してみる »
<blockquote>
引用コンテンツには<blockquote>上に追加できます.blockquoteクラス：
例
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>
</div>
試してみる »
<dl>
Bootstrap 5 は HTML<dl>要素のスタイルを次のように定義します：
例
<div class="container">
<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
試してみる »
<code>
Bootstrap 5 は HTML<code>要素のスタイルを次のように定義します：
例
<div class="container">
<h1>コードスニペット</h1>
<p>いくつかのコード要素を code 要素の中に入れることができます：</p>
<p>次の HTML 要素：<code>span</code>, <code>section</code>、および<code>div</code>は、ドキュメントの一部のコンテンツを定義するために使用されます。</p>
</div>
試してみる »
<kbd>
Bootstrap 5 は HTML<kbd>要素のスタイルを次のように定義します：
例
<div class="container">
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
試してみる »
<pre>
Bootstrap 5 は HTML<pre>要素のスタイルを次のように定義します：
例
<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>
試してみる »
その他のタイポグラフィクラス
次の表は、Bootstrap5 のその他のタイポグラフィクラスの例です：
| クラス名 | 説明 | 例 |
|---|---|---|
| .lead | 段落をより目立たせます | 試してみる |
| .small | より小さいテキストを指定します（親要素の 85%） | 試してみる |
| .text-start | 左揃え | 試してみる |
| .text-center | 中央揃え | 試してみる |
| .text-end | 右揃え | 試してみる |
| .text-justify | テキストの整列を設定し、段落内で画面からはみ出した文字を自動的に折り返します | 試してみる |
| .text-nowrap | 段落内で画面からはみ出した部分を折り返しません | 試してみる |
| .text-lowercase | テキストを小文字に設定します | 試してみる |
| .text-uppercase | テキストを大文字に設定します | 試してみる |
| .text-capitalize | 単語の先頭文字を大文字に設定します | 試してみる |
| .initialism | <abbr> 要素内のテキストを小さめのフォントで表示し、小文字を大文字に変換できます | 試してみる |
| .list-unstyled | デフォルトのリストスタイルを削除し、リスト項目を左揃えにします（ <ul> および <ol> 内）。 このクラスは直接の子リスト項目にのみ適用されます （ネストされたリスト項目も削除する必要がある場合は、ネストされたリストでこのスタイルを使用する必要があります） | 試してみる |
| .list-inline | すべてのリスト項目を同じ行に配置します | 試してみる |