default.css

以下からご覧いただけます。

• default.css

このファイルは次のような目的で作っています。

• 各ブラウザが持つデフォルトのCSSをリセットして，レンダリングの違いを解消する。
• サイトやページによって書き換えることがほとんどない，基本的な設定を行う。
• コーディングが分かりやすくなる初期値を指定しておく。

このファイルをあらゆるサイトで使い回せるようにしておくわけです。

リセット

/* Reset */

body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, 
brockquote, pre, table, caption, th, td, address, 
form, fieldset, legend, object {
  margin: 0;
  padding: 0;
}

h5, h6, pre, table, code, kbd, samp, acronym, input, textarea {
  font-size: 100%;
}

a, ins {
  text-decoration: none;
}

address, em, cite, dfn, var {
  font-style: normal;
}

input, textarea {
  font-family: sans-serif;
  font-weight: normal;
}

img {
  vertical-align: baseline;
}

a img {
  border: none;
}

まず，ブロックレベル要素は margin と padding が 0 の状態にし，見出しを除くテキストはフォントサイズ・スタイルが同じになるようにします。

各ブラウザのデフォルトCSSでどのように表示されるかは，以下のページで確かめてみてください。

• CSS - 各要素の表示チェック | Try | d-spica

ブラウザによって違いが出てくるもののほかに，次のようなものもリセットしています。

• 斜体になる。（日本語フォントの斜体は読みづらい）
• フォントサイズ・スタイルが通常のものと違う。（table, input など。IEのpre, codeなど， Firefoxのinput, textarea，Oreraのacronym，などブラウザによっていくつか）

この初期化ファイルをあてると，次のようになります。

• CSS - 初期化ファイルをあてたときの各要素の表示 | Try | d-spica

基本的な設定

以下の設定は，サイトによって値を若干変える場合もあります。

/* Setting */

body {
  background: #FFF;
  font-family: sans-serif;
  font-size: 13px;
  color: #333;
}

* html body { /* for IE6 */
  font-size: small;
}
  
*:first-child+html body { /* for IE7 */
  font-size: small;
}

ul {
  list-style-position: outside;
  list-style-type: none;
}

ol {
  list-style-position: outside;
}
  
table {
  border-collapse: collapse;
}

legend {
  color: #333;
}

div#main p,
div#main ul,
div#main ol,
div#main dl,
div#main blockquote,
div#main pre,
div#main table {
  margin: 1em 0;
}

まず，フォントサイズを13px相当に合わせています。ul, ol, table の設定は好みによるところも多分にありますが...。

legend はIEで青文字になります。他のフォント色と合わせています。

メインコンテンツの部分だけは，よく使うブロックレベル要素にあらかじめ margin を指定しています。他の部分は，デザインによって margin がまちまちになる場合が多いので，ここでは指定していません。

初期化ファイルで指定しないほうがよいもの

初期化ファイルであまり細かく指定しまうと，サイトによって後から書き換える部分がふえてしまいます。あらゆるサイトで使い回せるようなファイルになりません。初期化ファイルにはあくまで基本的（不変）なところだけ。

line-height は，メインコンテンツの部分では 1.5 前後にするとよいのですが，他のところでは 1.2 くらいがよかったり，1 にしておくのが便利だったりと様々なので，ここでは指定せず，サイトごとに作る別ファイルで。

h1, h2, h3 あたりの見出しも，サイトによってデザインも様々，しかもわりと詳細に指定することが多いので，別ファイルで。

form 内の各コントロールは，基本的にブラウザがあらかじめ持っているものを使うようにしています。padding や border. outline などをリセットしてしまうと，ひとつひとつ再設定していくのがかなり面倒です。

オプションで

/* Option *//*

* html .smallFont {
  font-family: 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
}
  
*:first-child+html .smallFont {
  font-family: 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
}

* html ul li dl,
* html ol li dl {
  display: inline;
}

*:first-child+html ul li dl,
*:first-child+html ol li dl {
  display: inline;
}

*/

バグ対策です。すべてのサイトで使うというものではないので，必要に応じて使うようにしています。詳細は関連するエントリを参考にしてください。

• li要素にdl要素を入れてみる
• IEで指定どおりのfont-sizeにならない

以前は clearfix の記述も入れていたのですが，最近ほとんど使わなくなりました。今は入れていません。

• flaotを解除する3つの方法

font-sizeに関するメモ

/*---------------------------------------------

Font Size

20px : 154%
18px : 139%
16px : 124%
15px : 116%  125%
14px : 108%  117%
13px : 100%  108%
12px :  93%  100%
11px :  85%   92%

---------------------------------------------*/

13pxを基準とした場合の，font-size の指定値をまとめてあります。基準値が違いますが，以下のエントリに書いた算出方法を使っています。

• font-size指定

補足

CSSファイルの分割 で書いたように，サイトのすべてのページに適用されるCSSを，default.css と common.css の2枚に書いています。

以前は，default.css で初期化したものを，common.css で再設定する部分が相当ありました。が，この二重の指定ははっきり言って無駄です。必要なものだけを残し，この重複をできるだけ省くようにしてきました。

また，「default.css はあらゆるサイトで使い回せるように」という視点で，default.css から common.css に移したものもあります。

参考

• Yahoo! UI Library: Reset CSS
• Yahoo! UI Library: Fonts CSS