ブラウザのデフォルトスタイルをリセットする

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは、maiです。今回はコーディングでデザイン用にcssを書き出す前の下準備のお話。

ただhtmlを書いただけでも、見出しは大きかったり、
リストには黒い丸が表示されたり、strongは太字になったりemは斜体になったり、
そのすべてはブラウザがもともと持っているstyleです。

まあ…正直邪魔ですよね。
リストのマークは黒丸じゃなくて画像で作った矢印にしたいし…とか。

そんなとき、いちいち
list-style: none;
なんて書くのはめんどくさいことこの上ない。
１カ所だけならいいんですけどね。

 なので、もう最初からなかったことにしたいstyleはリセットしてしまいましょう。
↓に実際に使ってるリセット用cssを一気に公開です。

/* Universal selector */
* {
margin:0;
padding:0;
position:static;
}

/* Text(Heading) */
h1, h2, h3, h4, h5, h6 {position:static;}

/* Text(Block) */
address, blockquote, div, p, pre {
font-style:normal;
font-weight:normal;
position:static;
}

/* Text(Inline) */
abbr, acronym, br, cite, code, dfn, em, kbd, q, samp, span, var {
position:static;
border:none;
font-style:normal;
font-weight:normal;
}
strong {
position:static;
border:none;
font-style:normal;
font-weight:bold;
}

/* Hypertext */
a {text-decoration: none;}

/* List */
ul, dl, dt, dd {
list-style-type:none;
font-style:normal;
font-weight:normal;
position:static;
}
ol {list-style-type:none;}

/* Image */
img {
border:0;
vertical-align:top;
}

/* Scripting */
noscript, script {
font-style:normal;
font-weight:normal;
position:static;
}

/* Etc. */
hr, table, form, fieldset, del {
font-style:normal;
font-weight:normal;
position:static;
}

ーーーーーーーーーーーーーーーーーーーーーーーーーここまで

これを使うと、見出しも段落もリストもなにもかも、
何一つ変化のないテキストとして表示されるので、
ここに適宜必要なstyleを追加していきます。

リセット用のcssは1つのファイルにまとめておくと、
使い回しがきいて非常に便利になります。