リセットとは?
IEやGoogle Chromeなどブラウザには、CSSを設定しなくとも、あらかじめ、デフォルトのスタイルが用意されている。
- このデフォルトのスタイルは、ブラウザ間によって異なっている。
- CSSファイルを制作する際、このデフォルトのスタイルが、邪魔になる場合がある。
それらを避け、ブラウザ間での見え方を統一するために、デフォルトのスタイルを無効にすることを、「CSSをリセットする。」という。
よく利用されているリセットCSS
リンク先にコードが表示されていたり、ダウンロードできるようになっています。
CSS Reset
CSS Reset | 2015’s most common CSS Resets to copy/paste, with documentation / tutorials
現時点でのリセットCSSの人気度が、一覧にされています。
Eric Meyer’s Reset CSS
Eric Meyer’s “Reset CSS” 2.0 | CSS Reset
世界中で最も利用されているリセットCSSの1つ。
特に理由がなければ、こちらを利用するか、カスタマイズする。
カスタマイズしやすいのも、特徴。
HTML5 Doctor Reset CSS
HTML5 Reset Stylesheet | HTML5 Doctor
HTML5対応のリセットCSS。
基本的に、Eric Meyer’s Reset CSS と似ているが、よりHTML5に特化した内容となっている。
YUI3 Reset CSS
全ての要素のデフォルト設定を、ほぼ削除するように設定されているため、全てのスタイルを完全に、制作者側でコントロールしたい場合に向いている。
Reset CSS ( meyerweb.com )
Normalize.css
Normalize.css: Make browsers render all elements more consistently.
Normalize.css は、他と違い、ブラウザの有用なデフォルトのスタイルを、そのまま利用できるように設計されている。
ユニバーサルセレクタ(*)によるリセット
ユニバーサルセレクタ(*)で、全ての要素でリセットを掛ける手法。
- { margin: 0; padding: 0;}
現在、あまり使われていない要因
- 表示パフォーマンスが悪い。
- 一部フォームの表示などで不具合が生じる。
【参考記事】
リセットCSSの基礎知識とおすすめ5選オススメ書籍
[amazonjs asin=”4798124036″ locale=”JP” tmpl=”Small” title=”10日でおぼえるCSS/CSS3入門教室”]
[amazonjs asin=”4873117259″ locale=”JP” tmpl=”Small” title=”CSS3開発者ガイド 第2版 ―モダンWebデザインのスタイル設計”]