CSSのリセットについて

CSSのリセットとは

 CSSのリセットとは、

h1 {
 margin:0;
 padding:0;
 color:#000;
 border:none;
}

 というように0や設定無しを明示的に指定することで、現在指定されている可能性のある設定を一旦リセットすることを言います。


CSSのリセットの対象

 CSSのリセットの対象は属性セレクタのみです。
 属性セレクタとはHTMLに記述された属性のことでhtml、body、a、img、ul等を対象とするセレクタです。クラス(.~)やID(#~)によって設定するセレクタは独自に規定するものなので、新規で作成するということなので予想外の余白が設定されていることはありえません。このため、CSSのリセットを行う必要はありません。


なぜCSSのリセットをしなければならないのか

 属性セレクタにはブラウザごと独自の余白が設定されているためです。このため一旦リセットしないと意図しない余白が発生して「何が原因でこの余白が発生しているのか?」と調べるはめになります。




CSSのリセットの利用例

全称セレクタによる一括リセット設定

 全称セレクタでリセットすることで、一括でリセットすることができます。

* {
 margin:0;
 padding:0;
 color:#000;
 background:#fff;
 border:none;
}


 しかし、この方法は問題であり、現場ではほとんど利用されていません。理由は、有用な余白設定も一緒にリセットしてしまうからです。
 特に言われるのは、主にフォームで利用するinput、button等の有用な余白設定を一緒にリセットしてしまうことです。h1~h6、p、img等属性の各ブラウザごとの独自余白はデザインの際、邪魔になることが多くリセットした方が良い反面、input、button等フォーム系の属性は余白をリセットしない方が良いです。


使う属性ごとリセット設定

 これが一般的に現場で利用されるリセットのやり方です。実際にサイト内のHTMLで使っている属性のみに絞って、必要なものだけをリセットします。

h1 {
 margin:0;
 padding:0;
 color:#000;
 background:#fff;
 border:none;
}


reset.css、normalize.cssの利用

 いちいち属性ごとリセットするのは手間がかかりますので、オープンソースであるreset.css、normalize.cssを利用する方法です。こちらでまとめていますのでご覧下さい。




CSSのリセットでも解決しない事象の対応方法

 余白なしに設定しようとmargin:0; padding:0;をCSSリセットで書いたのに余白がなしにならない場合が、特にPC上全画面表示の時(各ブラウザ上でF11を押した時)に発生することがあります。
 この場合、box-sizing:border-box;を設定することで解決することが多いです。ちなみにbox-sizingの初期値はcontent-boxです。ボックスモデルについてこちらで詳しくまとめていますので併せてご確認下さい。




 Copyright IT SKILL MAP. All rights reserved.