CSS 入門

CSS リセット（Reset）とノーマライズ（Normalization）

ブラウザにはHTML要素に対してあらかじめ「デフォルトスタイル（User Agent Stylesheet）」が組み込まれていますが、これらのスタイルはブラウザの種類によって大きく異なります。この不一致により、同じコードでもプラットフォームが異なるとウェブサイトの見た目がバラバラになってしまうことがあります。

CSSリセット（CSS Reset）とノーマライズ（CSS Normalization）は、こうしたブラウザ間の差異を取り除き、より予測可能な基盤の上でスタイリングを行うための技術です。

1. ブラウザのデフォルトスタイルを理解する

すべてのブラウザは、HTML要素に対して独自のデフォルトスタイルを適用しています。

例えば：

  • 見出し (<h1> 〜 <h6>): ブラウザごとにフォントサイズやマージンが異なります。
  • 段落 (<p>): デフォルトでマージンが付与されています。
  • リスト (<ul>, <ol>): パディングや箇条書きの記号、数字の設定が異なります。

これらのデフォルトスタイルは、Chrome、Firefox、Safari、Edgeといったブラウザ間、あるいは同じブラウザのバージョン間でも一貫性がありません。

具体例を見てみましょう：
シンプルな <h1> 見出しにおいて、あるブラウザでは「フォントサイズ 32px、上マージン 20px」でレンダリングされる一方で、別のブラウザでは「フォントサイズ 36px、上マージン 24px」となることがあります。こうした細かな差異が積み重なることで、深刻なレイアウト崩れを引き起こします。

もう一つの例は button 要素です。ボタンの外観はブラウザ間で劇的に異なります。デフォルトのボーダー、背景色、パディングを追加するブラウザもあれば、そうでないものもあります。これらすべてのプラットフォームでデザインを統一することは、開発者にとって大きな挑戦となります。

2. なぜ CSS リセットやノーマライズが必要なのか

主な目的は、ブラウザ間の不一致を排除または軽減し、カスタムスタイルのためのクリーンな「白板（ホワイトボード）」を提供することです。これにより、ユーザーがどのブラウザを使用していても、ウェブサイトが意図した通りに表示され、機能することを保証できます。

リセットやノーマライズのスタイルシートがない場合、ブラウザ特有の癖を補正するために膨大な時間をデバッグと調整に費やすことになります。これは、特に複雑なレイアウトを扱う際に非常に非効率でストレスのかかる作業となります。

3. CSS リセット (CSS Reset)

CSS リセットは、ブラウザのデフォルトスタイルを完全に剥ぎ取ることを目的としています。すべての要素を一貫した基準線にリセットし、通常はマージン、パディング、ボーダー、その他のプロパティをゼロまたは共通の値に設定します。

3.1 CSS リセットの仕組み

CSS リセットは通常、全称セレクタ（*）を使用するか、大量のHTML要素に対して基本的なスタイルを一括適用します。

以下は簡略化された CSS リセットの例です：

/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* 古いブラウザのために HTML5 要素の表示ロールをリセット */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

コードの解説：

  • * { margin: 0; padding: 0; border: 0; }: リセットの核心です。ページ上のすべての要素から外辺余白（マージン）、内辺余白（パディング）、境界線（ボーダー）を削除します。
  • font-size: 100%; font: inherit;: フォントサイズをルート要素に対して相対的にし、親要素からフォント属性を継承するようにします。
  • vertical-align: baseline;: すべての要素の垂直方向の整列をベースラインに設定し、共通の起点とします。
  • article, aside, details, ... { display: block; }: HTML5のセマンティック要素がブロックレベル要素として表示されるようにします。これは、これらの要素を認識しない古いブラウザに必要です。
  • ol, ul { list-style: none; }: リストのデフォルトの記号や数字を削除します。
  • table { border-collapse: collapse; border-spacing: 0; }: テーブルのボーダーを一本に統合し、セル間の隙間をなくします。

3.2 主要な CSS リセットライブラリ

  • Normalize.css: 技術的にはノーマライズですが、その網羅性からリセット目的でも多用されます。
  • Reset.css (Eric Meyer): 非常に有名で広く使われているリセットライブラリです。
  • sanitize.css: ブラウザの有用なデフォルト値を完全に削除するのではなく、維持しつつ調整するライブラリです。

3.3 CSS リセットのメリット・デメリット

メリット：

  • スタイリングのための完全にクリーンな状態を提供できる。
  • ほぼすべてのブラウザ間の不一致を解消できる。

デメリット：

  • すべてのデフォルトスタイルが消えるため、すべての要素に対して一からスタイルを書く必要がある。
  • 注意深く扱わないと、意図しない表示結果を招くことがある。

4. CSS ノーマライズ (CSS Normalization)

