Skip to main content Skip to docs navigation
GitHubで見る

Reboot

Rebootは、要素ごとに変更されたCSSを1つのファイルにまとめたもので、Bootstrapを起動し、エレガントで一貫性のある、シンプルなベースラインを提供するものです。

項目

アプローチ

RebootはNormalizeの上に構築され、要素セレクタのみを使用して、多くのHTML要素にやや意見の分かれるスタイルを提供します。追加のスタイリングは、クラスを使ってのみ行われます。例えば、よりシンプルなベースラインのためにいくつかの<table>スタイルをリブートし、後に.table、.table-borderedなどを提供します。

Rebootで何をオーバーライドするかを選択するためのガイドラインと理由は以下の通りです。:

  • いくつかのブラウザのデフォルト値を更新し、スケーラブルなコンポーネントのスペーシングにemの代わりにremを使用するようにした。
  • margin-topは避けてください。垂直方向のマージンが崩れ、予期せぬ結果になることがあります。しかし、より重要なのは、marginの方向が1つであることが、より単純なメンタルモデルであるということです。
  • デバイスのサイズに関係なく簡単に拡大縮小できるように、ブロック要素ではmarginにremを使用するようにしましょう。
  • 可能であれば、inheritを使用してfont関連プロパティの宣言を最小限に抑えます。

CSS変数

Added in v5.2.0

v5.1.1では、すべてのCSSバンドル（bootstrap.css, bootstrap-reboot.css, bootstrap-grid.css など）に対して必要な@importを_root.scssに標準化しました。これは、そのバンドルでいくつ使用されているかに関係なく、すべてのバンドルに:rootレベルのCSS変数を追加します。最終的にBootstrap 5は、常にSassを再コンパイルする必要なく、よりリアルタイムのカスタマイズを提供するために、より多くのCSS変数を時間と共に追加し続けるでしょう。私たちのアプローチは、ソースのSass変数を受け取り、それをCSS変数に変換することです。そうすることで、CSS変数を使用しない場合でも、Sassのすべてのパワーを利用することができます。これはまだ進行中で、完全に実装するには時間がかかるでしょう。

例えば、一般的な<body>スタイル用の :rootCSS変数を考えてみましょう：

scss/_root.scss 
@if $font-size-root != null {
  --#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{inspect($font-family-base)};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
@if $body-text-align != null {
  --#{$prefix}body-text-align: #{$body-text-align};
}

--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};

--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};

--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};

--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};

実際には、その変数をRebootでこのように適用します：

scss/_reboot.scss 
body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

ページの初期設定

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

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

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

Bootstrapは、あらゆるデバイスやOSで最適なテキストを表示するために、「ネイティブフォントスタック」または「システムフォントスタック」を利用しています。これらのシステムフォントは、今日のデバイスを念頭に置いて特別に設計されており、画面上でのレンダリングの向上、可変フォントのサポートなどを備えています。ネイティブフォントスタックについては、Smashing Magazineの記事で詳しくご紹介しています。

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

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

このfont-familyは<body>に適用されると、自動的に全体に継承されます。基本のfont-familyを切り替えるには$font-family-baseを変更してコンパイルします。

見出し

すべての見出し要素-<h1>-<h6>は、margin-topが削除され、margin-bottom: .5remが設定され、line-heightが強調されます。見出しはデフォルトで colorを継承しますが、オプションのCSS変数 --bs-heading-colorによって上書きすることができます。

Heading Example
<h1></h1> h1. Bootstrap heading
<h2></h2> h2. Bootstrap heading
<h3></h3> h3. Bootstrap heading
<h4></h4> h4. Bootstrap heading
<h5></h5> h5. Bootstrap heading
<h6></h6> h6. Bootstrap heading

短絡

すべての<p>要素はmargin-topが削除され、margin-bottom： 1remを設定し、間隔を取りやすくしています。

This is an example paragraph.

html 
<p>This is an example paragraph.</p>

リンク

リンクにはデフォルトのcolorとアンダーラインが適用されます。リンクは:hoverで変化するが、誰かが:visitedしたかどうかで変化することはないです。また、リンクには特別な:focusスタイルも適用されないです。

This is an example link
html 
<a href="#">This is an example link</a>

v5.3.xでは、リンクのcolorはrgba()と新しい-rgbCSS変数を使って設定され、リンクの色の不透明度を簡単にカスタマイズすることができます。リンクカラーの不透明度は、CSS変数--bs-link-opacityで変更できます：

This is an example link
html 
<a href="#" style="--bs-link-opacity: .5">This is an example link</a>

プレースホルダーリンク（hrefを持たないリンク）は、より具体的なセレクタでターゲットにされ、colorとtext-decorationはデフォルト値にリセットされます。

