「Reboot.css」の特徴と使い方を解説

Post on:2018年6月14日

Bootstrapは既に多くの人が知っていると思います。
では、Bootstrapで採用されているCSSのリセットは知っていますか？

Reset CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのCSSリセットとして設計された「Reboot.css」の特徴と使い方を紹介します。

サイトのキャプチャ

A Look at Bootstrap 4's New Reset: Reboot.css

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Reboot.cssとは

Reboot.cssとは簡単に説明すると、Bootstrap 4に含まれているCSSリセットです。しかし、今までの典型的なCSSリセットは少し異なります。

Eric MeyerのCSSリセット

初めてCSSリセットという言葉が登場したのはEric Meyerが発表した「Reset CSS」で、文字通りすべてのブラウザを正確に見えるようにリセットするスタイルシートでした。これにおける問題点は、リセットしてしまうことです。文字通りすべての要素がリセットされ、要素に関係なくすべてが同じように見えてしまいました。

Reset CSSを使用すると、h1要素の見た目がh2要素と同じになるということです。つまり、これは制作者が独自の基本スタイルを追加する必要があることを意味します。これには、利点と欠点の両面があります。

Reset CSSを使用することで基本スタイルが一貫していたので、多くのフロントエンドの制作者はこれに加えて独自の「リセット」を作成していました。しかし、新人や初心者は各要素のベースのスタイルを定義する重要性を理解しなかったため、下記のようなスタイルを定義することもありました。

その時使用するデザインではそのスタイルで良いかもしれませんが、他のデザインや更新・修正した際には、そのスタイルが原因で表示が崩れることもあるでしょう。
私の個人的な意見ですが、このようなことに対処するため、多くのバックエンド開発者がCSSを嫌います。

Normalize.css

しばらくこの暗黒時代は続きましたが、個人的に制作されたベースのスタイルが多くの制作者に人気を得て、共有され始めました。

その中で特に人気だったのが「normalize.css」です。ノーマライズとはブラウザのスタイルをリセットし、シンプルなベースのスタイルを与えるもので、非常に人気を得ました。

Normlalize.cssはデフォルトでborder-boxを使用しないため、何らかの形で追加する必要があります。私はこのプロパティなしで、フロントエンドの開発を行うことは想像できません。Normalize.cssは今日でも広く使用されていますが、border-boxを簡単に加えることができます。正直なところ、なぜborder-boxがデフォルトではないのか分りませんが、私はいくつかの理由があると確信しています。

参考: Normalize.cssは2018年6月現在、最新版はv8.0.0です。
normalize.css 8.0.0がリリース！古いブラウザはサポート対象外になり、大幅に軽量化

Reboot.cssの登場

いよいよReboot.cssの登場です。
Reboot.cssはnormalize.css 2.0に似ており、リセットの素晴らしい機能があります

  • box-size: border-box;はデフォルトで、すべての要素に適用されます。
  • クロスブラウザに対応した一貫したリセットを提供しています。
  • 要素にシンプルで自然なベーススタイルを与えます。
  • モダンなCSSを記述するためのヒントが記されています。
  • Bootstrapの中の人によって作成され、多くの信頼をもてます。

Bootstrap 4ではこのCSSがすべてのページに使用されています。

フレームワークが目指す未来

CSSはますます多くの機能が加えられています。FlexboxやGridなど、新機能はブラウザにどんどん採用され、複雑なレイアウトを簡単に行うためにフレームワークはあまり必要としません。

さらに、LESS, SASS, SCSS, PostCSSのようなツールはスタイルを書くためのデフォルトになり、ボタンのスタイルを作成するなどの面倒な作業を簡単に自動化できます。

これから先、シンプルな素晴らしいフレームワークが登場するかもしれません。しかし現時点では、このReboot.cssが最高の選択肢と言えるでしょう。

Reboot.cssの使い方

Reboot.cssを使用するとどうなるか、まずは見てましょう。

HTMLのさまざまな要素に対して、Reboot.cssがどのようにリセットを適用するかデモを作成しました。比較用に、Reset CSSとNormalize.cssにも切り替えることができます。

サイトのキャプチャ

CSSリセットの比較デモ

自分でテストしたい場合は、下記のリソースを利用してください。

「box-sizing: border-box;」がどのように定義されているか

