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

Reboot

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

目次

アプローチ（Approach）

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

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

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

 

CSS変数の追加（CSS variables）v5.1.1新設

v5.1.1では、必要な @import をすべてのCSSバンドルで標準化した（bootstrap.css だけでなく、bootstrap-reboot.css, bootstrap-grid.css にも _root.scss を組み込むことになった）。これにより、バンドルで使用されているCSS変数の数に関係なく、すべてのバンドルに :root レベルのCSS変数が追加される。最終的にBootstrap5では、CSS変数が時間の経過とともに追加される。

 

ページのデフォルト（Page defaults）v5.0.0-alpha1設定変更

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

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

 

基準のフォントスタック（Native font stack）v5.0.0-alpha3一部変更

Bootstrapは、「ネイティブ・フォントスタック」や「システム・フォントスタック」を利用して、すべてのデバイスとOSで最適なテキストレンダリングを実現。これらのシステムフォントは、特に今日のデバイスを念頭に置いて設計されており、画面でのレンダリングの改善、可変フォントのサポートなどを備えている。詳細はこのSmashing Magazineの記事にあるネイティブ・フォントスタックの詳細に記載。

デフォルトの設定
scss/_variables.scss 内 stylelint-disable value-keyword-case の設定$font-family-sans-serif:
  // クロスプラットフォームの汎用フォントファミリー（デフォルトのユーザーインターフェイスフォント）
  system-ui,
  // MacOS と iOS (San Francisco)用の Safari
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // 基本のwebフォールバック
  "Helvetica Neue", Arial,
  // Linax
  "Noto sans",
  "Liberation Sans",
  // Sans serifのフォールバック
  sans-serif,
  // 絵文字用フォント
  "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を再コンパイルする。

【変更履歴】
  • 【v5.0.0-alpha1】
    • system-uiを追加し、BlinkMacSystemFont（Chrome 56未満のMacOS (San Francisco)用のフォント）を削除
  • 【v5.0.0-alpha3】
    • Liberation Sans（Ubuntu用sans-serif）が追加

 

すべてのリンクには、下線が装飾される。下線をつけたくない場合は <a> にテキストの装飾ユーティリティクラス（.text-decoration-none）を追加するか、scss/_variables.scss ファイルにある $link-decoration, $link-hover-decoration 変数を変更し、Bootstrapを再コンパイルする。

見本
このテキストにはリンクがあります。
設定例
このテキストには<a href="#">リンク</a>があります。
【変更履歴】
  • 【v5.0.0-alpha1】
    • デフォルトでリンクに下線が装飾される（text-decoration: none ⇒ text-decoration: underline）ことに（審美的な理由でリンクから下線を外していたが、アクセシビリティの観点から通常のテキストと区別がつきにくいため下線を施した）
    • デフォルトの動作をv4の場合（ホバー時のみに下線がつく）と同じにしたい場合は、scss/_variables.scss ファイルにある
      • $link-decoration を underline ⇒ none
      • $link-hover-decoration（ホバー時の動作） を null ⇒ underline
      に変更して再コンパイルする

 

CSS変数（CSS variables）v5.1.0新設

Bootstrap5が成熟し続けるにつれて、常にSassを再コンパイルする必要なしに、よりリアルタイムのカスタマイズを提供する手段として、CSS変数を使用して構築されるスタイルがますます増加。Bootstrapのアプローチは、ソースのSass変数を取得しCSS変数に変換する。そうすれば、CSS変数を使用しなくても、Sassのすべての機能を利用できる。これはまだ進行中であり、完全に実装するには時間がかかる。

例えば、一般的な <body> スタイルの次の :root CSS変数について考察：

デフォルトの設定
scss/_root.scss 内 root-body-variables の設定@if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};

実際には、これらの変数は次のようにRebootで適用される：

デフォルトの設定
scss/_reboot.scss 内 reboot-body-rules の設定body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

これにより、好きなようにリアルタイムでカスタマイズできる：

設定例
<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

 

見出しと段落（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 見出し
<p></p>

p. 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>
<p>p. Bootstrap 段落</p>

 

リスト（Lists）

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

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

箇条書きリスト・順序付きリスト v5.0.0-alpha1スタイル変更

見本
  • すべてのリストの上部マージンが削除
  • そしてそれらの下マージンは正規化
  • 入れ子になったリストには下マージンがない
    • このように、それらはより均一な外観を持つ
    • 特にリスト項目が続く場合
  • 左側のパディングもリセット
  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>
【変更履歴】
  • 【v5.0.0-alpha1】
    • padding-left を 40px（ブラウザのデフォルト）から 2rem に変更

定義リスト

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

シンプルなスタイリング、階層のクリア、空白の改善のため、定義リスト（<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>

 

コード表示（Inline code）v5.0.0-alpha1コードから移動

埋め込みのコードスニペットを <code> で囲む。HTMLタグの< >はエスケープすること。

見本

プログラムコードを埋め込むには <code> を使います。

コードにリンクをつけると <code> のようになります。

設定例
<p>プログラムコードを埋め込むには <code>&lt;code&gt;</code> を使います。</p>
<p>コードにリンクをつけると <a href="#"><code>&lt;code&gt;</code></a> のようになります。</p>
【設定】
  • プログラムコードを埋め込むためには、<code> タグを使用
  • <code> タグ内で <, >, & を使うときは、それぞれ &lt;, &gt;, &amp; にエスケープ処理をする
