[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント

ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。

サイトのキャプチャ

CSS Reset

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

2012年人気のあったCSS Reset

まずは、2012年に人気のあったCSSリセット ベスト5!
CSS Reset経由で最もダウンロードされたものです。

Eric Meyer's "Reset CSS" 2.0
コードとドキュメント
HTML5 Doctor CSS Reset
コードとドキュメント
Yahoo! (YUI 3) Reset CSS
コードとドキュメント
Universal Selector '*' Reset
コードとドキュメント
Normalize.css 1.0
コードとドキュメント

どのCSSリセットを使うべきか判断するポイント

CSSリセットは数多くあり、どのCSSリセットを使えばよいかの簡単なアドバイスがあります。

もしHTML5で実装するなら
HTML5 Doctor CSS Reset
非HTML5でプロトタイプのページを素早くテストするなら
Eric Meyer's Reset CSS
フレームワークとしてCSSリセット後のスタイル定義も必要とするなら
Tripoli CSS Reset, Vanilla CSS Un-Reset
フル機能のCSSのフレームワークを必要とするなら
YUI 3 CSS Library
一般的にはユニバーサルセレクタ(*)でのリセットは使わないでください
Universal Selector '*' Reset

CSSリセットとは異なるアプローチとして、ノーマライズがあります。詳しくは、当ブログに制作者自らの解説を翻訳したものもあるので参考にしてください。

CSSリセットを上手に使うポイント

  • 案件にあったCSSリセットを見つけ、それをカスタマイズしてください。
  • CSSリセットでユニバーサルセレクタ(*)を使うのを避けてください。
  • リンクでもエレメントでも「outline:0;」を設定した時は、再定義するのを忘れないでください。これはユーザビリティに影響を与えます。
  • 一度使用したCSSリセットは常に手元に残し、保持し、次のプロジェクトに役立ててください。
  • リセットで「body{line-height:0;}」を定義し、その後「body{line-height:1.5;}」を定義することで、ちょうど1.5を達成できることを忘れないでください。

top of page

©2017 coliss