初期化ファイル

この違いを解消して，どのブラウザでも同じデザイン・レイアウトを実現させようとするのがCSSの初期化です。

ぼくも，様々なデザインの複数のサイトで使い回せるようにCSSを初期化するファイルを作っています。全てのサイトで使われるものは，ひとつにまとめておいて，新しくサイトを作るときは，それをコピーすればいいようにしておくのです。

• スタイル初期化：メモランダム

みんなでスタイルシートの初期化部分を晒してみたら面白いかも。

というわけで，ぼくもちょっと晒してみます。たいした代物じゃありませんが...。この機会にお気づきの点をご指摘いただけるとありがたいです。

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

body {
  background: #FFF;
  line-height: 1.4;
  font-family: sans-serif;
  font-size: 84%;
  color: #333;
}

h1 {
  line-height: 1.2;
  font-size: 136%;

h2 {
  line-height: 1.2;
  font-size: 129%;
}

h3 {
  line-height: 1.2;
  font-size: 122%;
}

h4 {
  margin-top: 1.5em;
  line-height: 1.2;
  font-size: 114%;
}

h5 {
  margin-top: 1.5em;
  line-height: 1.2;
  font-size: 107%;
}

h6 {
  margin-top: 1.5em;
  line-height: 1.2;
  font-size: 100%;
}

h3+h4,
h4+h5,
h5+h6 {
  margin-top: 1em;
}

p,
ul,
ol,
pre,
blockquote,
table {
  margin: 1em 0;
}

li {
  list-style: outside none;
}

table {
  border-collapse: collapse;
}

img {
  border: none;
}

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

code {
  font-family: "Courier New", Courier, monospace;
  padding-left: 0.4em;
  padding-right: 0.4em;
}

pre code {
  padding: 0;
}

基本的なところだけを指定し，細かいところはサイトごとに別のCSSファイルを作るようにしています。

見出しのfont-sizeは， font-size指定 | d-spica をもとにしています。

*（ユニバーサルセレクタ）を使うか。

* {
  margin: 0;
  padding: 0;
  border: none;
}

たとえば上のようにと書くと，全ての要素でmargin，paddingが0になり，borderがなくなります。とても簡単なのですが，うっかりすると，input，textarea要素のborderがなくなったり，submitボタンなどのpaddingも0になってしまい，改めて指定し直さなければならなくなります。フォームまわりなどのデザインはブラウザごとにそれぞれ工夫されていて，これを初期化してしまうのはちょっともったいないし，きれいに指定し直すのはなかなか手間がかかります。

最近では，*（ユニバーサルセレクタ）で初期化せず，必要な要素だけを選択して初期化の指定をすることも多いようです。

参考

CSSの初期化についてはコリスさんのところをよく読ませてもらっています。

• [CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス
• [CSS]スタイルの初期化(前編) -全称セレクタとhtml, body編 | コリス
• [CSS]スタイルの初期化(後編) -body内の個別タグ編 | コリス

追記

CSSの初期化ファイルは，逐次書き換えてきました。最新のものが以下でご覧いただけます。

• CSSの初期化ファイル