CSS ノーマライズは、ブラウザのデフォルトスタイルを完全に削除するのではなく、一貫性を高めることを目的としています。有用なデフォルトスタイルは残しつつ、不一致やバグを修正します。

4.1 CSS ノーマライズの仕組み

CSS ノーマライズは、ブラウザ間で不一致があることが知られている特定の要素や属性をターゲットにします。そして、デフォルトの外観や雰囲気は維持しつつ、それらの差異を「標準化」するためのスタイルを適用します。

以下は簡略化された CSS ノーマライズの例です：

/* CSS Normalization */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

article, aside, footer, header, nav, section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* 他の要素も同様に続く */

コードの解説：

  • html { font-family: sans-serif; }: ドキュメント全体のデフォルトフォントファミリーを設定し、ブラウザ間の一貫性を確保します。
  • html { -ms-text-size-adjust: 100%; ... }: モバイルデバイスでのテキストサイズの自動調整を防ぎ、一貫したサイズを維持します。
  • body { margin: 0; }: body要素のデフォルトマージンを削除します。
  • h1 { font-size: 2em; margin: 0.67em 0; }: h1要素のフォントサイズとマージンを標準化します。

4.2 主要な CSS ノーマライズライブラリ

  • Normalize.css: 最も有名で、現代のWeb開発において標準的に使用されるライブラリです。

4.3 CSS ノーマライズのメリット・デメリット

メリット：

  • 有用なデフォルトスタイルを保持できる。
  • ブラウザ間の不一致やバグを修正できる。
  • CSSリセットに比べて、一から書く必要のあるスタイルが少なくて済む。

デメリット：

  • すべてのブラウザの不一致を完全になくせるわけではない。
  • ブラウザのデフォルトスタイルに対するより深い理解が必要。

5. CSS リセットとノーマライズのどちらを選ぶべきか

どちらを選択するかは、プロジェクトの具体的な要件に依存します。

CSS リセットを使用すべきケース：

  • すべての要素のスタイルを完全にコントロールしたい。
  • プロジェクトを一から開始し、完全に「白紙」の状態から作りたい。
  • 使用しているデザインシステムやフレームワークがリセットを要求している。

CSS ノーマライズを使用すべきケース：

  • 有用なデフォルトスタイルを活用したい。
  • すでにいくつかのスタイルが存在するプロジェクトを扱っている。
  • CSSリセットよりも軽量なソリューションを求めている。

多くの場合、Normalize.css のようなライブラリを使用するのが、一貫性の確保と有用なデフォルトスタイルの維持のバランスが取れているため、良い出発点となります。

6. 実践ケーススタディ

CSSリセットとノーマライズの違いを具体的な例で見てみましょう。

6.1 ケース 1：見出し (Headings)

リセットやノーマライズがない場合、見出し (<h1> 〜 <h6>) はブラウザによってフォントサイズ、マージン、太さが異なります。

  • CSS リセット: すべての見出しの font-size、margin、font-weight を共通の値（例：font-size: 1em; margin: 0; font-weight: normal;）に設定します。望む外観にするには一からスタイルを書く必要があります。
  • CSS ノーマライズ: 見出しのフォントサイズとマージンを標準化し、ブラウザ間での一貫性を保ちつつ、<h1> から <h6> までの相対的なサイズ差を維持します。微調整だけで済みます。

6.2 ケース 2：リスト (Lists)

リセットやノーマライズがない場合、リスト (<ul>, <ol>) はブラウザによってパディングや箇条書きのスタイルが異なります。

  • CSS リセット: リストのすべてのパディングと記号（ドットや数字）を削除します（例：padding: 0; list-style: none;）。カスタムの記号や間隔を一から作成する必要があります。
  • CSS ノーマライズ: リストのパディングとスタイルを標準化して一貫性を持たせつつ、デフォルトの基本外観を維持します。

6.3 ケース 3：ボタン (Buttons)

リセットやノーマライズがない場合、ボタン (<button>) の外観（ボーダー、背景色、パディング）はブラウザ間で劇的に異なります。

  • CSS リセット: ボタンのすべてのデフォルトスタイルを削除します（例：border: none; background-color: transparent; padding: 0;）。完全に独自のボタンデザインを構築する必要があります。
  • CSS ノーマライズ: ボタンの外観を標準化して一貫性を高めつつ、いくつかの基本的なボタンらしいスタイルを残します。

7. CSS リセットまたはノーマライズの適用方法

CSSリセットやノーマライズを適用するには、スタイルシートの一番最初で対応するCSSファイルをインポートするだけです。これにより、リセット・標準化スタイルが自分自身のカスタムスタイルよりも先に適用されることが保証されます。

<!DOCTYPE html>
<html>
<head>
  <title>マイ・ウェブサイト</title>
  <link rel="stylesheet" href="reset.css"> 
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
</body>
</html>

この例では、reset.css（または normalize.css）がカスタムスタイルを含む style.css よりも前に読み込まれています。