[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

リセットとは?

IEやGoogle Chromeなどブラウザには、CSSを設定しなくとも、あらかじめ、デフォルトのスタイルが用意されている。

  • このデフォルトのスタイルは、ブラウザ間によって異なっている。
  • CSSファイルを制作する際、このデフォルトのスタイルが、邪魔になる場合がある。

それらを避け、ブラウザ間での見え方を統一するために、デフォルトのスタイルを無効にすることを、「CSSをリセットする。」という。

よく利用されているリセットCSS

リンク先にコードが表示されていたり、ダウンロードできるようになっています。

CSS Reset

Screenshot of cssreset.com

 

CSS Reset | 2015’s most common CSS Resets to copy/paste, with documentation / tutorials

現時点でのリセットCSSの人気度が、一覧にされています。

Eric Meyer’s Reset CSS

Screenshot of cssreset.com

 




Eric Meyer’s “Reset CSS” 2.0 | CSS Reset

世界中で最も利用されているリセットCSSの1つ。

特に理由がなければ、こちらを利用するか、カスタマイズする。

カスタマイズしやすいのも、特徴。

HTML5 Doctor Reset CSS

Screenshot of html5doctor.com

 

HTML5 Reset Stylesheet | HTML5 Doctor

HTML5対応のリセットCSS。

基本的に、Eric Meyer’s Reset CSS と似ているが、よりHTML5に特化した内容となっている。

YUI3 Reset CSS

Screenshot of yuilibrary.com

 




YUI Library

全ての要素のデフォルト設定を、ほぼ削除するように設定されているため、全てのスタイルを完全に、制作者側でコントロールしたい場合に向いている。

Reset CSS ( meyerweb.com )

CSS Tools: Reset CSS

 

CSS Tools: Reset CSS

Normalize.css

Normalize.css: Make browsers render all elements more consistently.

 

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デザインのスタイル設計”]

 

 

(Visited 215 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください