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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

文字の体裁（Typography） v4.3.0一部変更

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

基本設定（Global settings）

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

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

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

 

見出し（Headings）

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

見出しの種類
タグ 例
<h1></h1>
font-size: 2.5rem;

h1. Bootstrap 見出し
<h2></h2>
font-size: 2rem;

h2. Bootstrap 見出し
<h3></h3>
font-size: 1.75rem;

h3. Bootstrap 見出し
<h4></h4>
font-size: 1.5rem;

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: 2.5rem;

h1. Bootstrap 見出し
.h2
font-size: 2rem;

h2. Bootstrap 見出し
.h3
font-size: 1.75rem;

h3. Bootstrap 見出し
.h4
font-size: 1.5rem;

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 クラスを使用

見出しのカスタマイズ（Customizing headings）v4.0.0設定変更

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

見本

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

Bootstrap3.xの設定例
<h3>
	見やすい表示見出し
	<small>薄い色の補助文</small>
</h3>
Bootstrap4.xの設定例 緑背景が変更箇所
<h3>
	見やすい表示見出し
	<small class="text-muted">薄い色の補助文</small>
</h3>

【設定】

  • 補助文を作成するには、<h*> タグか .h* クラスに small.text-muted（または span.small.text-muted）を入れる

【Bootstrap3.xとの変更箇所】

  • <small> ⇒ small.text-muted
    span.small ⇒ span.small.text-muted

 

表示見出し（Display headings）v4.0.0新設

従来の見出し要素は、ページコンテンツの中で最も効果的に機能するように設計されている。見出しを目立たせる必要がある場合は、表示見出しを使ってより大きく独創的なスタイルにすることが可能。これらの見出しのサイズはデフォルトではレスポンシブで拡大縮小しないが、レスポンシブ・フォントサイズを有効にすれば可能【v4.3.0～】。

表示見出しの種類
クラス 例
.display-1
font-size: 6rem;		 表示用見出し 1
.display-2
font-size: 5.5rem;		 表示用見出し 2
.display-3
font-size: 4.5rem;		 表示用見出し 3
.display-4
font-size: 3.5rem;		 表示用見出し 4
※<h1>, .h1
font-size: 2.5rem;

見出し（参考）
設定例
<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> タグなどに .display-* を入れる

 

リード文（Lead）

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

見本

これがリード文の字体です。

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

これが標準の字体です。

設定例
<p class="lead">これがリード文の字体です。</p>

<p>文章の途中で<span class="lead">リード文を入れる</span>こともできます。</p>

【設定】

  • 段落の文章で .lead を入れる

 

文字の装飾（Inline text elements）

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

.mark と .small クラスも、<mark> と <small> と同じスタイルを適用し、タグがもたらす望ましくないセマンティックの影響を避けることが可能。

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

装飾の種類

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

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

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

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

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

小さめの文字 <small>/.small：小さめの文字のテキスト　クラス設定でも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> タグか .mark クラスを使用
  • 削除：削除されたテキストブロックを示すために <del> タグを使用
  • 取消：もはや適切でないテキストブロックを示すために <s> タグを使用
  • 挿入：文書への挿入を示すために <ins> タグを使用
  • 下線：テキストを強調するために <u> タグを使用
  • 小さめの文字：標準に比べ80％のサイズでテキストを表示するために <small> タグか .small クラスを使用
  • 太めの文字：より重いフォントでテキストを強調するために <strong> タグを使用
  • 斜体：イタリック体でテキストを強調するために <em> タグを使用（ブラウザによっては123やabcなど英数字のみ適用）

 

文字の体裁のユーティリティ（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: 90%;）になり、英単語は全て大文字で表示される

 

引用（Blockquotes）v4.0.0設定変更

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

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

見本

基本の引用文です。

Bootstrap3.xの設定例
<blockquote>
	<p>基本の引用文です。</p>
</blockquote>
Bootstrap4.xの設定例 緑背景が変更箇所
<blockquote class="blockquote">
	<p class="mb-0">基本の引用文です。</p>
</blockquote>

【設定】

  • <blockquote> タグに .blockquote を入れる
    ※ .blockquote を入れないときは、このような表示になる
  • 引用文は、p.mb-0（下部のマージンを0に）にするとバランスよく見える場合がある

【Bootstrap3.xとの変更箇所】

  • <blockquote> > <p> ⇒ blockquote.blockquote > p.mb-0
  • 引用文の横にある枠線がなくなった

引用元の表示（Naming a source）v4.0.0設定変更

引用元を特定するために <footer class="blockquote-footer"> を追加すること。<cite> で引用元の名前を囲むこと。

見本

引用文です。

文章の引用元が明示できます。
Bootstrap3.xの設定例
<blockquote>
	<p>引用文です。</p>
	<footer>文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>
Bootstrap4.xの設定例 緑背景が変更箇所
<blockquote class="blockquote">
	<p class="mb-0">引用文です。</p>
	<footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>

【設定】

  • blockquote.blockquote > footer.blockquote-footer
  • さらにfooter.blockquote-footer > <cite> にして、<cite> に title 属性を入れると、その部分にカーソルを合わせたときに引用の追加情報がホバー表示される（※ブラウザによる）

【Bootstrap3.x（3.1.0～）との変更箇所】

  • footer ⇒ footer.blockquote-footer

引用の配置（Alignment）

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

見本

●中央揃え v4.0.0追加

中央揃えの引用文です。

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

