メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
GitHubで表示

再起動

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

このページの内容

アプローチ

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

Rebootで何をオーバーライドするかを選択するためのガイドラインと理由をご紹介します

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

CSS変数

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を介してオーバーライドすることもできます。

見出し 例
<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>要素は、margin-topが削除され、簡単なスペーシングのためにmargin-bottom: 1remが設定されています。

これは段落の例です。

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

リンクには、デフォルトのcolorと下線が適用されています。リンクは:hoverで変更されますが、:visitedかどうかによっては変更されません。また、特別な:focusスタイルも受け取りません。

これはリンクの例です
html 
<a href="#">This is an example link</a>

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

これはリンクの例です
html 
<a href="#" style="--bs-link-opacity: .5">This is an example link</a>

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

これはプレースホルダーリンクです
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">

リスト

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

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

よりシンプルなスタイリング、明確な階層、より適切なスペーシングのために、説明リストのマージンが更新されました。 <dd>は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>を使用します。ここでも、適切なレンダリングのためにコード内の角括弧をエスケープしてください。<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>を使用します。

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

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

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

100

ボタンのポインタ

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

ボタンではない要素のボタン
html 
<span role="button" tabindex="0">Non-button element button</span>

その他の要素

住所

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

ACME株式会社
架空通り1123番地
サンフランシスコ、カリフォルニア州94103
P (123) 456-7890
氏名
first.last@example.com

ブロック引用

ブロック引用のデフォルトのmarginは1em 40pxなので、他の要素との整合性を高めるために、それを0 0 1remにリセットします。

ブロック引用要素に含まれる、よく知られた引用。

ソースタイトルの有名人

インライン要素

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

HTML略語要素。

概要

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

詳細

詳細についての詳細

さらに詳細

詳細についてのさらに詳細な情報です。

HTML5 [hidden] 属性

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

<input type="text" hidden>
[hidden]はjQueryの$(...).hide()および$(...).show()メソッドと互換性がないため、要素のdisplayを管理するための他の手法よりも[hidden]を特に推奨しているわけではありません。

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