Reboot.cssではデフォルトで、すべての要素に「box-sizing: border-box;」が適用されます。この点がNormalize.cssと大きく異なる点です。

「box-sizing: border-box;」はCSSファイルの一番上に定義されています。

なぜこのような記述になっているのかは、下記の記事が参考になります。

remを使用したサイズとスペースの指定

remのデモ

Reboot.cssでは、remはフォントのサイズだけでなく、スペースを定義するためにも利用できます。まずは、remを使用したグリッドのデモを見てみましょう。

サイトのキャプチャ

単位に「rem」使用したグリッドのデモ

単位による違い

remはCSS3で導入された新しい単位です。Webで使用する単位でどれがよいかは、さまざまな議論がありますが、remは全体的に良い傾向です。フォントサイズやスクリーンサイズの変更だけでなく、開発時のメンテナンス性や一貫性、ユーザーのアクセシビリティにも利便性が高い単位です。

現在主要な単位の特徴を簡単に挙げます。

  • px: 一貫性には優れますが、アクセシビリティは悪いです。
  • em: アクセシビリティに優れ、メンテナンス性や一貫性もまぁ大丈夫です。
  • rem: アクセシビリティに優れ、メンテナンス性や一貫性にも優れています。

CSSの単位についてさらに詳しく学べる有用なリソースがあります。

remの仕組み

あなたが長さの単位として、px以外のものを知らないと仮定しましょう。
100pxのものは、常に100pxで表示されています。4Kモニターで見ても、1,000pxのコンテナの中でもです。そのことはあまり問題ではありません。100pxが100pxに見えるということは一貫性には優れていますが、ユーザーによる異なる環境の表示にはうまく適応しないため、使い勝手はよくありません。

単位のemは、このスケーリングの問題を解決するために導入されました。emは親要素に対して相対的にサイズを定義する単位です。例えば、100pxと指定するのではなく、1,000pxのコンテナの10%のサイズで0.1emと定義します。このように、コンテナがユーザ－やデバイスやシステムによってリサイズされたかどうかは、それが知覚された長さで一貫したままでいます。

そして、emは別のemに対して相対的にすることもできます。しかし、これは非常に複雑になってしまい、残業時間が増えるでしょう。

私は、シンプルなremを好んで使用します。
remは常にルートに対して相対的で、ルートとはhtmlタグやbodyタグのことです。ルートが1,000pxであれば、コンテナに関係なく、0.1remと指定すれば100pxを利用できます。

ネイティブのフォントファミリー

あなたは今までに、OS間のわずかな相違に対応するためにWebサイトをデザインしたことがありますか？ おそらくmacOSのフォントは美しく見えますが、Windowsでは鮮明ではないように見えるかもしれません。

この原因は、OSによるフォントのレンダリングです。Reboot.cssではOSが何であるとしても、ネイティブのフォントを使用しています。

これは実際には2つのことを意味します。

  1. デフォルトのフォントなので、読み込み時間がほぼゼロです。
  2. ユーザーが望む見た目の良いフォントを使用します。

Reboot.cssの実際のコードは下記の通りです。

margin-topは死んでいる

死んでいるは大袈裟ですが、Reboot.cssでは下記の要素に上マージンはありません。

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • p
  • ul
  • ol
  • dl
  • pre

これには大きな意味があります。私はこのメソッドを推します。私が今まで使用してきたベースのCSSでは、margin-topを使用していません。CMSでコンテンツが何か分からない場合でも、このメソッドは物事がより簡単に収まるようにします。
私はこのリストに、tableを加えることさえも提案するでしょう。

共通要素はクリーンなスタイル

Reboot.cssでは、すべての共通要素にクリーンなスタイルを提供します。blockquote, table, formなどにです。クリーンでシンプルなフォームを実装には、少し時間がかかるかもしれません。

サイトのキャプチャ

タッチデバイスへの対応

Reboot.cssにはデフォルトで、「touch-action: manipulation;」が定義されています。これはタッチデバイスのユーザーに存在するかもしれない遅延を考慮したものです。

リンク、ボタン、フォームフィールドをタップすると、タッチデバイスですばやく反応するようになります。

まとめ

Reboot.cssはよく知られたWebの慣習を踏襲し、Webを標準化する素晴らしいプロジェクトであると言えるでしょう。
Reboot.csの重要なリソースを掲載しておきます。

sponsors

top of page

©2024 coliss