Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

CSSの初めでUA固有の表示設定を解除するリセットCSSと、フォントサイズ指定、そしてタグ自体の基本的な振る舞いを規定する指定、この３つを合わせたもの。

この部分はいつでもどんなサイトでも大抵は使いまわせるので、自分なりのものを用意している人も多いと思います。ちなみにSig.は「base.css」という名前で用意してますが、「default.css」とか「master.css」とかって命名も良く見かけますね。それはともかく。

このところデフォルト設定に関するレポを良く見かけるので、いちど当サイトでも纏めておこうかと思った次第です。（ま～「良い感じの方法を見つけたんだけどソース紛失しちゃった」て事態が続けて起こったのでメモ用として必要に迫られたって裏事情もありますがね！）

リセットCSS

1. * {
2. margin: 0;
3. padding: 0;
4. }

まずは基本から。上記のリセット指定は既に広く普及しており、使っている人も多いと思います。ただ全称セレクタを利用した方法には問題も多いです。レンダリングが遅くなるとか、妥当なデフォルト設定まで解除されてしまうとか、平たく言うと「消したつもりも無いものまで消してしまった」ということなのですが。

スタイルをコントロールしようとする手段であったリセットCSSにおいて、「実はコントロールできていなかった」という皮肉に対処するためには、多少面倒でも個別に指定したほうが良い、という結論に落ち着きます。

1. body,div,pre,p,blockquote,
2. form,fieldset,input,textarea,select,option,
3. dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
4. table,th,td,embed,object {
5. margin: 0;
6. padding: 0;
7. vertical-align: baseline;
8. }

後は用途に応じて追加していく感じです。

1. h1,h2,h3,h4,h5,h6 {
2. font-style: normal;
3. font-weight: normal;
4. font-size: 1.0em;
5. }
6.  
7. table {border-spacing:0;}
8. * html table {border-collapse:collapse;}
9. *:first-child+html table {border-collapse:collapse;}
10. caption,th {text-align:left; font-weight:normal;}
11. table,th,td,img {border:0;}
12. img,input {vertical-align:middle;}
13. q:before,q:after {content:'';}
14. ul {list-style: none;}

フォントCSS

フォント周りでは特にブラウザごとの差異が激しく、皆さんいろいろ試行錯誤なされてるところだと思います。特にフォントサイズに関しては、適当なところで妥協して柔軟に組んでおく必要があるのですが... 一例として、最近使っている方法を紹介します。

1. body { font-size: 62.5%; /* 10px */ }
2. h1 { font-size: 2em; /* 20px */ }
3. p { font-size: 1.2em; /* 12px */ }

ブラウザのデフォルト・フォントサイズはだいたい16pxあたりなので、「16px × 62.5% = 10px」。基準が10pxならば「1.2em = 12px」といったように判りやすい指定が出来る、という理屈です。欠点は、デフォルトサイズが16pxという前提に依存していること。モダンブラウザでは大丈夫ですが、例によって完全ではないということは頭に入れとく必要があります。

最後に、font-familyを含めたSig.の決め打ちを貼り付けておきます。

1. body {
2. color: #333;
3. background: #333;
4. font-family : 'Hiragino Kaku Gothic Pro', Meiryo, san-serif;
5. font-size: 62.5%;
6. line-height: 1.7;
7. text-align: center;
8. }
9.  
10. /* --- link --- */
11.  
12. a {
13. color: #3C25A1;
14. }
15. a:visited {
16. color: #3C25A1;
17. text-decoration: none;
18. }
19. a:hover {
20. color: #66f;
21. text-decoration: underline;
22. }
23.  
24. /* --- general --- */
25.  
26. h2 {
27. margin: 0 0 0.5em 0;
28. font-size: 1.5em;
29. }
30. h3 {
31. margin: 0 0 1em 0;
32.  
33. color: #333;
34. font-size: 1.2em;
35. font-family: serif;
36. }
37.  
38. p {
39. font-size: 1.2em;
40. margin-bottom: 1.5em;
41. }
42.  
43. ul {
44. padding: 0 0 1.5em 2em;
45. font-size: 1.2em;
46. }
47. ol {}
48.  
49. table {
50. margin-bottom: 1.5em;
51. font-size: 1.2em;
52. line-height: 1.7;
53. }

memo: 昔のGecko系では、デフォルトフォントが明朝系だった。

memo: font-familyが総称ファミリ名（serif, sans-serifなど）だけだと、何かのブラウザで問題が起きてたような...？

memo: line-heightは、組版でいう二分アキ・四分アキを意識するとしっくりくる気がする。背景が暗かったり、小さい文字だったら大きめにすると良い。

P.S_1: はてブコメントより、id:moja8さん曰く... 総称ファミリ名のみで問題になるのは古いOS（ME以前）のIEとのこと。 thx!

P.S_2: 「border-collapse:collapse;」を指定すると、Firefoxで枠線の表示に問題が起こることがある。「border-spacing」はIE未対応。「* html」はIE7で無効。

P.S_3: base.cssに限ったことではないけれど、CSSファイルの先頭に「@charset "Shift-JIS";」を置くなどして文字コードを明記する癖を付けておいたほうが良い。日本語コメントが文字化けしてコメントアウトしちゃってたりとか、たまにある。

参照

• maratz.com, Typetester’s base font size
• clagnut, How to size text using ems