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

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

Reboot v4.0.0新設

Rebootは、要素固有のCSS変更を1つのファイルにまとめたもので、Bootstrapをキックスタートして、エレガントで一貫性のある簡単なベースラインを構築。

アプローチ（Approach）

Rebootは、Normalizeの上で構築され、要素のセレクタのみを使用して多少独断的なスタイルで多くのHTML要素を提供。追加のスタイルは、クラスだけで行われる。例えば、より単純なベースラインのためにいくつかの <table> のスタイルを再構築して、後で .table や .table-bordered などを提供。

Rebootで再定義すべきものを選ぶガイドラインと理由は次のとおり：

  • いくつかのブラウザのデフォルト値を更新して、拡張可能なコンポーネントの空白の単位を em から rem にする。
  • margin-top を避けているので、縦方向のマージンが折りたたまれて予期しない結果を与える可能性がある。しかし、もっと重要なことは、margin の一方向は、より単純なメンタルモデルであるということ。
  • デバイスサイズ全体を容易に拡大縮小するために、ブロック要素の margin には rem を使用する必要がある。
  • 可能な限り inherit（継承）を使用して、font 関連のプロパティの宣言を最小限にする。

 

ページのデフォルト（Page defaults）

<html> と <body> 要素は、より良いページ全体のデフォルトを提供するのに更新される。具体的には：

  • box-sizing は、*::before や *::after を含むすべての要素で基本的に border-box を設定するので、要素で宣言した幅がパディングやボーダーを決して超えないことが保証される。
  • font-size は、<html> で宣言されないが、16px（ブラウザのデフォルト）が仮定される。font-size：1rem が <body> に適用され、ユーザーの嗜好を尊重し、よりアクセスしやすいアプローチを保証しながら、メディアクエリによる簡単なレスポンシブの拡大縮小が可能。
  • また <body> では、基本的な font-family, line-height, text-align を設定しているので、後でフォントの不一致を防止するために、いくつかのフォーム要素によって継承される。
  • 安全のために <body> には、デフォルトの背景色として background-color に #fff（white）を設定。

 

基準のフォントスタック（Native font stack）

デフォルトのWebフォント（Helvetica Neue, Helvetica, Arial）はBootstrap4で廃止され、あらゆるデバイスとOS上で最適なテキストのレンダリングを行うために「ネイティブ・フォントスタック」に置き換えられた。詳細はこのSmashing Magazineの記事にあるネイティブ・フォントスタックの詳細に記載。

$font-family-sans-serif:
	// MacOS と iOS (San Francisco)用の Safari
	-apple-system,
	// MacOS (San Francisco)用の Chrome 56未満
	BlinkMacSystemFont,
	// Windows
	"Segoe UI",
	// Android
	Roboto,
	// 基本のwebフォールバック
	"Helvetica Neue", Arial,
	// Linax（v4.2.0追加）
	"Noto sans",
	"Liberation Sans", v4.6.0追加
	// Sans serifのフォールバック
	sans-serif,
	// 絵文字用フォント（v4.0.0追加）
	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

フォントスタックには絵文字フォントが含まれているため、多くの一般的な記号/絵文字のユニコード文字はマルチカラーの絵文字としてレンダリングされることに注意。それらの外観は、ブラウザ/プラットフォームのネイティブの絵文字フォントで使用されているスタイルによって異なり、CSSの color スタイルの影響を受けない。

この font-family は <body> に適用されると、Bootstrap全体で自動的に基本継承される。基本の font-family に切り替えるには、scss/_variables.scss ファイルにある $font-family-base を更新し、Bootstrapを再コンパイルする。

 

見出しと段落（Headings and paragraphs）

※定義済クラスを使用した見出しについては文字の体裁に掲載。

すべての見出し要素（<h1> など）と段落要素 <p> では、margin-top が削除されリセットされる。簡易的な空白として、見出しでは margin-bottom: .5rem、段落では margin-bottom: 1rem を追加。

見本
見出し 例
<h1></h1>

h1. Bootstrap 見出し
<h2></h2>

h2. Bootstrap 見出し
<h3></h3>

h3. Bootstrap 見出し
<h4></h4>

h4. Bootstrap 見出し
<h5></h5>
h5. Bootstrap 見出し
<h6></h6>
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>

 

リスト（Lists）

※定義済クラスを使用したリストについては文字の体裁に掲載。

すべてのリスト（<ul>, <ol>, <dl>）では、margin-top が削除され、margin-bottom: 1rem を追加。リストが入れ子になった場合は、margin-bottom は追加されない。

箇条書きリスト・順序付きリスト

