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

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）を入れる

【変更履歴】

  • 【v4.0.0】
    • <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 v4.6.2スタイル変更：小さめの文字のテキスト　クラス設定でも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> タグを使用
  • 小さめの文字：デフォルトに比べ小さめのサイズでテキストを表示するために <small> タグか .small クラスを使用
  • 太めの文字：より重いフォントでテキストを強調するために <strong> タグを使用
  • 斜体：イタリック体でテキストを強調するために <em> タグを使用（ブラウザによっては123やabcなど英数字のみ適用）

【変更履歴】

  • 【v4.6.2】
    • <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: 90%;）になり、英単語は全て大文字で表示される

 

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

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

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

見本

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

Bootstrap3.xの設定例
<blockquote>
	<p>blockquote要素に含まれるよく知られた引用。</p>
</blockquote>
Bootstrap4.xの設定例 緑背景が変更箇所
<blockquote class="blockquote">
	<p class="mb-0">blockquote要素に含まれるよく知られた引用。</p>
</blockquote>

【設定】

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

【変更履歴】

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

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

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

見本

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

文章の引用元が明示できます。
Bootstrap3.xの設定例
<blockquote>
	<p>blockquote要素に含まれるよく知られた引用。</p>
	<footer>文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>
Bootstrap4.xの設定例 緑背景が変更箇所
<blockquote class="blockquote">
	<p class="mb-0">blockquote要素に含まれるよく知られた引用。</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追加

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

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

●右寄せ v4.0.0設定変更

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

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

※設定なし


右寄せ<blockquote class="blockquote-reverse">
	<p>blockquote要素に含まれるよく知られた引用。</p>
	<footer>文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>
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>

【設定】

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

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

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

 

リスト（Lists）

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

マークなしリスト（Unstyled）

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

見本
  • これがリスト
  • 完全にスタイルが設定されていないように見える
  • 構造的には、まだリストである
  • ただし、このスタイルは直接の子要素にのみ適用
  • 入れ子になったリスト：
    • 親のスタイルの影響を受けない
    • まだマークが表示される
    • 適切な左マージンを設定
  • 入れ子になったリスト2：
    • 新たに子のスタイルを設定
    • マークは表示されない
    • 1remの左マージンを設定
  • ここは、状況によってはまだ役立つ場合がある
設定例
 <ul class="list-unstyled">
	<li>これがリスト</li>
	<li>完全にスタイルが設定されていないように見える</li>
	<li>構造的には、まだリストである</li>
	<li>ただし、このスタイルは直接の子要素にのみ適用</li>
	<li>入れ子になったリスト：
		<ul>
			<li>親のスタイルの影響を受けない</li>
			<li>まだマークが表示される</li>
			<li>適切な左マージンを設定</li>
		</ul>
	</li>
	<li>入れ子になったリスト2：
		<ul class="list-unstyled ml-3">
			<li>新たに子のスタイルを設定</li>
			<li>マークは表示されない</li>
			<li>1remの左マージンを設定</li>
		</ul>
	</li>
	<li>ここは、状況によってはまだ役立つ場合がある</li>
</ul>

【設定】

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

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

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

見本
  • これはリストアイテム
  • そしてもう一つ
  • ただし横並びで表示
Bootstrap3.xの設定例
<ul class="list-inline">
	<li>これはリストアイテム</li>
	<li>そしてもう一つ</li>
	<li>ただし横並びで表示</li>
Bootstrap4.xの設定例 緑背景が変更箇所
<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

【変更履歴】

  • 【v4.0.0】
    • li ⇒ li.list-inline-item

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

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

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

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

用語の定義。

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

別の用語
この別の用語の定義。
長めの用語は切り捨てられる
スペースが狭いときに便利。最後に省略記号を追加。
入れ子リスト
入れ子になった定義リスト
定義リストが好きだと聞いたので、定義リストの中に定義リストを入れてみた。
Bootstrap3.xの設定例 赤背景が変更箇所
<dl class="dl-horizontal">
	<dt>説明リスト</dt>
	<dd>説明リストは、用語を定義するのに最適。</dd>
	<dt>用語</dt>
	<dd>
		<p>用語の定義。</p>
		<p>同じ用語の2番目の定義。</p>
	</dd>
	<dt>別の用語</dt>
	<dd>この別の用語の定義。</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">用語</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 を追加すると切り捨て可能に

【変更履歴】

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

ページ移動