メインコンテンツへスキップ

文字の体裁（Typography）

グローバル設定、見出し、本文、リストなどを含むBootstrapの文字の体裁の解説と例。

目次

基本設定（Global settings）

Bootstrapは、基本的なグローバル表示、文字の体裁、リンクのスタイルを設定。より多くの制御が必要な場合は、テキストユーティリティクラスを参照する。

  • 各OSやデバイスに最適な font-family を選択し、ネイティブ・フォントスタックを使用。
  • より包括的でアクセスしやすいタイプスケールのために、訪問者が必要に応じてブラウザのデフォルトをカスタマイズできるように、ブラウザのデフォルトのルート font-size（通常は16px）を使用。
  • <body> に適用される文字の体裁のベースとして $font-family-base, $font-size-base, $line-height-base 属性を使用。
  • $link-color を使用して基本的なリンク色を設定。
  • <body> に適用される background-color を設定するには、$body-bg を使用（デフォルトでは #fff）。

これらのスタイルは _reboot.scss 内にあり、グローバル変数は scss/_variables.scss で定義されている。$font-size-base を rem で設定すること。

 

見出し（Headings）

すべてのHTML見出し <h1>～<h6> が利用可能。

見出しの種類
タグ 例
<h1></h1>
font-size: calc(1.375rem + 1.5vw);

h1. Bootstrap 見出し
<h2></h2>
font-size: calc(1.325rem + .9vw);

h2. Bootstrap 見出し
<h3></h3>
font-size: calc(1.3rem + .6vw);

h3. Bootstrap 見出し
<h4></h4>
font-size: calc(1.275rem + .3vw);

h4. Bootstrap 見出し
<h5></h5>
font-size: 1.25rem;
h5. Bootstrap 見出し
<h6></h6>
font-size: 1rem;
h6. Bootstrap 見出し
設定例
<h1>h1. Bootstrap 見出し</h1>
<h2>h2. Bootstrap 見出し</h2>
<h3>h3. Bootstrap 見出し</h3>
<h4>h4. Bootstrap 見出し</h4>
<h5>h5. Bootstrap 見出し</h5>
<h6>h6. Bootstrap 見出し</h6>

見出しのフォントスタイルを一致させたいが、関連するHTML要素が使用できない場合は、.h1～.h6 クラスも使用可能。

クラス 例
.h1
font-size: calc(1.375rem + 1.5vw);

h1. Bootstrap 見出し
.h2
font-size: calc(1.325rem + .9vw);

h2. Bootstrap 見出し
.h3
font-size: calc(1.3rem + .6vw);

h3. Bootstrap 見出し
.h4
font-size: calc(1.275rem + .3vw);

h4. Bootstrap 見出し
.h5
font-size: 1.25rem;

h5. Bootstrap 見出し
.h6
font-size: 1rem;

h6. Bootstrap 見出し
設定例
<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>
【設定】
  • 見出しを作成するには、<h1>～<h6> タグか.h1～.h6 クラスを使用
【注意】
  • ビューポートが1200px以上になると、フォントサイズが <h1>,.h1 は2.5rem、<h2>,.h2 は2rem、<h3>,.h3 は1.75rem、<h4>,.h4 は1.5remで固定
【変更履歴】
  • 【v5.0.0-alpha1】
    • RFSがデフォルトで有効となり、ビューポートが1200px未満でのフォントサイズがビューポートに応じて拡大縮小

見出しのカスタマイズ（Customizing headings）

付属のユーティリティクラスを使用して、Bootstrap3から小さめの見出しの補助文を再作成。

見本

見やすい表示見出し 薄い色の補助文

設定例
<h3>
	見やすい表示見出し
	<small class="text-muted">薄い色の補助文</small>
</h3>
【設定】
  • 補助文を作成するには、<h*> タグか .h* クラスに small.text-muted を入れる

 

表示見出し（Display headings）v5.0.0-alpha1スタイル変更、クラス追加

