CSS おれおれ Advent Calendar 2012 – 12日目
あんまり長いのじゃなくても良いじゃないって思います。
最初
Lv.0 そのまま
何もしない状態です。
このHTMLを例に、あれこれリセットしてみます。
おすすめ
Lv.1 全ての余白を消す
ユニバーサルセレクター*を使って、全部ぱぱっと消しちゃいます。
1 | * { margin:0; padding:0; } |
これでだいぶさっぱりしました。
Lv.2 全てのフォントを揃える
見出しの文字が大きいのが気になります。同じにしてしまいます。
1 2 | * { margin:0; padding:0; font-size:1em; font-weight:normal; } |
太字もやめます。
Lv.3 リストの行頭表示（マーカー）を消す or 見せる
1 | ul, ol { list-style-type:none; } |
消しちゃうとよくない場合もあります。その場合は逆に余白を復活させましょう。
1 | ul, ol { margin-left:2em; } |
これくらいなら丸暗記できるかな
と思うのですが、いかがでしょうか。
1 2 3 | * { margin:0; padding:0; font-size:1em; font-weight:normal; }ul, ol { list-style-type:none; } |
必要に応じて追加
Lv.4 フォーム入力のスタイルを整える
隙間等を調整します。
1 2 | 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の斜体も消しちゃいましょう。
1 2 | * { color:inherit;text-decoration:none;font-style:normal; } |
Lv.6 上付き文字、下付き文字のサイズを整える
あんまり使わない気がしますが。
1 | sub, sup { font-size:.8em; } |
Lv.7 フォーム入力欄のスタイルをもっところす
枠線とかも消しちゃいます。やるのなら「Lv.4 フォーム入力のスタイルを整える」は抜きましょう。
1 2 | * { background-color:transparent;border-style:none; } |
だ、誰が得するんだろうね。
全消し
漏れあるとは思いますが、まあだいたいこんな感じかな。
1 2 3 4 5 | * { 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; } |
フォームや上下付き文字のスタイル補完は抜いてます。（リセットというよりノーマライズの分野かと。）
おしまい
ユニバーサルセレクター*が遅いってのは都市伝説じゃないかなーって思ってるけどどうなんですか。
さて、中盤のやつを再掲しときます。
1 2 3 | * { margin:0; padding:0; font-size:1em; font-weight:normal; }ul, ol { list-style-type:none; } |
これくらいなら覚えられるんじゃないでしょうか。（覚えるなら文字じゃなくて内容でね。） フォーム系がちょっとアレなんだけど、どこからか探してくる面倒だわーってときにどうぞ。
どんど晴れ。