View on GitHub

Reboot (リブート)

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

On this page

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 が適用され, アクセスしやすいアプローチを保証しながら, メディアクエリによる簡単なレスポンシブの拡大縮小が可能。このブラウザのデフォルトは $font-size-root 変数を変更することで上書きすることができます。
<body> には font-family, font-weight, line-height, color が設定されていて、フォントの不一致を防止するために, いくつかのフォーム要素によって継承される。
<body> は, デフォルトの背景色として background-color に #fff が設定されています。

Native font stack

Bootstrapは “native font stack” や"system font stack" を利用して、あらゆるデバイスやOSで最適なテキスト描画を実現しています。これらのシステムフォントは、最新のデバイスを念頭に置いて特別に設計されており、画面上でのレンダリングの改善、可変フォントのサポートなどが行われています。詳細は native font stacks in this Smashing Magazine article.

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // 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 を変更してコンパイルします。

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 はリセットされます。同様に <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

Here’s an ordered list
With a few list items
It has the same overall look
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.

Inline code

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

For example, <section> should be wrapped as inline.

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

Code blocks

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

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<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>

Variables

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

y = mx + b

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

User input

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

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

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>

Sample output

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

This text is meant to be treated as sample output from a computer program.

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

Tables

テーブルは, <caption> , 罫線 , text-align の確保のためにスタイルが調整されます。 borders, 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 は適用されていません。個々の入力や入力グループのラッパーとして簡単に使用できます。
<legend> は fieldsets のように一種の見出しとして表示されるように再構成されています。
<label>は display: inline-block で設定され、margin が適用されています。
<input>, <select>, <textarea>,<button>　は margin がリセットとされて、line-height: inherit が適用されます。
<textarea> 水平方向のサイズ変更がページレイアウトを崩すことが多いため、垂直方向のみにサイズ変更できるように修正されています。
ボタン要素 <button> と <input> は :not(:disabled) のときに cursor: pointer を持つます。

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

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

Date & color input support

Keep in mind date inputs are not fully supported by all browsers, namely Safari.

Pointers on buttons

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

Non-button element button

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

Misc elements

Address

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

Twitter, Inc.
1355 Market St, Suite 900
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

Inline elements

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

Nulla attr vitae elit libero, a pharetra augue.

Summary

デフォルトの cursor は text なので、これを pointer にリセットして、要素がクリックすることで対話できることを伝えます。

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] が追加されています。 PureCSS　にアイデア使用して、デフォルトを改善し、displayが誤ってオーバーライドされるのを防ぐのに役立ちます。

<input type="text" hidden>

jQuery incompatibility

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

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