ブラウザスタイルの初期化

2010年11月15日

世の中には多種多様なブラウザが存在しますが、それぞれのブラウザごとに、デフォルトのスタイルが異なる場合があります。特に、CSSでデザインしていく上で、この異なるスタイルのせいで困ってしまうことがあります。代表的なものとしては、body要素が持つデフォルトの余白を、FireFoxやIEはmargin属性で再現しているのに対し、Operaはpadding属性で再現しているという点などが挙げられます。

そこで、あらかじめすべての要素に対してデフォルトのスタイルを指定しておくことにより、これらの違いを平坦化することが出来ます。

CSS

1* {
2    margin: 0;
3    padding: 0;
4    font-style: normal;
5    font-weight: normal;
6    font-size : 100%;
7}

このようにユニバーサルセレクタを使い、CSSの一番はじめに記述することで、各ブラウザのデフォルトスタイルの違いを気にすることなく、コーディングを行うことが出来ます。

ただし、ユニバーサルセレクタを用いた指定は、多少なりとも処理に負荷がかかるため、よく使う要素にのみデフォルトスタイルを指定した方がよいと思われます。そこで、当社で使用しているデフォルトスタイルをご紹介します。

クロノドライブで使用しているデフォルトスタイル

01html, body, div, span, applet, object, iframe,
02h1, h2, h3, h4, h5, h6, p, blockquote, pre,
03a, abbr, acronym, address, big, cite, code,
04del, dfn, em, font, img, ins, kbd, q, s, samp,
05small, strike, strong, sub, sup, tt, var,
06b, u, i, center,
07dl, dt, dd, ol, ul, li,
08fieldset, form, label, legend,
09table, caption, tbody, tfoot, thead, tr, th, td {
10    margin: 0;
11    padding: 0;
12    background: transparent;
13    border: 0;
14    outline: 0;
15 
16    font-size: 1em;
17}
18 
19body {
20    font-size: 16px;
21}
22 
23body,
24table,
25input, textarea, select, option {
26    font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
27    font-size: 1em;
28    line-height: 1em;
29}
30 
31ol, ul {
32    list-style: none;
33}
34 
35blockquote, q {
36    quotes: none;
37}
38 
39:focus {
40    outline: 0;
41}
42 
43ins {
44    text-decoration: none;
45}
46 
47del {
48    text-decoration: line-through;
49}
50 
51a:link {
52 
53}
54 
55a:visited {
56 
57}
58 
59a:hover {
60 
61}
62 
63a:active {
64 
65}

ぜひ参考にしてみてください。