【注意】
  • <a>（リンク）内にあるときには、スタイルはフォントの大きさと字体以外はリセットされる。

 

コードブロック（Code blocks）v5.0.0-alpha1コードから移動、一部廃止

複数行のコードには <pre> を使用。再度、正しくレンダリングするために、コード内の< >をエスケープすること。<pre> 要素では、margin-top が削除され、margin-bottom は rem 単位で使用するようにリセットされる。

見本
<p>ここにサンプルテキスト...</p>
<p>ここにサンプルテキストの別の行...</p>
設定例
<pre><code>&lt;p&gt;ここにサンプルテキスト...&lt;/p&gt;
&lt;p&gt;ここにサンプルテキストの別の行...&lt;/p&gt;</code></pre>
【設定】
  • 複数行のコードを表示するためには、<pre><code> タグを使用
  • <pre><code> 内で <, >, & を使うときは、それぞれ &lt;, &gt;, &amp; と記述してエスケープ処理をする
【変更履歴】
  • 【v5.0.0-alpha1】
    • .pre-scrollable（y軸スクロールバー表示）を廃止。

 

変数表示（Variables）v5.0.0-alpha1コードから移動

変数を示すには、<var> タグを使用。

見本
y = mx + b
設定例
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
【設定】
  • <var> タグを使用（基本的に斜体で表示）
【注意】
  • ブラウザによっては123やabcなど英数字のみ適用

 

ユーザー入力（User input）v5.0.0-alpha1コードから移動

<kbd> を使用して、通常キーボードから入力されるインプットを示す。

見本

ユーザーが入力した内容を表示するにはユーザー入力のようにします。
タグを入れ子にするとユーザー入力のようになります。

設定例
ユーザーが入力した内容を表示するには<kbd>ユーザー入力</kbd>のようにします。
タグを入れ子にすると<kbd><kbd>ユーザー入力</kbd></kbd>のようになります。
【設定】
  • キーボードから入力された入力を示すためには、<kbd> タグを使用
  • <kbd> タグを入れ子にすると太字で表記

 

サンプル出力（Sample output）v5.0.0-alpha1コードから移動

プログラムからのサンプル出力を表示するには、<samp> タグを使用。

見本
This text is meant to be treated as sample output from a computer program.

※デフォルトの段落文（参考）

This text is meant to be treated as sample output from a computer program.

設定例
<samp>This text is meant to be treated as sample output from a computer program.</samp>
【設定】
  • <samp> タグを使用（基本的に等幅フォントで表示）
【注意】
  • ブラウザによっては123やabcなど英数字のみ適用

 

テーブル（Tables）

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

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

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

 

フォーム（Forms）v5.0.0-alpha1一部スタイル変更

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

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

  • 個別のインプットやインプットグループのラッパーとして簡単に使用できるように、<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 になる。

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

見本
legendの見本

100

設定例
<form>
  <fieldset>
    <legend>legendの見本</legend>
    <p>
      <label for="input">text inputの見本</label>
      <input type="text" id="input" placeholder="Example text input">
    </p>
    <p>
      <label for="email">emailの見本</label>
      <input type="email" id="email" placeholder="test@example.com">
    </p>
    <p>
      <label for="tel">telephoneの見本</label>
      <input type="tel" id="tel">
    </p>
    <p>
      <label for="url">urlの見本</label>
      <input type="url" id="url">
    </p>
    <p>
      <label for="number">numberの見本</label>
      <input type="number" id="number">
    </p>
    <p>
      <label for="search">searchの見本</label>
      <input type="search" id="search">
    </p>
    <p>
      <label for="range">rangeの見本</label>
      <input type="range" id="range" min="0" max="10">
    </p>
    <p>
      <label for="file">file inputの見本</label>
      <input type="file" id="file">
    </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="password">passwordの見本</label>
      <input type="password" id="password">
    </p>
    <p>
      <label for="datetime-local">datetime-localの見本</label>
      <input type="datetime-local" id="datetime-local">
    </p>
    <p>
      <label for="week">weekの見本</label>
      <input type="week" id="week">
    </p>
    <p>
      <label for="month">monthの見本</label>
      <input type="month" id="month">
    </p>
    <p>
      <label for="color">colorの見本</label>
      <input type="color" id="color">
    </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>
【変更履歴】
  • 【v5.0.0-alpha1】
    • RFSがデフォルトで有効となり、ビューポートが1200px未満で <legend> のフォントサイズがビューポートに応じて拡大縮小

ボタン上のポインタ（Pointers on buttons）

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）v5.0.0-alpha1設定変更

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

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

見本

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

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

Bootstrap5.xの設定例 緑背景が変更箇所
<blockquote>
  <p>blockquote要素に含まれるよく知られた引用。</p>
</blockquote>
<p>文章の<cite title="引用元の名前">引用元</cite>が明示できます。</p>
※Bootstrap4.xの設定例 赤背景が変更箇所
<blockquote>
  <p>blockquote要素に含まれるよく知られた引用。</p>
  <footer>文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>

【変更履歴】

インライン要素（Inline elements）

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

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

見本

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

設定例
<p><abbr title="HyperText Markup Language">HTML</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; } を使ってこれを改善している。

<input type="text" hidden>

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