皆さんが新しくWebベースのプロジェクトを始める際に、様々なパッケージをインストールするかと思いますが、どんなプロジェクトを始めるにせよ、大抵はその中になんらかの Reset.css が含まれていることでしょう。

Reset.css とは、Google Chrome やIEなどの各ブラウザが独自にもっているデフォルトCSSをブラウザごとに差異がないように平準化し、フロントエンド開発者がデザインをしやすいようにするために読み込まれる CSS です。

例えばhtmlファイルに <h1>Hello CSS</h1> と書いた時に、なにもCSSを書かなくても太文字で大きく表示されるのはデフォルトCSSが適用されているためです。

Reboot.css はCSSフレームワークとしてgithubで最もスターを集めている Bootstrap が、現在開発中の v4 から採用している新しい Reset.css です。Bootstrap v4 自体はまだベータ版ですが、 Reboot.css 自体はJSフレームワークなどに比べると比較的安全にプロジェクトへインストールして使用することが可能です。

それでは Reboot.css が従来の Reset.css とどのように違うのかを見ていきましょう。

Reboot.css をインストールする

まずは Reboot.css を実際に使用してみましょう。 Reboot.css をプロジェクトに配置する方法は3つあります。

  • ソースコードを直接配置する
  • CDNから読み込む
  • npm 経由でインストールして sass で利用する

ソースコードを直接配置する

現状、 Reboot.css は Bootstrap v4 の一部として開発されているので、Reboot.css は Bootstrap の GitHub リポジトリ 上で誰でも見ることができます。 dist/css/bootstrap-reboot.css から CSS をダウンロードして自分のプロジェクトに直接配置します。


Document

CDNから読み込む

公式には Reboot.css は CDN からは配信されていませんが、 RawGit を利用して CDN 化することが可能です。

先程の dist/css/bootstrap-reboot.css のURLを RawGit のフォームに入力すると、CDNとして読み込み可能なURLが発行されるので、それを「ソースコードを直接配置する」と同様にしてHTMLに読み込むだけです。

Codepenなどで試したいときなどに便利です。

npm 経由でインストールして sass で利用する

プロジェクトで実際に利用する場合はこの方法を取ることが多いでしょう。
先述の通り Reboot.css は Bootstrap の一部として開発されているため、Booststrap 本体をバージョン指定してインストールします。

npm install bootstrap@4.0.0-beta.2

Sass ファイル側では単に css ファイルをインポートするだけです。

@import 'bootstrap/dist/css/bootstrap-reboot';

詳細な利用設定については以下のサンプルリポジトリを参照して下さい。

GitHub – goodpatch/reboot-sass

Reboot.css の主な特徴

Reboot.css は、現在広く使われている Normalize.css を基に開発されており、 Normalize.css 同様、完全にデフォルトのスタイルを消し去ることはしません。

Normalize.css とは主に以下のような点で異なっています(A Look at Bootstrap 4’s New Reset: Reboot.css ― Scotch を参考にさせていただきました)。個人的に良い変更点には ✅ を、注意が必要なものに対しては ⚠ をつけています。

  • ✅ ほぼすべてのコンテンツに box-sizing: border-box が適用される
  • ⚠ デフォルトのフォントサイズとして rem を採用
  • ⚠ デフォルトフォントとしてシステムフォントを使用
  • ✅ &lt;h*&gt; タグなどのマージントップをすべて削除
  • ✅ タッチデバイスでのリンクやボタンの反応を向上

✅ ほぼすべてのコンテンツに box-sizing: border-box が適用される

これは Reboot.css の中で最も挑戦的で影響の大きい変更でしょう。

Reboot.cssでは box-sizing: border-box が hr 以外のすべての要素に適用されます。

*,
*::before,
*::after {
box-sizing: border-box; }

box-sizing: border-box は、要素の大きさの計算基準を変えるプロパティです。デフォルトCSSで適用されている box-sizing: content-box は、 padding と border-width をそのボックスの width に含めませんが、 box-sizing: border-box とすると width が padding と border-width を含んだ値となります。

