【CSS】リセットCSSの考え方

CSS

WEBサイトを表示するブラウザはそれぞれ基礎のCSSプロパティの値が設定されています。そのためCSSを書いて複数のブラウザでチェックするとレイアウトのズレが発生します。このズレを無くすために必要なのがリセットCSSです。

リセットCSSとは

特別なCSSがあるわけではありません。CSSを書き始める前に全てのタグの値を初期化させてしまおうというのがリセットCSSです。先述したように各ブラウザは初期CSSが設定されています。そのままだと各ブラウザ毎にCSSの記述をしなければならないので始めに初期化させます。

一度CSSを当てたものを再度CSSで上書きしていくことになるのでレンダリングの２度手間と思うかもしれませんが、どのみち各ブラウザをデザイン通りにCSSを当てようとすると同じようなことをするので始めにリセットした方が簡素にCSSを書けます。

リセットCSSの例

これは僕が実際に使っているリセットCSSです。毎回この記述をCSSファイルの先頭にコピペしています。

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;}
ul,ol{list-style:none}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins{color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
img{vertical-align:middle;}
*:focus{outline:none;}