見本
  • すべてのリストの上部マージンが削除
  • そしてそれらの下マージンは正規化
  • 入れ子になったリストには下マージンがない
    • このように、それらはより均一な外観を持つ
    • 特にリスト項目が続く場合
  • 左側のパディングもリセット
  1. こちらが順序付きリスト
  2. いくつかのリスト項目で
  3. 上の箇条書きリストとは
  4. 全体的に同じ外観
設定例
箇条書きリスト<ul>
	<li>すべてのリストの上部マージンが削除</li>
	<li>そしてそれらの下マージンは正規化</li>
	<li>入れ子になったリストには下マージンがない
		<ul>
			<li>このように、それらはより均一な外観を持つ</li>
			<li>特にリスト項目が続く場合</li>
		</ul>
	</li>
	<li>左側のパディングもリセット</li>
</ul>
順序付きリスト<ol>
	<li>こちらが順序付きリスト</li>
	<li>いくつかのリスト項目で</li>
	<li>上の箇条書きリストとは</li>
	<li>全体的に同じ外観</li>
</ol>

定義リスト

※定義済クラスを使用した水平定義リストについては文字の体裁に掲載。

シンプルなスタイリング、階層のクリア、空白の改善のため、定義リスト（<dl>）では margin を更新。<dd> では margin-left が 0 にリセットされ、margin-bottom: .5rem を追加。<dt> は太字に設定。

見本
説明リスト
説明リストは、用語を定義するのに最適。
用語
用語の定義。
同じ用語の2番目の定義。
別の用語
この別の用語の定義。
設定例
<dl>
	<dt>説明リスト</dt>
	<dd>説明リストは、用語を定義するのに最適。</dd>
	<dt>用語</dt>
	<dd>用語の定義。</dd>
	<dd>同じ用語の2番目の定義。</dd>
	<dt>別の用語</dt>
	<dd>この別の用語の定義。</dd>
</dl>

 

整形済テキスト（Preformatted text）

※コードブロックのスタイルはコードに掲載。

<pre> 要素では、margin-top が削除され、margin-bottom は rem 単位で使用するようにリセット。

見本
.example-element {
	margin-bottom: 1rem;
}
設定例
<pre>.example-element {
	margin-bottom: 1rem;
}</pre>

 

テーブル（Tables）

※定義済クラスを使用したテーブルについてはテーブルに掲載。

テーブルは、<caption>、罫線の枠、一貫した text-align の確保のためにスタイルが少し調整される。さらに .table クラスでボーダー、パディングを追加変更。

見本
これはテーブルの見本で、ここは内容を説明するための表題。
見出し 見出し 見出し 見出し
テーブルのセル テーブルのセル テーブルのセル テーブルのセル
テーブルのセル テーブルのセル テーブルのセル テーブルのセル
テーブルのセル テーブルのセル テーブルのセル テーブルのセル
設定例
<table>
	<caption>これはテーブルの見本で、ここは内容を説明するための表題。</caption>
	<thead>
		<tr>
			<th>見出し</th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>テーブルのセル</td>
			...
		</tr>
		...
	</tbody>
</table>

 

フォーム（Forms）v4.3.0一部機能追加

※定義済クラスを使用したフォームについてはフォームに掲載。

様々なフォーム要素が、より単純な基本スタイルに再設定される。ここで最も注目すべきいくつかの変更点は、次のとおり：

  • 個別のインプットやインプットグループのラッパーとして簡単に使用できるように、<fieldset> には、ボーダー、パディング、マージンの設定はしない。
  • <legend> は、fieldsetと同様、並べ替えの見出しとしても表示されるようにスタイルを変更。
  • <label> は、display: inline-block で表示できるように設定され、margin を適用。
  • <input>、<select>, <textarea>, <button> は、主にNormalizeによって対処されるが、Rebootがそれらの margin を削除し、line-height: inherit に設定。
  • <textarea> は、水平方向のリサイズは多くの場合ページレイアウトを「分割」するだけで、縦方向のリサイズができるように変更。
  • :not(:disabled) の場合、<button> と <input> ボタン要素では cursor: pointer になる。v4.3.0追加

これらの変更などは、次に表示。

見本
legendの見本

100


※カーソルが矢印カーソル（）から指カーソル（）に変更【v4.3.0】

