CSS おれおれ Advent Calendar 2012 – 12日目

あんまり長いのじゃなくても良いじゃないって思います。

最初

Lv.0 そのまま

何もしない状態です。

このHTMLを例に、あれこれリセットしてみます。

おすすめ

Lv.1 全ての余白を消す

ユニバーサルセレクター*を使って、全部ぱぱっと消しちゃいます。

* { margin:0; padding:0; }

これでだいぶさっぱりしました。

Lv.2 全てのフォントを揃える

見出しの文字が大きいのが気になります。同じにしてしまいます。

* { margin:0; padding:0;
    font-size:1em; font-weight:normal; }

太字もやめます。

Lv.3 リストの行頭表示（マーカー）を消す or 見せる

ul, ol { list-style-type:none; }

消しちゃうとよくない場合もあります。その場合は逆に余白を復活させましょう。

ul, ol { margin-left:2em; }

これくらいなら丸暗記できるかな

と思うのですが、いかがでしょうか。

* { margin:0; padding:0;
    font-size:1em; font-weight:normal; }
ul, ol { list-style-type:none; }

必要に応じて追加

Lv.4 フォーム入力のスタイルを整える

隙間等を調整します。

input, textarea, select, button { font-size:.7em; padding:.1em; }
button { padding:.3em .6em; }

:not()がCSSでもjQueryと同じ仕様だったら*:not(input, textarea, select, button)で済むんですが、CSSの:not()は括弧の中身はひとつだけという仕様なので……。

Lv.5 リンク等を通常文字のように見せる

リンクの色を普通の文字と同じにして、下線を消します。ついでにemやaddressの斜体も消しちゃいましょう。

* {
    color:inherit;text-decoration:none;font-style:normal; }

Lv.6 上付き文字、下付き文字のサイズを整える

あんまり使わない気がしますが。

sub, sup { font-size:.8em; }

Lv.7 フォーム入力欄のスタイルをもっところす

枠線とかも消しちゃいます。やるのなら「Lv.4 フォーム入力のスタイルを整える」は抜きましょう。

* {
    background-color:transparent;border-style:none; }

だ、誰が得するんだろうね。

全消し

漏れあるとは思いますが、まあだいたいこんな感じかな。

* { margin:0; padding:0;
    font-size:1em; font-weight:normal;
    color:inherit;text-decoration:none;font-style:normal;
    background-color:transparent;border-style:none; }
ul, ol { list-style-type:none; }​

フォームや上下付き文字のスタイル補完は抜いてます。（リセットというよりノーマライズの分野かと。）

おしまい

ユニバーサルセレクター*が遅いってのは都市伝説じゃないかなーって思ってるけどどうなんですか。

さて、中盤のやつを再掲しときます。

* { margin:0; padding:0;
    font-size:1em; font-weight:normal; }
ul, ol { list-style-type:none; }

これくらいなら覚えられるんじゃないでしょうか。（覚えるなら文字じゃなくて内容でね。）　フォーム系がちょっとアレなんだけど、どこからか探してくる面倒だわーってときにどうぞ。

どんど晴れ。