リブート Reboot

単一ファイル内の要素固有のCSS変更のコレクションであるRebootは、Bootstrapを開始して、構築するためのエレガントで一貫性があり、シンプルなベースラインを提供します。

On this page

アプローチ

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

Rebootでオーバーライドするものを選択するためのガイドラインと理由は次のとおりです:

スケーラブルなコンポーネント間隔のために、emではなくremを使用するようにブラウザのデフォルト値の一部を更新します。
margin-topを避けます。垂直マージンは崩壊し、予期しない結果をもたらす可能性があります。さらに重要なことに、単一方向のmarginはよりシンプルなメンタルモデルです。
デバイスサイズ全体でのスケーリングを容易にするために、ブロック要素は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>スタイル用のこれらの:root CSS変数を考えてみましょう:

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が想定されています(ブラウザのデフォルト)。font-size: 1remは、ユーザー設定を尊重し、よりアクセシブルなアプローチを確保しながら、メディアクエリを介した簡単なレスポンシブタイプスケーリングのために<body>に適用されます。このブラウザのデフォルトは、$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;

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

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

見出し

すべての見出し要素—<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()と新しい-rgb CSS変数を使用して設定され、リンクカラーの不透明度を簡単にカスタマイズできます。--bs-link-opacity CSS変数でリンクカラーの不透明度を変更します:

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が親で設定されている場合を含めて、colorを介してborder-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">

インラインコード

<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>は、フィールドセットと同様に、見出しのようなものとして表示されるようにリスタイルされています。
<label>はdisplay: inline-blockに設定され、marginを適用できるようになっています。
<input>、<select>、<textarea>、<button>は主にNormalizeによって対処されていますが、Rebootはmarginを削除し、line-height: inheritも設定します。
<textarea>は、水平リサイズがページレイアウトを「壊す」ことが多いため、垂直方向にのみリサイズ可能に変更されています。
<button>と<input>ボタン要素は、:not(:disabled)の場合にcursor: pointerを持ちます。

これらの変更などは、以下で実証されています。

一部の日付入力タイプは、SafariとFirefoxの最新バージョンで完全にはサポートされていません。

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

ボタンのポインター

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

Non-button element button

html

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

その他の要素

Address

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

ACME Corporation
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

Blockquote

ブロッククォートのデフォルト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.

Summary

summaryのデフォルト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クラスを使用してください。

リブート Reboot

アプローチ

CSS変数

ページのデフォルト

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

見出し

段落

リンク

水平線

リスト

インラインコード

コードブロック

変数

ユーザー入力

サンプル出力

テーブル

フォーム

ボタンのポインター

その他の要素

Address

Blockquote

インライン要素

Summary

HTML5 [hidden]属性

HTML5 `[hidden]`属性