例えば以下のように、幅5px(左右で10px)のボーダーのある300pxのボックスの幅は、デフォルトの box-sizing: content-box の場合、実際の幅は 300px + 10px = 310px となりますが、 box-sizing: border-box を指定している場合は 300px のままとなります。

Content-box vs border-box

私は2年ほど前から自分が関わるプロジェクトすべてで同様の設定を入れていますが、今のところ問題に遭遇したことはありませんし、この指定を不便に感じたこともありません。ボーダーやパディングがボックスの幅に含まれるという概念は、 CSS のボックスモデルの概念( Box model – CSS | MDN )からしても直感的で自然です。

⚠ デフォルトのフォントサイズとして rem を採用

rem は、親のフォントサイズを基準とする相対値を指定できる em を、常に html または body の値を参照するようにしたような単位です。

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff; }

Normalize.css ではフォントサイズの指定に em や % を採用しているめ、配置する場所によってフォントサイズが変化していましたが、 Reboot.css では rem を採用することでどんな場所でも一貫したフォントサイズで表示されるようになりました。

デザインの方針によっては em を単位とした方が良いこともあるため、これについては好き嫌いが分かれる変更かもしれません。

⚠ デフォルトフォントとしてシステムフォントを使用

Reboot.css ではデフォルトフォントとして body に対して以下のようなフォントの指定をしています。

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

-apple-system と BlinkMacSystemFont は、それぞれ safariとchromeでシステムデフォルトのフォントを使用する指定です。IEなどに対するフォールバックとして “Segoe UI” 以下が指定されています。

このフォールバックの指定は英語環境以外では上手く動作しないため、 Reset.css としてはない方が良いでしょう。この点についてはベースである Normalize.css 側でも既に同様のIssueが作られて議論されていましたので、システムフォントを指定するメリット・デメリットをより詳しく知りたい方はそちらを参照してください。

font-family: -apple-system,system-ui,BlinkMacSystemFont,”Segoe UI”,Roboto,”Helvetica Neue”,Arial,sans-serif · Issue #665 · necolas/normalize.css · GitHub

なお、reboot.css は、bootstrap側で bootstrap-reboot.scss として提供されているため、scssファイルからビルドすることでフォールバックのフォントを変更した、プロジェクト独自の Reboot.css を生成することも可能です。

✅ <h*> タグなどのマージントップをすべて削除

<h1> 〜 </h1>
<h6> 、 </h6> 、 <ol>
<li style="list-style-type: none;">
<ol> 、 <li style="list-style-type: none;">
<ul> 、</ul>
</li>
</ol>
</li>
</ol>
<dl> 、 </dl>
<pre> 、 </pre>
<figure> のmargin top が削除されています。これらは記事などの読み物の中で使われることが多いタグです。

h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem; }p {
margin-top: 0;
margin-bottom: 1rem; }

ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem; }

pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
-ms-overflow-style: scrollbar; }

figure {
margin: 0 0 1rem; }

✅ タッチデバイスでのリンクやボタンの反応を向上

Reboot.css では以下の指定をすることで、タッチデバイスでのリンクやボタンの反応を向上させています。

a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
-ms-touch-action: manipulation;
touch-action: manipulation; }

Reset.css として Reboot.css を採用するべきか

ここまで見てきたとおり、 Reboot.css は Bootstrap に組み込む前提で開発されていて、 Normalize.css ほど汎用性を意識して作られていません。

そのため、デフォルト設定でビルドされた Reboot.css を汎用的な CSS として使用しようとすると、一部の設定を上書きしなくてはならないこともでてくるため、やはりあくまでもBootstrapの一部として利用するのが良いでしょう。

とはいえ box-siging: border-box の適用など、取り入れたいポイントは多々あるので、CSSのベストプラクティスとして Reboot.css の指定を積極的に取り入れていくとよいでしょう。

Share on

Goodpatch
Goodpatch公式アカウントです。