設定例
<form>
	<fieldset>
		<legend>legendの見本</legend>
		<p>
			<label for="input">inputの見本</label>
			<input type="text" id="input" placeholder="Example input">
		</p>
		<p>
			<label for="select">selectの見本</label>
			<select id="select">
				<option value="">選ぶ...</option>
				<optgroup label="Option group 1">
					<option value="">オプション1</option>
					...
				</optgroup>
				...
			</select>
		</p>
		<p>
			<label>
				<input type="checkbox" value=""> このチェックボックスをクリック
			</label>
		</p>
		<p>
			<label>
				<input type="radio" id="optionsRadios1" name="optionsRadios" value="option1" checked> オプション1...
			</label>
			<label>
				<input type="radio" id="optionsRadios2" name="optionsRadios" value="option2"> オプション2...
			</label>
			<label>
				<input type="radio" id="optionsRadios3" name="optionsRadios" value="option3" disabled> オプション3は無効
			</label>
		</p>
		<p>
			<label for="textarea">textareaの見本</label>
			<textarea id="textarea" rows="3"></textarea>
		</p>
		<p>
			<label for="date">dateの見本</label>
			<input type="date" id="date">
		</p>
		<p>
			<label for="time">timeの見本</label>
			<input type="time" id="time">
		</p>
		<p>
			<label for="output">outputの見本</label>
			<output id="output" name="result">100</output>
		</p>
		<p>
			<button type="submit">登録ボタン</button>
			<input type="submit" value="Input登録ボタン">
			<input type="reset" value="Inputリセットボタン">
			<input type="button" value="Inputボタン">
		</p>
		<p>
			<button type="submit" disabled">登録ボタン無効</button>
			<input type="submit" value="Input登録ボタン無効" disabled>
			<input type="reset" value="Inputリセットボタン無効" disabled>
			<input type="button" value="Inputボタン無効" disabled>
		</p>
	</fieldset>
</form>

ボタン上のポインター（Pointers on buttons）v4.5.0新設

Rebootには、デフォルトのカーソルを pointer に変更するために role="button" の拡張が組み込まれている。この属性を要素に追加して、要素が相互作用であることを示す。この役割は、独自の cursor に変更する <button> 要素には必要ない。

見本
非ボタン要素ボタン
設定例
<span role="button" tabindex="0">非ボタン要素ボタン</span>

【設定】

  • 要素に [role="button"] 属性を入れると、その要素にカーソルを合わせたときにポインターに変更するようになる

 

その他の要素（Misc elements）

アドレス（Address）

<address> 要素では、ブラウザのデフォルトのフォントスタイルが italic から normal にリセット。line-height も継承され、margin-bottom: 1rem を追加。<address> は、最も上位の製造元（または作品全体）の連絡先情報を表示。すべての行を<br>で終了して書式を保持。

見本
Twitter社
94103 アメリカ合衆国 カルフォルニア州
サンフランシスコ市　マーケット通り1355番地　900号室
P: (123) 456-7890
フルネーム
first.last@example.com
設定例
<address>
	<strong>Twitter社</strong><br>
	アメリカ合衆国 カルフォルニア州<br>
	サンフランシスコ市　フォルサム通り795番地　600号室<br>
	<abbr title="電話">P:</abbr> (123) 456-7890
</address>
<address>
	<strong>フルネーム</strong><br>
	<a href="mailto:#">first.last@example.com</a>
</address>

引用（Blockquote）

※定義済クラスを使用した引用については文字の体裁に掲載。

blockquoteのデフォルトの margin は 1em 40px だが、他の要素との一貫性のために 0 0 1rem にリセット。さらに .blockquote クラスでスタイルを追加変更。

見本

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

文章の引用元が明示できます。
設定例
<blockquote>
	<p>blockquote要素に含まれるよく知られた引用。</p>
	<footer>文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>

インライン要素（Inline elements）

<abbr> 要素は、段落テキストの中で基本的に目立つようなスタイルになる。

見本

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

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

詳細情報表示（Summary）

詳細情報表示のデフォルトの cursor は、テキストカーソル （text）なので、それを指カーソル （pointer）にリセットして、要素をクリックすることで詳細情報が開閉可能なことを伝える。

見本
詳細

詳細についての詳しい情報。

さらに詳細

詳細についてさらに詳しく説明。

設定例
<details>
	<summary>詳細</summary>
	<p>詳細についての詳しい情報。</p>
</details>

<details open>
	<summary>さらに詳細</summary>
	<p>詳細についてさらに詳しく説明。</p>
</details>

 

HTML5 [hidden] 属性（HTML5 [hidden] attribute）

HTML5ではデフォルトで display: none にスタイル設定された [hidden] という新しいグローバル属性が追加された。その display が誤って再定義されるのを防ぐため、PureCSSからアイデアを借りて [hidden] { display: none !important; } を使ってこれを改善している。[hidden] はIE10では元々サポートされていないが、CSSの明示的な宣言で、この問題を回避している。

<input type="text" hidden>

要素の可視性を単に切り替えるのに、その display が変更されない要素では文書の流れに影響を与えてしまうので、代わりに可視性ユーティリティクラスを使用する。

ページ移動