KOJIKA17

デフォルトスタイルシートから考える、リセットCSSの留意点

デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。

デフォルトスタイルシート

ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。
これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。

しかしWebサイトを制作する上では、このデフォルトスタイルシートが障害になります。
理由は、ブラウザによって差があり、IE6, IE7, モバイルまで含めると、指定されている値が違うものが多くあるからです。

私は、に各ブラウザのデフォルトスタイルシートを調べました。
現在のモダンブラウザでは、プロパティ名が違うものがありますが、概ね変わっていません。

具体的なデフォルトスタイルシートの例を挙げます。
以下は、平均的なデフォルトスタイルシートの一部です。

html {
  display: block;
  zoom: 1; /* IEのみ */
}

head, meta, link, style, script {
  display: none;
}

body {
  display: block;
  margin: 8px;
  zoom: 1; /* IEのみ */
}

div {
  display: block;
}

h1 {
  display: block;
  margin: 0.67em 0; /* Webkit, Firefoxは、margin-before: 0.67em; margin-after: 0.67em; */
  font-size: 2em;
  font-weight: bold;
  page-break-after: avoid; /* IEのみ */
}

h2,
:match(article,aside,nav,section) h1 {
  display: block;
  margin: 0.83em 0; /* Webkit, Firefoxは、margin-before: 0.83em; margin-after: 0.83em; */
  font-size: 1.5em;
  font-weight: bold;
  page-break-after: avoid; /* IEのみ */
}

h3,
:match(article,aside,nav,section) :match(article,aside,nav,section) h1 {
  display: block;
  margin: 1em 0; /* Webkit, Firefoxは、margin-before: 1em; margin-after: 1em; */
  font-size: 1.17em;
  font-weight: bold;
  page-break-after: avoid; /* IEのみ */
}

p {
  display: block;
  margin: 1em 0; /* Webkit, Firefoxは、margin-before: 1em; margin-after: 1em; */
}

ul { /* ol もほぼ同じ */
  display: block;
  margin: 1em 0; /* Webkit, Firefoxは、margin-before: 1em; margin-after: 1em; */
  padding-start: 40px; /* IEは、padding-left: 30pt; Operaは、padding-left: 40px; */
  list-style-type: disc;
  list-style-position: outside;
}

li {
  display: list-item;
}

dl {
  display:block;
  margin: 1em 0; /* Webkit, Firefoxは、margin-before: 1em; margin-after: 1em; */
}
dt {
  display: block;
}
dd {
  display:block;
  margin-left: 40px; /* Webkit, Firefoxは、margin-start: 40px; */
}

img {
  zoom: 1; /* IEのみ */
}

strong {
  font-weight: bold;
}

em {
  font-weight: italic;
}

あくまで平均的な一部の例ですが、デフォルトスタイルシートを知ることで、的確にデフォルトスタイルシートの全てをリセットすることが可能です。
ただ注意してほしいのは、デフォルトスタイルシートは考えられて作られている、ということです。

デフォルトスタイルシートは無意味に指定されているか?

デフォルトスタイルシートは、多くのブロック要素に上下のmarginが指定されており、paddingの指定は意外と少ないです。

なぜ一方方向ではなく、上下にmarginが指定されているのか。
それについて言及されている資料は見つかりませんでしたが、おそらくmarginの特性を活用するためだと思います。

要素が隣接した場合や、divが入った場合でも、marginの相殺によって適度に間隔を保つことができます。
以下は、その例です。

#one

<div id="one">
  <h1>#one</h1>
  <p>demo</p>
  
  <div class="contents">
    <h2>h2</h2>
    <p>demo1</p>
		
    <div class="demo">
      <p>demo2</p>
      <p>demo3</p>
    </div>
		
    <ul>
      <li><p>1</p></li>
      <li>
        <p>2</p>
        <div class="demo">
          <p>3</p>
        </div>
      </li>
      <li><p>4</p></li>
    </ul>
	
  </div>
</div>

#two

