Lesson3-1：ボックス配置の基礎を理解しよう
Lesson3-2：ボックスサイズを変更しよう
Lesson3-3：ボックスを自在に配置しよう
Lesson3-4：画像を自在に配置しよう
Lesson3-5：画像のスタイルを変更しよう
Lesson3-6：背景画像を設定しよう
Lesson3-7：リンクボタンを設置しよう
Lesson3-8：リストとテーブルのスタイルを変更しよう
Lesson3-9：CSS変数を理解しよう
Lesson3-☆1：コピペして使える！カードレイアウト集
Lesson3-☆2：見た目が良くて使いやすいHTML+CSSテンプレート6選
Lesson3-☆3：CSSのリセット＆ノーマライズとは？ ◁今回はココ
Webサイトを作成する際、「同じHTMLやCSSを記述しているのに、ブラウザごとに見た目が異なる」 という経験をしたことはありませんか？
例えばGoogle Chromeでは適切に表示されていたボタンのデザインが、FirefoxやSafariで確認すると余白がずれていたり、フォントサイズが微妙に異なっていたりすることがあります。
このような違いが生じる理由は、各ブラウザがデフォルトで持っている「スタイルシート（User-Agent Stylesheet）」が異なるからです。
ブラウザは開発者がCSSを指定しなくても、見出し・段落・リストなどのHTML要素に独自のデザインを適用します。しかしこのデフォルトスタイルの違いが、開発者にとって意図しないレイアウト崩れを引き起こす原因になるのです。
こうした問題を解決し、どのブラウザでも統一されたデザインを実現するために用いられるのが、「CSSリセット」 や 「ノーマライズCSS」 です。
これらの手法を使うことでブラウザごとのスタイルの違いを抑え、より一貫性のあるデザインを構築することができます。
本記事では、CSSリセットとノーマライズCSSの違いを解説し、それぞれの特徴や使い方、どのような場合にどちらを選べばよいのかについて詳しく紹介します。
初心者の方でも理解しやすいように、実際のコード例を交えながら解説するので、ぜひ最後まで読んでみてください！
本記事では以下の４つの内容について紹介します。
- ブラウザごとのデフォルトスタイルの違い（無料）
- CSSリセットとは（会員向け）
- ノーマライズCSSとは（会員向け）
- どちらを使用するべきか（会員向け）
<<前のページ
HTML/CSSの記事一覧
次のページ>>
ブラウザごとのデフォルトスタイルの違い
Webサイトを作成する際には、ブラウザごとのデフォルトスタイルの違いを理解することがとても重要です。
同じHTMLとCSSを記述しても、ブラウザによって表示が微妙に異なることがあります。
これは各ブラウザが持っている「デフォルトスタイルシート（User-Agent Stylesheet）」が影響しているためです。
ブラウザのデフォルトスタイルとは
ブラウザは開発者が何もCSSを指定しなくても、各HTML要素に対して既定のスタイルを適用します。
例えば見出し（h1〜h6）、段落（p）、リスト（ul, ol）、ボタン（button）などには、あらかじめブラウザ側でデザインが施されています。
このデフォルトスタイルはブラウザごとに異なるため、意図しないレイアウト崩れの原因となることがあります。
具体的なデフォルトスタイルの違い
以下に、代表的なデフォルトスタイルの違いをいくつか紹介します。
見出し（h1タグ）のフォントサイズやマージン
- Google Chrome: フォントサイズ 32px、上下マージン 44px
- Firefox: フォントサイズ 32px、上下マージン 92px
- Edge: フォントサイズ 32px、上下マージン 44px
- ブラウザによって余白が微妙に異なるため、統一しないとデザインが崩れる可能性がある
リスト（ul, ol）のスタイル
- ChromeとEdgeではデフォルトで左側にマージンが設定されている
- Firefoxではパディングで余白を調整している
- Safariではリストのマーカー（黒丸・番号）の位置が微妙に異なる
ボタン（button）のデフォルトスタイル
- Chromeでは、ボタンにデフォルトでグレーの背景色とボーダーが適用される
- Firefoxでは、背景色はやや薄めで、ボーダーが異なる
- Safariでは、角丸（border-radius）が適用されることがある
- 何も指定しないと、ボタンのデザインがブラウザごとに異なって見える
デフォルトスタイルの違いを確認する方法
ブラウザごとのデフォルトスタイルの違いを確認するには、開発者ツール（DevTools）を使用するのが便利です。
以下の手順で自分の使用しているブラウザのデフォルトスタイルをチェックできます。
Google Chrome の場合
- キーボードの F12キー または Ctrl + Shift + I（Windows） / Cmd + Opt + I（Mac） を押して開発者ツールを起動
- 「要素（Elements）」タブを開き、HTMLの各要素を選択
- 「Styles」パネルで、「User-Agent Stylesheet」と表示されている部分がデフォルトスタイル
Firefox や Edge の場合
- 開発者ツールの使い方はChromeとほぼ同じ
- F12キーを押してツールを開き、「スタイル（Styles）」タブで確認
Safari の場合
- Safariの「開発」メニューを有効にする必要がある
- 環境設定 → 詳細 → 「メニューバーに”開発”メニューを表示」にチェックを入れる
- 開発メニューから「要素を検証」を選択し、デフォルトスタイルを確認
ここまででブラウザごとのデフォルトスタイルの違いについて学びました。
同じHTMLやCSSを記述しても、ブラウザによって表示が異なる理由は、各ブラウザが独自に持つ「デフォルトスタイルシート」が原因であることが分かりました。
では、こうしたスタイルの違いをどのように統一すればよいのでしょうか？
次のセクションでは、この問題を解決するための2つの主要な方法である 「CSSリセット」 と 「ノーマライズCSS」 について詳しく解説していきます。