ブラウザー事の表示が違うのを統一
まず一番最初にCSSを何も設定しない状態でhtmlタグの表示の違いを見てみましょう。
margin,paddingの統一
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0; padding: 0;
}
使うであろうhtmlタグのmargin,paddingを0 に指定。
するとこんな感じに表示が変わります。
フォントサイズの統一
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
先にフォントサイズが明らかに違うh タグを統一しておきます。
body {
font-size: 75%;
}
html>/**/body {
font-size: 12px;
}
ここで基準フォントサイズをどのブラウザーでも12px相当に統一。
ちなみに今の状態はこんな感じですね。
font-family,line-heightの設定
body {
font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height: 150%;
}
* + html body {
font-family: "メイリオ","Meiryo";
}
はっきり言ってここは個人差が出ると思うのですが、自分はこのように指定していますね。
- * + html bodyに指定してあるのはメイリオが適応されるブラウザではメイリオ表示って感じですね（MACやWin Vista用）
- 読みやすいとされているline-heightの感覚は130% ～ 150%(1.3em ～ 1.5em)なので自分は150%にしています。
先に指定しておいた方が良い要素
html {
overflow-y: scroll;
}
table {
border-collapse: collapse; border-spacing: 0;
}
img {
border: 0;
}
li {
list-style-type: none;
}
最低限を記述するとこんな感じですね。
- htmlで指定してあるのはFirefoxのスクロールバーの有無でセンタリング位置がズレるのをを解消する為です。
- tableにつく余白みたいなのを消してます。（それが必要な人は指定しなくて良いと思います。）
- imgに何故かborderが指定してあるので消しちゃいます。
- li要素の数字や横につく●みたいなのを消します。
返信ありがとうございます。
アバウトな感じでOKという事ですね。計算が必要であればめんどい・・・と思っていたので安心しました^^
2009年12月30日 20:30