<div id="two">
  <h1>#two</h1>
  <p>demo</p>

  <h2>h2</h2>
  <p>demo1</p>
  <p>demo2</p>
  <p>demo3</p>
	
  <ul>
    <li><p>1</p></li>
    <li>
      <p>2</p>
      <p>3</p>
    </li>
    <li><p>4</p></li>
  </ul>
</div>

デフォルトスタイルシート marginのデモ

上記は違うHTMLに見えますが、基本構造が同じなので、見え方が一緒になります。
このようにデフォルトスタイルシートは、構造が同じであれば間隔が一定になります。

marginの説明でしたが、これは他のプロパティにもいえることです。
デフォルトスタイルシートは、適当にスタイルが付いているわけではありません。
便利なCSSは、そのまま活用することもできます。

デフォルトスタイルシートを生かすメリット

デフォルトスタイルシートを生かした例を紹介します。

/* Reset CSS */
h1 {
  margin: 0;
  padding:0;
  font-size: 100%;
  font-weight :normal;
}

/* header */
#header h1 {
  width: 240px;
  float: left;
  font-weight :bold;
}

よくあるCSSに見えますが、上のソースは無駄だらけです。

IE8, IE9からFirefox, Chromeなどのモダンブラウザの平均的なデフォルトスタイルシートは以下のようになっています。

h1 {
  display: block;
  margin: 0.67em 0;
  font-size: 2em;
  font-weight: bold;
  page-break-after: avoid; /* IEのみ */
}

h1のデフォルトスタイルシートでは、paddingの指定がないので、この記述は不要です。

またfont-weight:normal;を指定した後に、font-weight:bold;を指定しています。
この場合は、デフォルトスタイルシートをそのまま生かすことができます。

リセットCSSを最小限に抑え、先ほどの例を書き直すと以下のようになります。

/* Reset CSS */
h1 {
  margin: 0;
  font-size: 100%;
}

/* header */
#header h1 {
  width: 240px;
  float: left;
}

デフォルトスタイルシートを理解し、生かすことができれば、見通しの良いコードになります。
使い回せそうなプロパティがあるなら、あえてCSSをリセットをしない選択肢も考えてみるべきです。

デフォルトスタイルシートの差

デフォルトスタイルシートは、古いブラウザなどを含めると、異なる部分が多く存在します。
スタイルの違いを埋めながら必要ないCSSを、リセットしていくのは大変です。

このブラウザごとの差を埋めてくれるものに、Normalize.cssというのがあります。
デフォルトスタイルシートを維持したまま、ブラウザごとの整合性をとっているので参考になります。

Normalize.css

Normalize.cssは、リセットCSSとして扱われることが多いですが、私は疑問を感じています。
リセットCSSというよりも、各ブラウザのデフォルトスタイルシートの差を抑制したCSSであり、デファクトスタンダードというべきでしょう。

デファクトスタンダード

標準化機関等が定めた規格ではなく、市場における競争や広く採用された「結果として事実上標準化した基準」を指す。

デファクトスタンダード - Wikipedia

のNormalize.cssの最新は、IE8以上に対応しています。
IE6,7などの古いブラウザに対応したNormalize.cssを使用したい場合は、v1.0.1で見ることができます。

Normalize.css: Make browsers render all elements more consistently.

Normalize.cssはそのまま使うべきか?

Normalize.cssは5つの特徴を持っています。

  1. 多くのリセットCSSとは違い、デフォルトスタイルシートは保持します。
  2. 多くのHTML要素を正常化します。
  3. バグとブラウザの不整合を修正します。
  4. 巧みな改良でユーザビリティを改善します。
  5. コード内のコメントに、詳細な説明を入れています。

各ブラウザの差を埋めるのに、必要最低限の記述しかありません。
素晴らしいパフォーマンスを提供しているNormalize.cssですが、これをそのままリセットCSSとして使用するのは、難しいでしょう。
Normalize.cssは、あくまで各ブラウザのスタイルの実装を埋める『潤滑油』として使用、または参考にするのがいいかもしれません。

まとめ

リセットCSSは、各要素をモジュールとして再構築することに近いかもしれません。
無駄な記述をしていないか、立ち返るきっかけになれば幸いです。