[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント
Post on:2012年11月27日
sponsors
ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。
下記は各ポイントを意訳したものです。
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を達成できることを忘れないでください。
sponsors
