メインコンテンツにスキップ ドキュメント ナビゲーションにスキップ
Check
in English

リブート

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

このページでは

アプローチ

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

Reboot で何をオーバーライドするかを選択するガイドラインと理由は次のとおりです。

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

CSS 変数

v5.2.0 で追加

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

たとえば、一般的なスタイルの次の:rootCSS 変数を検討してください。<body>

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$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};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

実際には、これらの変数は Reboot で次のように適用されます。

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*::afterborder-box
    • でベースfont-sizeは宣言されていません<html>が、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 全体で自動的にグローバルに継承されます。グローバルを切り替えるには、Bootstrapfont-familyを更新して再コンパイルします。$font-family-base

見出しと段落

すべての見出し要素 (例: <h1>and )<p>がリセットされ、margin-top削除されます。見出しがmargin-bottom: .5rem追加され、段落margin-bottom: 1remが簡単に配置できるようになりました。

見出し 例
<h1></h1> h1. ブートストラップの見出し
<h2></h2> h2. ブートストラップの見出し
<h3></h3> h3. ブートストラップの見出し
<h4></h4> h4. ブートストラップの見出し
<h5></h5> h5. ブートストラップの見出し
<h6></h6> h6. ブートストラップの見出し

水平ルール

<hr>要素が単純化されました。ブラウザ<hr>のデフォルトと同様に、 は via でスタイル設定さborder-topれ、 defaultがあり、親によって が設定されている場合を含めて、それらのviaopacity: .25を自動的に継承します。これらは、テキスト、ボーダー、および不透明度ユーティリティで変更できます。border-colorcolorcolor

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. padding-lefton<ul>と<ol>elementsもリセットしました。

  • すべてのリストの上マージンが削除されています
  • そしてそれらの下マージンは正規化されました
  • ネストされたリストには下マージンがありません
    • このようにして、より均一な外観になります
    • 特に、その後にさらにリスト項目が続く場合
  • 左パディングもリセットされました
  1. これが順序付けられたリストです
  2. いくつかのリスト項目で
  3. 全体的に同じような見た目です
  4. 前の順序なしリストとして

スタイルをシンプルにし、階層を明確にし、間隔を空けるために、説明リストmarginの が更新されました。<dd>s にリセットmargin-leftし0て追加しmargin-bottom: .5remます。<dt>は太字です。

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

インライン コード

コードのインライン スニペットを でラップし<code>ます。HTML の山かっこは必ずエスケープしてください。

たとえば、 <section>インラインとしてラップする必要があります。
html 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

コードブロック

<pre>複数行のコードには s を使用します。繰り返しになりますが、適切にレンダリングするために、コード内の山かっこを必ずエスケープしてください。要素がリセットされ、その<pre>要素が削除され、その要素に単位がmargin-top使用されます。remmargin-bottom

<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 = m x + b
html 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ユーザー入力

を使用して、<kbd>通常はキーボードから入力される入力を示します。

ディレクトリを切り替えるには、 cd続けてディレクトリの名前を入力します。
設定を編集するには、 を押します。 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>タグを使用します。

このテキストは、コンピューター プログラムからのサンプル出力として扱われることを意図しています。
html 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

テーブル

テーブルはスタイルに合わせてわずかに調整され<caption>、境界線が折りたたまれ、一貫性が保たtext-alignれます。ボーダー、パディングなどの追加の変更は、.tableクラスに付属しています。

これは表の例で、内容を説明するためのキャプションです。
表の見出し 表の見出し 表の見出し 表の見出し
表のセル 表のセル 表のセル 表のセル
表のセル 表のセル 表のセル 表のセル
表のセル 表のセル 表のセル 表のセル
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>s にはボーダー、パディング、またはマージンがないため、個々の入力または入力グループのラッパーとして簡単に使用できます。
  • <legend>は、フィールドセットと同様に、ある種の見出しとして表示されるように再スタイルされました。
  • <label>s が適用display: inline-blockできるように設定されています。margin
  • <input>s、<select>s、<textarea>s、および<button>s はほとんど Normalize によって処理されますが、Reboot によってそれらのmarginおよび setも削除されline-height: inheritます。
  • <textarea>水平方向のサイズ変更はページ レイアウトを「壊す」ことが多いため、垂直方向のみにサイズ変更できるように変更されています。
  • <button>と<input>ボタン要素にはcursor: pointerwhenがあります:not(:disabled)。

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

凡例の例

100

日付と色の入力サポート

日付の入力は、すべてのブラウザー、つまり Safari で完全にサポートされているわけではないことに注意してください。

ボタン上のポインター

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

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

その他の要素

住所

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

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
フルネーム
[email protected]

引用符

marginblockquotesのデフォルトは であるため、他の要素との一貫性を高める1em 40pxために にリセットします。0 0 1rem

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

ソースタイトルで有名な人

インライン要素

この<abbr>要素は、段落テキストの中で目立つようにするための基本的なスタイルを受け取ります。

HTML略語要素 。

概要

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

いくつかの詳細

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

さらに詳しく

詳細についてはこちら。

HTML5[hidden]属性

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

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

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

要素の可視性を切り替えるだけで、要素displayが変更されず、要素がドキュメントの流れに影響を与える可能性がある場合は、代わりにクラスを使用します。.invisible