●右寄せ v4.0.0設定変更

右寄せの引用文です。

文章の引用元が明示できます。
Bootstrap3.xの設定例 赤背景が変更箇所
中央揃え

※設定なし


右寄せ<blockquote class="blockquote-reverse">
	<p>右寄せの引用文です。</p>
	<footer>文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>
Bootstrap4.xの設定例 緑背景が変更箇所
中央揃え<blockquote class="blockquote text-center">
	<p class="mb-0">中央揃えの引用文です。</p>
	<footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>
右寄せ<blockquote class="blockquote text-right">
	<p class="mb-0">右寄せの引用文です。</p>
	<footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>

【設定】

  • blockquote.blockquote に .text-{center|right} を追加

【Bootstrap3.x（3.1.0～）との変更箇所】

  • 右寄せ：blockquote.blockquote-reverse ⇒ blockquote.blockquote.text-right

 

リスト（Lists）

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

マークなしリスト（Unstyled）

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

見本
  • リスト1
  • リスト2
  • リスト3
    • 子リスト1
    • 子リスト2
    • 子リスト3
  • リスト4
  • リスト5
  • リスト6
設定例
 <ul class="list-unstyled">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<ul class="list-unstyled ml-5">
		<li>子リスト1</li>
		<li>子リスト2</li>
		<li>子リスト3</li>
	</ul>
	<li>リスト4</li>
	<li>リスト5</li>
	<li>リスト6</li>
</ul>

【設定】

  • ul や ol に .list-unstyled を入れる
  • 入れ子のリストもマークなしにする場合は、同様に .list-unstyled を入れ、さらに .ml-{size}（左マージンの空白クラス）を追加

横並びリスト（Inline）v4.0.0設定変更

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

見本
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5
  • リスト6
Bootstrap3.xの設定例
<ul class="list-inline">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
	<li>リスト5</li>
	<li>リスト6</li>
</ul>
Bootstrap4.xの設定例 緑背景が変更箇所
<ul class="list-inline">
	<li class="list-inline-item">リスト1</li>
	<li class="list-inline-item">リスト2</li>
	<li class="list-inline-item">リスト3</li>
	<li class="list-inline-item">リスト4</li>
	<li class="list-inline-item">リスト5</li>
	<li class="list-inline-item">リスト6</li>
</ul>

【設定】

  • ul.list-inline（または ol.list-inline） > li.list-inline-item

【Bootstrap3.xとの変更箇所】

  • li ⇒ li.list-inline-item

水平定義リスト（Description list alignment）v4.0.0設定変更

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

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

見本
リストアイテム
リストアイテムの説明
リストアイテム2

リストアイテム2の説明1

リストアイテム2の説明2

リストアイテムがとても長くて収まらない場合
リストアイテムがとても長くて収まらない場合の説明
入れ子リスト
入れ子リストのアイテム
入れ子リストの説明
Bootstrap3.xの設定例 赤背景が変更箇所
<dl class="dl-horizontal">
	<dt>リストアイテム</dt>
	<dd>リストアイテムの説明</dd>
	<dt>リストアイテム2</dt>
	<dd>リストアイテム2の説明1</dd>
	<dd>リストアイテム2の説明2</dd>
	<dt>リストアイテムがとても長くて収まらない場合</dt>
	<dd>リストアイテムがとても長くて収まらない場合の説明</dd>
</dl>
Bootstrap4.xの設定例 緑背景が変更箇所
<dl class="row">
	<dt class="col-sm-3">リストアイテム</dt>
	<dd class="col-sm-9">リストアイテムの説明</dd>
	<dt class="col-sm-3">リストアイテム2</dt>
	<dd class="col-sm-9">
		<p class="mb-2">リストアイテム2の説明1</p>
		<p class="mb-0">リストアイテム2の説明2</p>
	</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 を追加すると切り捨て可能に

【Bootstrap3.xとの変更箇所】

  • dl.dl-horizontal ⇒ dl.row
  • アイテム dt と説明 dd は .col(-{breakpoint})-*（グリッド表記）で設定
  • 1つのアイテムに複数の説明が必要な場合は、<dd> でなく、<p>（段落）で区切る
  • 長いアイテムの場合： dt に .text-truncate を入れる必要あり（自動的に切り捨てられなくなった）

 

レスポンシブ・フォントサイズ（Responsive font sizes） v4.3.0「レスポンシブな文字の体裁」から変更

Bootstrap v4.3には、レスポンシブ・フォントサイズ（RFS）を有効にするオプションが付属しており、デバイスやビューポートのサイズに合わせてより自然にテキストの拡大縮小が可能。RFSは、 $enable-respond-font-sizes Sass変数を true に変更してBootstrapを再コンパイルすることで有効になる。
※有効にした場合の見出しのスタイル

RFSをサポートするために、Sass mixinを使用して通常の font-size プロパティを置き換える。RFSはレスポンシブに対応したスケールの動作を可能にするために rem とビューポートの単位の組み合わせで calc() 関数にコンパイルされる。RFSとその設定についての詳細は、RFSのGitHubレポジトリに記載。

  • RFSはデフォルトでは無効だが、ソースファイルの scss/_variables.scss 内にある $enable-respond-font-sizes Sass変数を false から true に変更して有効にし、Bootstrapを再コンパイルすれば使用可能。
  • これに伴い、各 .sass ファイルの font-size プロパティは、@include font-size()mixinに切り替えられた。

ページ移動