GitHub で確認

リブート

Rebootは、単一ファイル内の要素固有のCSS変更のコレクションであり、エレガントで一貫性があり、シンプルで構築しやすい基盤を提供するためにBootstrapを起動します。

アプローチ

RebootはNormalizeを基盤として構築されており、要素セレクタのみを使用して、多くのHTML要素にやや主観的なスタイルを提供します。追加のスタイルはクラスのみを使用して行われます。たとえば、よりシンプルな基盤のためにいくつかの<table>スタイルをリブートし、後で.table、.table-borderedなどを提供します。

Rebootで何をオーバーライドするかを選択する際のガイドラインと理由を次に示します。

  • スケーラブルなコンポーネント間隔のために、いくつかのブラウザのデフォルト値をemではなくremを使用するように更新します。
  • margin-topを避けます。垂直マージンは崩壊して予期しない結果になる可能性があります。しかし、より重要なのは、単一方向のmarginの方が、より単純なメンタルモデルであることです。
  • デバイスサイズ間で簡単にスケーリングするために、ブロック要素はmarginにremを使用する必要があります。
  • 可能な限りinheritを使用して、フォント関連のプロパティの宣言を最小限に抑えます。

ページのデフォルト

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

  • box-sizingは、*::beforeと*::afterを含むすべての要素でグローバルにborder-boxに設定されています。これにより、パディングやボーダーによって要素の宣言された幅が超過することはありません。
  • <html>には基本的なfont-sizeは宣言されていませんが、16pxが想定されています（ブラウザのデフォルト）。ユーザー設定を尊重し、よりアクセシブルなアプローチを確保しながら、メディアクエリによる簡単なレスポンシブなタイプスケーリングのために、<body>にはfont-size: 1remが適用されます。
  • <body>は、グローバルなfont-family、line-height、text-alignも設定します。これは、フォントの不一致を防ぐために、後でいくつかのフォーム要素によって継承されます。
  • 安全のために、<body>には宣言されたbackground-colorがあり、デフォルトは#fffです。

ネイティブフォントスタック

デフォルトのウェブフォント（Helvetica Neue、Helvetica、Arial）はBootstrap 4で廃止され、「ネイティブフォントスタック」に置き換えられました。これにより、すべてのデバイスとOSで最適なテキストレンダリングが可能になります。このSmashing Magazineの記事でネイティブフォントスタックについて詳しく読む。

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

フォントスタックには絵文字フォントが含まれているため、一般的な記号/装飾文字のUnicode文字の多くは、多色のピクトグラムとしてレンダリングされます。その外観は、ブラウザ/プラットフォームのネイティブ絵文字フォントで使用されているスタイルによって異なり、CSSのcolorスタイルの影響を受けません。

このfont-familyは<body>に適用され、Bootstrap全体でグローバルに自動的に継承されます。グローバルなfont-familyを切り替えるには、$font-family-baseを更新してBootstrapを再コンパイルします。

見出しと段落

すべての見出し要素（例：<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見出し

リスト

すべてのリスト（<ul>、<ol>、<dl>）では、margin-topが削除され、margin-bottom: 1remが設定されます。ネストされたリストにはmargin-bottomがありません。

  • すべてのリストの上部マージンが削除されました
  • そして、下部マージンが正規化されました
  • ネストされたリストには下部マージンがありません
    • このようにして、より均一な外観になります
    • 特に、さらにリストアイテムが続く場合
  • 左側のpaddingもリセットされました
  1. 順序付きリストを次に示します
  2. いくつかのリストアイテムがあります
  3. 前の順序なしリストと同じ全体的な外観です
  4. 前の順序なしリストと同じ全体的な外観です

よりシンプルなスタイル、明確な階層、より良い間隔のために、記述リストのマージンが更新されました。<dd>のmargin-leftは0にリセットされ、margin-bottom: .5remが追加されます。<dt>は**太字**になります。

