リセットCSSとは？ #初心者

リセットCSSとは

リセットCSSとは、Google ChromeやSafari、Microsoft Edgeなど異なるブラウザを使っても同じようにWebサイトが表示されるためのCSSファイルのこと

仕組み

ブラウザが元々持っているデフォルトのCSSの設定を上書きするように、ブラウザ毎に異なるスタイルを持つ特定のセレクタに対してプロパティを指定してブラウザ間の表示を揃えるという仕組み

リセットCSSでできること

ブラウザごとの差異をなくすことができる
ブラウザ固有のバグを修正することできる
わざわざ自分でブラウザごとのCSSを書かなくて済む

リセット読み込み方

<head>
 <meta charset="UTF-8">
  <!-- ↓の＃に読み込みたいリセットCSSを先に読み込みます -->
 <link rel ="stylesheet" href="#.css">
  <!-- 次の制作者のCSSファイル名を入れてください -->
 <title>リセットCSSの説明</title>

CSSの順番は、まずリセットCSSを読み込ませてから、制作者側のCSSで上書きするという流れ。
CDNで読み込ませる事が出来る物もある。

主なリセットCSS

Eric Meyer's "Reset CSS"2.0
HTML5 Doctor CSS Reset
Yahoo!(YUI3)Reset CSS
Universal Selector'*'Reset
Normalize.CSS
ress
sanitize.css
Destyle.css
A Modern CSS Reset

Eric Meyer's "Reset CSS"2.0

公式ページ

特徴

全ての余白が消える（ブラウザの周辺、見出しなどの要素の上下など全て）
見出しや太文字などの設定が消え、文字サイズもリセットされ全て同じになる
テキストボックスや送信ボタンなどの＜input＞要素はブラウザ固有のものになる

まっさらな状態から、全て自分でデザインしたい方におすすめ。

Eric Meyer's "Reset CSS"2.0は、一部のタグがHTML5に対応していないことがある。
したがって、次に紹介するHTML5 Doctor CSS Resetを使用することをおすすめする。

HTML5 Doctor CSS Reset

公式ページ

特徴

全ての余白が消える（ブラウザの周辺、見出しなどの要素の上下など全て）
見出しや太字などの文字サイズはリセットされ全て統一されるが、文字の太さはリセットされない
テキストボックスや送信ボタンなどの＜input＞要素はブラウザ固有のもになる

まっさらな状態から、全て自分でデザインを調整したい方におすすめ。

Yahoo! (YUI 3) Reset CSS

公式ページ

特徴

ブラウザの周りの余白はリセットされているが、要素の上下の余白は少しだけ空いている
見出しや太文字の文字の太さはリセットされていて、見出しの文字サイズはリセットされているが、小文字の文字サイズはリセットされていない
テキストボックスや送信ボタンなどの＜input＞要素はブラウザ固有のものになる

Yahoo! (YUI 3) Reset CSSは一部のHTML5タグが対応していないことがあるため、特別な理由がない限り他のリセットCSSを使った方がいい。

Universal Selector'*'Reset

リソース

*{
margin:0;
padding:0;
}

特徴

全ての余白をリセットしている（’*’はユニバーサルセレクタといい全ての要素を指定するときに使用します）
余白以外はリセットしないので、文字の太さや大きさなどはデフォルトのものが反映されます。

Universal Selector'*'Resetを使用すると、Webページの読み込み速度が遅くなるためおすすめしない。
＜ul＞や＜ol＞などのリストや＜table＞（表）などが持つ余白はあらかじめいい感じに調整されているのにも関わらずリセットしてしまうのも、お勧めできない理由の一つである。

Normalize.css

公式ページ

特徴

ブラウザ周りの余白はリセットされる
見出しや文字の上下の余白はリセットされず、文字のサイズと太さもリセットされない
有用なデフォルトのCSSはリセットしない（リストの余白など）

Normalize.cssはデザインに支障が出ないデフォルトのCSSをリセットせずに保持する。
そのため、全てを自分でデザインしなくても、デフォルトの状態でそれなりに整ったデザインをすることが可能なので非常に使い勝手が良いです。

ress

公式ページ

特徴

ブラウザ周り、各要素の上下の余白が全てリセットされる・見出しなどの文字サイズと太さはリセットされない
＜input＞のテキストボックスやボタンも全てリセットされる

ress.cssはnormalize.cssをさらに使いやすくするためにアップデートされたCSS。
normalize.cssとの大きな変更点は、すべての要素のpaddingとmarginをリセットすること、＜input＞要素の標準スタイルを打ち消すことなどです。

sanitize.css

公式ページ

特徴

ブラウザ周りの余白はリセットし、見出しなどの要素の上下の余白はリセットしない
文字のサイズと太さはリセットしていない
見た目はnormalize.cssと似ている（こちらの方が少し余白の幅が広い）

sanitize.cssはnormalize.cssの共同開発者開発したこともあり、normalize.cssの思想を受け継いでいます。
normalize.cssと同じように有用なデフォルトのCSSをそのまま保持し、バグを修正し、ユーザビリティを高められている他に、スマホなどのモバイルに対応していることもsanitize.cssの特徴の一つである。

destyle.css

公式ページ

特徴

ブラウザのデフォルトCSSを無効化する
marginやpaddingなどを消す
font-sizeとline-heightをリセットする

まっさらな状態からデザインしたい方におすすめ

A Modern CSS Reset

公式ページ

特徴

デフォルトの状態と比べると＜h＞タグや＜p＞タグに「margin:0」に設定されており、要素同士の間隔が狭くなっている
imgタグやpictureタグに対して「max-width:100%;」「display:block」が指定されているため、レスポンシブがしやすいといったメリットがある
ファイルサイズが軽い

ブラウザのデフォルトCSSを残す

リセットCSSとは？