従来の見出し要素は、ページコンテンツの中で最も効果的に機能するように設計されている。見出しを目立たせる必要がある場合は、表示見出しを使ってより大きく独創的なスタイルにすることが可能。

表示見出しの種類
クラス 例
.display-1
font-size: calc(1.625rem + 4.5vw);		 表示用見出し 1
.display-2
font-size: calc(1.575rem + 3.9vw);		 表示用見出し 2
.display-3
font-size: calc(1.525rem + 3.3vw);		 表示用見出し 3
.display-4
font-size: calc(1.475rem + 2.7vw);		 表示用見出し 4
.display-5 v5.0.0-alpha1追加
font-size: calc(1.425rem + 2.1vw);		 表示用見出し 5
.display-6 v5.0.0-alpha1追加
font-size: calc(1.375rem + 1.5vw);		 表示用見出し 6
※<h1>, .h1
font-size: calc(1.375rem + 1.5vw);

見出し（参考）
設定例
<span class="display-1">表示用見出し 1</span>
<span class="display-2">表示用見出し 2</span>
<span class="display-3">表示用見出し 3</span>
<span class="display-4">表示用見出し 4</span>
<span class="display-5">表示用見出し 5</span>
<span class="display-6">表示用見出し 6</span>

表示見出しは、$display-font-sizes Sassマップと $display-font-weight, $display-line-height の2つの変数を経由して構成。

デフォルトの設定
scss/_variables.scss 内$display-font-sizes: (
	1: 5rem,
	2: 4.5rem,
	3: 4rem,
	4: 3.5rem,
	5: 3rem,
	6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;
【設定】
  • <span> タグなどに .display-* を入れる
  • 各クラスのサイズは scss/_variables.scss の $display-font-sizes Sassマップの値を変更して再コンパイルすれば変更可能
【注意】
  • ビューポートが1200px以上になると、フォントサイズが .display-1 は5rem、.display-2 は4.5rem、.display-3 は4rem、.display-4 は3.5rem、.display-5 は3rem、.display-6 は2.5rem（各クラスの $display-font-sizes Sassマップの値）で固定
  • デフォルトでは .display-6 は <h1>, .h1 と同じサイズになる
【変更履歴】
  • 【v5.0.0-alpha1】
    • RFSがデフォルトで有効となり、ビューポートが1200px未満でのフォントサイズがビューポートに応じて拡大縮小
    • .display-5 と .display-6 が追加

 

リード文（Lead）

段落を目立たせるには、.lead を追加。

見本

これはリード文の段落です。それは通常の段落から際立つ。

文章の途中でリード文を入れることもできます。

これが標準の字体です。

設定例
<p class="lead">これはリード文の段落です。それは通常の段落から際立つ。</p>

<p>文章の途中で<span class="lead">リード文を入れる</span>こともできます。</p>
【設定】
  • 段落の文章で .lead を入れる

 

文字の装飾（Inline text elements）v5.0.0-alpha1一部廃止

一般的なHTML5のインライン要素のスタイル設定。

装飾の種類

マーク <mark>/.mark：テキストをハイライトで表示する。クラス設定でもハイライト表示が可能。

削除 <del>：この行のテキストは、削除されたテキストとみなされる。

取消 <s>：この行のテキストは、もはや適切でないように扱われる。

挿入 <ins>：この行のテキストは、文書への挿入とみなされる。

下線 <u>：この行のテキストは、強調とみなされる。

小さめの文字 <small>/.small v5.0.0-alpha1スタイル変更：小さめの文字のテキスト。　クラス設定でもOK。

太めの文字 <strong>：太めの文字のテキスト。

斜体 <em>：Italic体のテキスト。

設定例
マークテキストを<mark>ハイライト</mark>で表示する。
クラス設定でも<span class="mark">ハイライト></span>表示が可能。
削除<del>この行のテキストは、削除されたテキストとみなされる。</del>
取消<s>この行のテキストは、もはや適切でないように扱われる。</s>
挿入<ins>この行のテキストは、文書への挿入とみなされる。</ins>
下線<u>この行のテキストは、強調とみなされる。</u>
小さめの文字<small>小さめの文字のテキスト</small>　<span class="small">クラス設定でもOK</span>
太めの文字<strong>太めの文字のテキスト</strong>
斜体<em>Italic体のテキスト</em>

これらのタグはセマンティックな目的のために使用する必要があることに注意：

  • <mark> は、参照や表記のためにマークか強調表示されているテキストを表わす。
  • <small> は、著作権や法的テキストなどの副次的なコメントと小さな活字を表わす。
  • <s> は、関連性がなくなった要素や正確ではなくなった要素を表わす。
  • <u> は、テキスト以外の注釈があることを示す方法でレンダリングする必要があるインラインテキストの範囲を表わす。

テキストのスタイルを設定する場合は、代わりに次のクラスを使用する必要がある。

  • .mark は、<mark> と同じスタイルを適用。
  • .small は、<small> と同じスタイルを適用。
  • .text-decoration-underline は、<u> と同じスタイルを適用。
  • .text-decoration-line-through は、<s> と同じスタイルを適用。

上記には記載していないが、HTML5では <b> と <i> を自由に使用してもよい。<b> は重要性を伝えることなく単語やフレーズを強調表示するためのもので、<i> は音声、技術用語などが対象。

【設定】
  • マーク：テキストをハイライトで強調するために <mark> タグか .mark クラスを使用
  • 削除：削除されたテキストブロックを示すために <del> タグを使用
  • 取消：もはや適切でないテキストブロックを示すために <s> タグを使用（.text-decoration-line-through（取消線）でも可）
  • 挿入：文書への挿入を示すために <ins> タグを使用
  • 下線：テキストを強調するために <u> タグを使用（.text-decoration-underline（下線）でも可）
  • 小さめの文字：標準に比べ小さめのサイズでテキストを表示するために <small> タグか .small クラスを使用
  • 太めの文字：より重いフォントでテキストを強調するために <strong> タグを使用
  • 斜体：イタリック体でテキストを強調するために <em> タグを使用（ブラウザによっては123やabcなど英数字のみ適用）
【変更履歴】
  • 【v5.0.0-alpha1】
    • <small>, .small の font-size が80%から0.875remに変更

 

文字の体裁のユーティリティ（Text utilities）

文字の配置、文字の変換、スタイル、行間、太さ、装飾や色などは、テキストユーティリティやカラーユーティリティで変更。

 

省略語（Abbreviations）

ホバー上に展開されたバージョンを示す略語と略語用のHTMLの <abbr> 要素の書式化を実装。略語にはデフォルトの下線が付いており、ホバーと補助技術のユーザーに追加のコンテキストを提供するためのヘルプカーソルがある。

若干小さめのフォントサイズの略語にするには、.initialism を追加する。

見本

単語属性の省略形はattrです。

htmlはたいへんすばらしいものです。

設定例
<p>単語属性の省略形は<abbr title="Attribute">attr</abbr>です。</p>

<p><abbr title="HyperText Markup Language" class="initialism">html</abbr>はたいへんすばらしいものです。</p>
【設定】
  • 省略形や頭字語を表示するために <abbr> タグを使用
  • abbr に title 属性で説明をつけると、その部分にカーソルを合わせたときに「？」のカーソルとともに説明がホバー表示される（※ブラウザによる）
  • abbr.initialism にすると字体が若干小さめ（font-size: 0.875em;）になり、英単語は全て大文字で表示される

 

引用（Blockquotes）v5.0.0-alpha1設定変更

※マークアップのないベースの引用のスタイルはRebootに掲載。

文章内に別のソースからのコンテンツ・ブロックを引用する場合、引用符としてHTMLの周囲を <blockquote class="blockquote"> で囲む。

見本

blockquote要素に含まれるよく知られた引用。

Bootstrap5.xの設定例 緑背景が変更箇所
<blockquote class="blockquote">
	<p>これはリード文の段落です。それは通常の段落から際立つ。</p>
</blockquote>
※Bootstrap4.xの設定例 赤背景が変更箇所
<blockquote class="blockquote">
	<p class="mb-0">これはリード文の段落です。それは通常の段落から際立つ。</p>
</blockquote>
【設定】
  • <blockquote> タグに .blockquote を入れる
    ※ .blockquote を入れないときは、このような表示になる
【変更履歴】
  • 【v5.0.0-alpha1】
    • </blockquote> の手前の <p> に .mb-0 の追加は不要に

引用元の表示（Naming a source）

HTML仕様では、ブロック引用属性は <blockquote> の外側に配置する必要がある。引用元を提供する場合は、<blockquote> を <figure> で囲み、<figcaption> かブロックレベル要素（<p> など）を .blockquote-footer クラスで使用する。引用元の名前も <cite> で囲むこと。

見本

blockquote要素に含まれるよく知られた引用。

文章の引用元が明示できます。
Bootstrap5.xの設定例 緑背景が変更箇所
<figure>
	<blockquote class="blockquote">
		<p>blockquote要素に含まれるよく知られた引用。</p>
	</blockquote>
	<figcaption class="blockquote-footer">
		文章の<cite title="引用元の名前">引用元</cite>が明示できます。
	</figcaption>
</figure>
※Bootstrap4.xの設定例 赤背景が変更箇所
<blockquote class="blockquote">
	<p class="mb-0">blockquote要素に含まれるよく知られた引用。</p>
	<footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>
【設定】
  • figure > [blockquote.blockquote + figcaption.blockquote-footer]
  • さらにfigcaption.blockquote-footer > <cite> にして、<cite> に title 属性を入れると、その部分にカーソルを合わせたときに引用の追加情報がホバー表示される（※ブラウザによる）
【変更履歴】

引用の配置（Alignment）v5.0.0-beta1設定変更

blockquoteの配置を変更するには、必要に応じてテキストユーティリティを使用。

見本

●中央揃え

blockquote要素に含まれるよく知られた引用。

文章の引用元が明示できます。

●行末揃え

blockquote要素に含まれるよく知られた引用。

文章の引用元が明示できます。
設定例
Bootstrap5.xの設定例 緑背景が変更箇所
中央揃え<figure class="text-center">
	<blockquote class="blockquote">
		<p>blockquote要素に含まれるよく知られた引用。</p>
	</blockquote>
	<figcaption class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</figcaption>
</figure>
行末揃え<figure class="text-end">
	<blockquote class="blockquote">
		<p>blockquote要素に含まれるよく知られた引用。</p>
	</blockquote>
	<figcaption class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</figcaption>
</figure>
※Bootstrap4.xの設定例 赤背景が変更箇所
中央揃え<blockquote class="blockquote text-center">
	<p class="mb-0">blockquote要素に含まれるよく知られた引用。</p>
	<footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>
行末揃え<blockquote class="blockquote text-right">
	<p class="mb-0">blockquote要素に含まれるよく知られた引用。</p>
	<footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>
【設定】
  • <figure> に .text-{center|right} を追加
【変更履歴】
  • 【v5.0.0-alpha1】
    • blockquote.blockquote.text-{center|right} ⇒ figure.text-{center|right}
  • 【v5.0.0-beta1】
    • RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
      • 文字の行末揃え：.text-right ⇒ .text-end

 

リスト（Lists）

※マークアップのないベースのリストのスタイルはRebootに掲載。

マークなしリスト（Unstyled）

リストアイテムのデフォルトの list-style と行頭マージンを削除（直下の子のみ）。これは直下の子リストアイテムにのみに適用。つまり、入れ子のリストにもクラスを追加する必要がある。

見本
  • これがリスト
  • 完全にスタイルが設定されていないように見える
  • 構造的には、まだリストである
  • ただし、このスタイルは直接の子要素にのみ適用
  • 入れ子になったリスト：
    • このスタイルの影響を受けない
    • まだマークが表示される
    • 適切な左マージンを設定
  • これは、状況によってはまだ役立つ場合がある
Bootstrap5.xの設定例 緑背景が変更箇所
 <ul class="list-unstyled">
	<li>これがリスト</li>
	<li>完全にスタイルが設定されていないように見える</li>
	<li>構造的には、まだリストである</li>
	<li>ただし、このスタイルは直接の子要素にのみ適用</li>
	<li>入れ子になったリスト：
		<ul>
			<li>このスタイルの影響を受けない</li>
			<li>まだマークが表示される</li>
			<li>適切な左マージンを設定</li>
		</ul>
	</li>
	<li>これは、状況によってはまだ役立つ場合がある</li>
</ul>
【設定】
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL（右書き）の設定追加に伴い行頭マージンの空白ユーティリティのクラス名変更
      • .ml-{size} ⇒ .ms-{size}

横並びリスト（Inline）

リストの箇条書きを削除し、2つのクラス（.list-inline と .list-inline-item）を組み合わせて軽めの margin を適用。

見本
  • これはリストアイテム
  • そしてもう一つ
  • ただし横並びで表示
設定例
<ul class="list-inline">
	<li class="list-inline-item">これはリストアイテム</li>
	<li class="list-inline-item">そしてもう一つ</li>
	<li class="list-inline-item">ただし横並びで表示</li>
</ul>
【設定】
  • ul.list-inline（または ol.list-inline） > li.list-inline-item

水平定義リスト（Description list alignment）

※マークアップのないベースの定義リストのスタイルはRebootに掲載。

グリッドシステムの定義済みクラス（またはセマンティックmixin）を使用して、用語と説明リストを水平方向に配置。長い用語の場合は、必要に応じてに .text-truncate クラスを追加してテキストを切り捨てて省略。

見本
説明リスト
説明リストは、用語を定義するのに最適。
用語

用語の定義。

同じ用語の2番目の定義。

別の用語
この別の用語の定義。
長めの用語は切り捨てられる
スペースが狭いときに便利。最後に省略記号を追加。
入れ子リスト
入れ子になった定義リスト
定義リストが好きだと聞いたので、定義リストの中に定義リストを入れてみた。
設定例
<dl class="row">
	<dt class="col-sm-3">説明リスト</dt>
	<dd class="col-sm-9">説明リストは、用語を定義するのに最適。</dd>
	<dt class="col-sm-3">用語</dt>
	<dd class="col-sm-9">
		<p>用語の定義。</p>
		<p>同じ用語の2番目の定義。</p>
	</dd>
	<dt class="col-sm-3">別の用語</dt>
	<dd class="col-sm-9">この別の用語の定義。</dd>
	<dt class="col-sm-3 text-truncate">長めの用語は切り捨てられる</dt>
	<dd class="col-sm-9">スペースが狭いときに便利。最後に省略記号を追加。</dd>
	<dt class="col-sm-3">入れ子リスト</dt>
	<dd class="col-sm-9">
		<dl class="row">
			<dt class="col-sm-4">入れ子になった定義リスト</dt>
			<dd class="col-sm-8">定義リストが好きだと聞いたので、定義リストの中に定義リストを入れてみた。</dd>
		</dl>
	</dd>
</dl>
【設定】
  • dl に .row を入れる
  • アイテム dt と説明 dd には .col(-{breakpoint})-* を入れる（入れ子の設定も可能）
  • 長いアイテムの場合は、dt に .text-truncate を追加すると切り捨て可能に

 

レスポンシブ・フォントサイズ（Responsive font sizes）v5.0.0-alpha1設定変更

Bootstrap5 では、レスポンシブ・フォントサイズがデフォルトで有効になっているため、デバイスやビューポートのサイズに合わせてより自然にテキストの拡大縮小が可能。これがどのように機能するかはRFSの項目に記載。

【変更履歴】
  • 【v5.0.0-alpha1】
    • デフォルトで無効 ⇒ 有効に