記述リスト
記述リストは、用語を定義するのに最適です。
用語
用語の定義。
同じ用語の2番目の定義。
別の用語
この他の用語の定義。

整形済みテキスト

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

.example-element {
  margin-bottom: 1rem;
}

テーブル

テーブルは、<caption>のスタイル設定、ボーダーの折りたたみ、一貫したtext-alignの確保のためにわずかに調整されています。ボーダー、パディング、その他の変更は.tableクラスで提供されます。

これはテーブルの例であり、これは内容を説明するキャプションです。
表見出し 表見出し 表見出し 表見出し
表セル 表セル 表セル 表セル
表セル 表セル 表セル 表セル
表セル 表セル 表セル 表セル

フォーム

さまざまなフォーム要素は、よりシンプルな基本スタイルのためにリブートされています。最も注目すべき変更をいくつか示します。

  • <fieldset>には、ボーダー、パディング、マージンがないため、個々の入力または入力グループのラッパーとして簡単に使用できます。
  • <legend>は、フィールドセットと同様に、一種の見出しとして表示されるように再スタイル化されています。
  • <label>はdisplay: inline-blockに設定されているため、marginを適用できます。
  • <input>、<select>、<textarea>、<button>は主にNormalizeによって処理されますが、Rebootはそれらのmarginを削除し、line-height: inheritも設定します。
  • <textarea>は、水平方向のサイズ変更はページレイアウトをしばしば「壊す」ため、垂直方向のみにサイズ変更可能になるように変更されています。
  • <button>と<input>のボタン要素は、:not(:disabled)の場合にcursor: pointerになります。

これらの変更などは、以下に示されています。

凡例例

100

ボタンに関する注意点

Rebootには、デフォルトのカーソルをpointerに変更するためのrole="button"の機能強化が含まれています。要素にこの属性を追加して、要素がインタラクティブであることを示すのに役立ちます。このロールは、独自のcursor変更を取得する<button>要素には必要ありません。

ボタン以外の要素ボタン 
<span role="button" tabindex="0">Non-button element button</span>

その他要素

住所

<address>要素は、ブラウザのデフォルトのfont-styleをitalicからnormalにリセットするように更新されています。line-heightも継承されるようになり、margin-bottom: 1remが追加されました。<address>は、最も近い祖先（または作品全体）の連絡先情報を提示するためです。<br>で行を終了することで、書式を維持します。

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P (123) 456-7890
氏名
first.last@example.com

ブロッククォート

ブロッククォートのデフォルトのmarginは1em 40pxであるため、他の要素とより一貫性を持たせるために0 0 1remにリセットします。

ブロッククォート要素に含まれる有名な引用。

Source Titleの有名な人物

インライン要素

<abbr>要素には、段落テキストの中で目立たせるための基本的なスタイルが適用されます。

Nulla attr vitae elit libero, a pharetra augue.

サマリー

サマリーのデフォルトのcursorはtextであるため、クリックすることで要素を操作できることを伝えるためにpointerにリセットします。

いくつかの詳細

詳細に関する詳細情報。

さらに詳細

詳細に関するさらに詳細な情報です。

HTML5 の[hidden]属性

HTML5は[hidden]という新しいグローバル属性を追加しました。これはデフォルトでdisplay: noneとしてスタイル設定されています。PureCSSからアイデアを借りて、[hidden] { display: none !important; }にすることで、displayが誤って上書きされるのを防ぎます。[hidden]はIE10ではネイティブにサポートされていませんが、CSSでの明示的な宣言により、その問題を回避できます。

<input type="text" hidden>
jQueryとの非互換性

[hidden]は、jQueryの$(...).hide()メソッドと$(...).show()メソッドと互換性がありません。そのため、現在、要素のdisplayを管理するための他の手法よりも、[hidden]を特に推奨していません。

要素の表示/非表示を切り替えるだけで、つまりdisplayが変更されず、要素がドキュメントのフローに影響を与えることができる場合は、代わりに.invisibleクラスを使用してください。