「ブラウザ変えたら微妙にずれてる・・・」これらの悩みを解消するのが「リセットCSS」です。今回はオススメのリセットCSSと、それを元に自作したものを紹介していきます。以下、記事に入ります。まとめリセットCSSとは?HTMLタグは、ブラウザごとにCSSがあらかじめ割り当てられている場合があります。ulタグには左にpadding、上下にmarginがあらかじめ入っていますね。この指定、実はブラウザ毎に異なる場合があります。リセットCSSはこのブラウザごとの違いを最初にリセットして、開発を効率的に行うためのCSSです。あと、そもそも勝手にpaddingとか入れられたらいちいち外すのも面倒ですしね。欠点としては、最初に一括で指定するためCSSの分量が多くなります。最初に指定するだけなので言うほど量は増えないのですが、一応頭には入れておきましょう。おすすめのリセットCSS自作しても良いのですが、Web上に公開されているリセットcssを使うのが一番手っ取り早いです。Resetで、リセットCSSが人気順に紹介されています。以下、人気のリセットCSSを紹介していきます。実際のコードも載せているので、ここからコピーしてテキストエディタに貼り付ければすぐに使用できます。2.0人気No.1のリセットCSSです。最低限のCSSが揃っており、かつ使用頻度が少ないタグについては特に指定がされていません。ゆえにCSS分量が少なく見た目も綺麗で、個人的に一番おすすめのリセットCSSです。Reset名前の通り、HTML5用に作られたリセットCSS。2.0と比べると、insやmark、abbrなどあまり使われないタグにも指定が入っています。簡単なマークアップしかしない方は、不要な部分を削除するか他のリセットcssを使いましょう。CSS名前の通り、Yahoo!が開発したリセットCSSです。開発年が2014年と比較的新しいのが特徴です。基本は他と大きな差はありませんが、若干タグ指定が細かいです。CSSとはリセット指定のタグが結構異なります。リセットの内容、指定されているタグを見て使用するかを判断しましょう。License.http://yuilibrary.com/license/*/html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}ちなみにこちらのリセットCSSは、CDNによる読み込みも用意されています。0;}分量が少なくお手軽に見えるかもしれませんが、全ての要素に指定するため、ブラウザのレンダリングが遅くなるというデメリットがあります。指定方法は確かに一番楽ですが、上記デメリットを考えるとタグ毎に適切に指定する方がおすすめです。人気リセットCSSを紹介しましたが、こう思われた方もいるかもしれません。「指定のタグ多くない?」と。blockquoteやmarkなんかは、人によっては普段全然使わないタグです。使わないのに入れっぱなしだと無駄にCSSの分量が増えますし、コードが美しくありません。いった点が気になる方は、リセットCSSを自作してみましょう。2.0」をベースに、自分が使いやすいよう改造します。blockquoteなど、普段のマークアップで使用頻度が低いタグは全て削除してしまいます。headerやfooterなども頻出ではありますが、どうせ中にdivやpを用意することがほとんどなので削除。inheritは個人的に不要なので削除、代わりにbox-sizing:border-boxを設定。して出来上がったのが以下のリセットCSSです。僕は普段のコーディングではだいたいこれ使ってます。none;}使用頻度が高い、必要最低限のタグのみを残しました。こんな感じで、自分がよく使うタグにだけリセットcssを割り当てて、使わないものは削除してしまいましょう。案件で必要に迫られたら、その都度微調整してあげれば十分です。リセットCSSの使い方と注意点リセットCSSを読み込むとき、方法は2つあります。1.CSSの一番上にコードを貼り付ける2.リセットCSS用のファイル(reset.css等)を用意し、HTMLで読み込む。ここで注意して欲しいのが順番です。1の場合、コードは必ず1番上に貼り付けましょう。CSSは後に書いたものを優先するので、一番下にCSSを書いたら自分のCSSが適用された後にリセットCSSが適用されてしまいます。2の場合、reset.cssは最初に読み込ませましょう。1と似たような理由で、cssは後に読み込みしたものが優先されます。最後にリセットCSSを読み込ませると、当然リセットCSSが優先されてしまいます。head内に書くときは以下の順番で書きましょう。href="css/style.css">まとめリセットCSSについて、ご理解いただけたでしょうか?ブラウザ毎の違いをリセットするのが主目的ですが、デフォルトで入ってるCSSをリセットできるだけでも結構作業が捗ります。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。