This is a placeholder link
html 
<a>This is a placeholder link</a>

水平方向のルール

<hr>要素が簡略化されました。ブラウザのデフォルトと同様に、<hr>は border-topによってスタイルされ、デフォルトのopacity: .25を持ち、colorによってborder-colorを自動的に継承します（親からcolorが設定されている場合も含む）。テキスト、ボーダー、不透明度のユーティリティで変更することができます。

html 
<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

リスト

すべてのリスト（<ul>、<ol>、および<dl>）には、margin-topが削除され、margin-bottom: 1remが適用されます。ネストされたリストにはmargin-bottomがありません。<ul>要素と<ol>要素のpadding-leftもリセットしました。

  • All lists have their top margin removed
  • And their bottom margin normalized
  • Nested lists have no bottom margin
    • This way they have a more even appearance
    • Particularly when followed by more list items
  • The left padding has also been reset
  1. Here’s an ordered list
  2. With a few list items
  3. It has the same overall look
  4. As the previous unordered list

シンプルで、明確な階層構造、空白の改善のために説明リストのmarginが更新されました。 <dd>はmargin-leftを0にリセットし、margin-bottom: .5remを追加した。<dt>は太字になります。

Description lists
A description list is perfect for defining terms.
Term
Definition for the term.
A second definition for the same term.
Another term
Definition for this other term.

インラインコード

インラインのスニペットコードは<code>で囲みます。HTMLの角括弧は必ずエスケープしてください。

For example, <section> should be wrapped as inline.
html 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

コードブロック

複数行のコードには<pre>を使用します。もう一度言いますが、適切なレンダリングのために、コード内の角括弧を必ずエスケープしてください。<pre>要素は、margin-topを削除し、margin-bottomにrem単位を使用するようにリセットされます。

<p>Sample text here...</p>
<p>And another line of sample text here...</p>
html 
<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

変数

変数を指定するには<var>タグを使用します。

y = mx + b
html 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ユーザーの入力

キーボードで入力するのが一般的な入力を示すには、<kbd>を使用します。

To switch directories, type cd followed by the name of the directory.
To edit settings, press Ctrl + ,
html 
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>Ctrl</kbd> + <kbd>,</kbd></kbd>

サンプル出力

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

This text is meant to be treated as sample output from a computer program.
html 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

テーブル

テーブルは、<caption>のスタイル、ボーダーの折りたたみ、全体の一貫したtext-alignを確保するためにわずかに調整されています。ボーダー、パディングなどの追加変更は、.tableクラスで行われます。

This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
html 
<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

フォーム

  • <fieldset>にはボーダー、パディング、マージンがないので、個々の入力や入力グループのラッパーとして簡単に使用することができます。
  • <legend>もfieldsetと同様に、見出しのような形で表示されるように変更された。
  • <label>はdisplay: inline-blockに設定し、marginを適用できるようにしました。
  • <input>、<select>、<textarea>、<button>はほとんどNormalizeで対応しますが、Rebootではmarginを削除し、line-height: inheritを設定することもできます。
  • <textarea>は、水平方向のサイズ変更でページレイアウトが「崩れること」が多いため、垂直方向にのみサイズ変更できるように修正しました。
  • <button>と<input>ボタン要素は、:not(:disabled)時にcursor: pointerを持ちます。

これらの変更点などを以下に示します。

日付・色入力対応

日付入力は、Safariをはじめとするすべてのブラウザで完全にサポートされていないことにご注意ください。

Example legend

100

ボタンにポインターを付ける

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

Non-button element button
html 
<span role="button" tabindex="0">Non-button element button</span>

その他の要素

アドレス

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

ACME Corporation
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

引用文

引用文のデフォルトのmarginは1em 40pxなので、これを0 0 1remにリセットして、他の要素との整合性をとります。

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

インライン要素

<abbr>要素は、段落テキストの中で目立つように基本的なスタイリングを受けます。

The HTML abbreviation element.

概要

概要のデフォルトのcursorはtextなので、それをpointerにリセットして、要素をクリックすることでインタラクションができることを伝えています。

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5の[hidden]属性

HTML5では、[hidden]という新しいグローバル属性が追加され、デフォルトではdisplay: noneというスタイルになっています。PureCSSのアイデアを借りて、このデフォルトを改良し、[hidden] {display: none !important; }とすることで、誤ってdisplayが上書きされるのを防いでいます。

<input type="text" hidden>
[hidden]は、jQueryの$(...).hide()と$(...).show()メソッドと互換性がありません。したがって、要素のdisplayを管理するための他のテクニックに対して、[hidden]を特に推奨することは現在のところありません。

要素の可視性を切り替えるためdisplayは変更されず, 文書の流れに影響を与えます。代わりに.invisibleクラスを使ってください。