Reboot

要素固有のCSSの変更がまとめられたFileです。

Approach

Normalize.css に基づき, デフォルトのスタイルを利用しながら, 要素セレクタを用いてあらゆる要素のスタイルを正常化しています。
スタイルが必要なときはクラスに追加します。
例えば <table> 要素はシンプルな作りになっていて, スタイルを適用したいときは .table , .table-bordered などが用意されています。

Rebootを適用するガイドラインがあります。

  • スケーラブルなコンポーネントの間隔をのために, em の代わりに rem を使用してください。
  • margin-top は避けてください。垂直方向のマージンが壊れ, 予期しない結果が生じる可能性があります。 重要なのは単一の方向性がmarginより単純なメンタルモデルであることです。
  • デバイスサイズ全体のスケーリングを容易にするために, ブロック要素は rem に対して margin を使用する必要があります。
  • できるだけスタイルを継承して, fontや関連するプロパティの宣言を最小限に抑えてください。

Page defaults

<html> , <body> 要素は, ページ全体のベースがより良くなるように適用されます。

  • box-sizing は *::before , *::after を含むすべての要素に border-box を設定するので, 要素で宣言した幅がpaddingやborderの幅を超えません。
    • font-size は <html> で宣言されないが, 16px（ブラウザのデフォルト）と想定される。 <body> に font-size: 1rem が適用され, アクセスしやすいアプローチを保証しながら, メディアクエリによる簡単なレスポンシブの拡大縮小が可能。
  • <body> には font-family , line-height, text-align が設定されており, フォントの不一致を防止するために, いくつかのフォーム要素によって継承される。
  • <body> は, デフォルトの背景色として background-color に #fff が設定されています。

Native font stack

デフォルトのWebフォント（Helvetica Neue, Helvetica, Arial）はBootstrap4で廃止されました。
デバイスとOSで最適なテキストのレンダリングを行うために”ネイティブ・フォントスタック”になりました。
native font stacks in this Smashing Magazine article.

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

Headings and paragraphs

見出し（例： <h1> ）と段落 <p> では, margin-top がリセットされ,
見出しでは margin-bottom: .5rem , 段落では margin-bottom: 1rem が適用されます。

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

Lists

<ul> , <ol> , <dl> は margin-top がリセットされ,
margin-bottom: 1rem が適用され, リストが入れ子になっている場合は, margin-bottom はリセットされます。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

シンプルなスタイル , わかりやすい階層 , 空白の改善のためにデスクリプションリストでは margin が更新されます。
<dd> では margin-left が 0 にリセットされ, margin-bottom: .5rem が適用されます。 <dt> は bolded が適用されます。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Preformatted text

<pre> 要素は margin-top がリセットされ, margin-bottom は rem 単位になります。

.example-element {
  margin-bottom: 1rem;
}

Tables

テーブルは, <caption> , 罫線 , text-align の確保のためにスタイルが調整されます。
border, paddingを変更したい場合は the .table class.

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

Forms

フォームもシンプルなスタイルに変更されています。

  • <fieldset> の borders, padding, margin は適用されていません。
  • <label> は display: inline-block で設定され, marginが適用されています。
  • <input> , <select> , <textarea> , <button> は margin がリセットされて line-height: inherit が適用されます。
  • <textarea> は 垂直方向のサイズを変更できるように更新されています。

デモは下記を参照できます。

Example legend

100

Misc elements

Address

<address> は連絡先の情報を表示するために使われ, 行の終了には <br> を使用します。
font-style を italic から normal に変更して, line-height を継承し, margin-bottom: 1rem を適用します。

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

Blockquote

<blockquote> の margin を 1em 40px から, 0 0 1rem に変更しています。
.blockquote が追加されています。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Inline elements

<abbr> は文章の中で目立たせることができます。

Nulla attr vitae elit libero, a pharetra augue.

Summary

<summary> を利用して, カーソル後にクリックをすることで, 概要を表示することができます。

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 [hidden] attribute

HTML5では display: none に a new global attribute named [hidden] が追加されています。
IE10ではサポートされていないが, PureCSSを参考に [hidden] { display: none !important; } を使ってこれを改善している。

<input type="text" hidden>
jQuery incompatibility

[hidden]はjQueryの $(...).hide() と $(...).show() メソッドと互換性がないため,
現在のところ, [hidden] はjQueryで使用することは推奨していません。

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

v4.3