CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css

Post on:2017年5月16日

Normalize.cssって何？ CSSリセットとは違うの？ どうやって使うの？ といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。

サイトのキャプチャ

About normalize.css

[ad#ad-2]

下記は各ポイントを意訳したものです。

Normalize.cssとは

Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。

normalize.cssの関連サイト

[ad#ad-2]

Normalize.cssは数多くのフレームワーク、ツール、サイトで利用されています。

Normalize.cssの特徴

Normalize.cssはCSSリセットに代わるもので、このプロジェクトはブラウザごとのスタイルの相違を研究して開発したものです。

Normalize.cssの目的は次の通りです。

  • ブラウザのスタイルを消去するよりむしろ有用なデフォルトのスタイルを保存します。
  • あらゆるHTMLエレメントのスタイルを正常化（Normalize）します。
  • バグとブラウザごとの一貫性のなさを修正します。
  • 巧妙な改良でユーザビリティを改善します。
  • コード内のコメントと詳細なドキュメントで詳しく解説がついています。

サポートはスマートフォン用のブラウザを含め、広範囲のブラウザで、HTML5のエレメント、タイポグラフィ、リスト、埋め込みコンテンツ、フォーム、テーブルなどを正常化します。

プロジェクトの種類に関わらず正常化の原則に基づき、望ましい実利的なデフォルトのスタイルを提供します。

ノーマライズ vs リセット

Normalize.cssは従来のCSSリセットと何が違うのか、を学んでみましょう。

Normalize.cssは有用なデフォルトを維持します

リセットはほとんど全てのエレメントのスタイルをフラットにすることで、スタイルに同じビジュアルを与えます。それに比べ、Normalize.cssは多くの有用なデフォルトのブラウザのスタイルを維持します。これが意味することは、全ての普通のタイポグラフィのエレメント用にスタイルを再び定義しなくてもよいということです。

エレメントが異なるブラウザで異なるデフォルトのスタイルである場合、Normalize.cssはそのスタイルを一貫し、最新のスタンダードと一致させることを目指しています。

Normalize.cssは共通のバグを修正します

デスクトップ用だけでなく、スマートフォン用のブラウザのバグを修正します。これはブラウザとOSをまたいだバグ、多くのフォーム関連やテキストのフォントサイズ、IE9のSVGコンテンツのオーバーフロー、HTML5のディスプレイ設定などを含みます。

例えば、HTML5のtype=searchのinput要素をどのようにクロスブラウザ対応のスタイルにしているか見てみましょう。

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

Normalize.cssはデバッグツールをゴチャゴチャさせません

リセットを使用すると、ブラウザのCSSのデバッグツールでものすごい量の継承がおきるかもしれません。normalize.cssはターゲットとなるスタイルと多数のセレクタが慎重に使用されているため、この問題はありません。

Normalize.cssはモジュール式です

Normalize.cssはモジュール式のため、プロジェクトで必要なスタイルのみを利用し、必要ではないスタイルを削除して利用することができます。
例えば、フォームを利用しないのであれば、フォームのスタイルは削除できます。

Normalize.cssは広範囲のドキュメントを用意しています

Normalize.cssのコードはクロスブラウザでの調査と組織的なテストに基づいて作成されています。ファイルはGitHubに保存されており、インラインで説明が記述されています。
それぞれのコードが何をしているのか、なぜ含まれているのかなど、スタイルシートファイルにインラインでコメントが記述されているため、あなた自身でも簡単にテストを行うことができるでしょう。

ブラウザがどのようにデフォルトでエレメントをレンダリングするかについて、このプロジェクトは人々の勉強に役立ち、改良に関係することをより容易にすることを目指します。

Normalize.cssの使い方

まずは、GitHubから「normalize.css」をダウンロードしてください。
使い方は主に2通りあります。

  1. プロジェクトのベースのCSSのために「normalize.css」を出発点として使用します、デザインによって値をカスタマイズします。
  2. 「normalize.css」をインクルードします、もし必要があればあなたのCSSのデフォルトを優先し、それを元に制作します。

終わりに

Normalize.cssはCSSリセットとはそのスコープと制作において、あきらかに異なります。あなたの開発のアプローチとマッチするかどうか試してみる価値があるはずです。

プロジェクトは現在GitHub上で行われており、誰でもサブミットすることができます。

sponsors

top of page

©2024 coliss