ブラウザにはデフォルトのCSS（ユーザーエージェントスタイルシート）が設定されています。
このデフォルトCSSを適切にリセットすることで、デザインのズレを防ぎ、より自由にレイアウトを組むことができます。
この記事では、デフォルトCSSの仕組みから、リセットCSSの適用方法までを詳しく解説していきます！
デフォルトCSSとは？
ブラウザには、開発者がCSSを書かなくても最低限の見た目が整うように、標準で適用されるCSS（デフォルトCSS） があります。
例えば、次のような影響があります：
- h1～h6の見出しタグに自動で余白や太字が適用される
- ulやol（リスト）にはデフォルトのマーカーやインデント が設定されている
- p（段落）にはデフォルトの余白（margin）が適用 される
これらのデフォルトスタイルの影響で、ブラウザごとに表示が異なることがあります。
試してみよう！
次のコードを index.html にコピペして、ブラウザで開いてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>デフォルトCSSを確認しよう</title>
</head>
<body>
<h1>見出し（h1）</h1>
<p>段落（pタグ）はブラウザごとに余白が異なることがあります。</p>
<ul>
<li>リストの項目1</li>
<li>リストの項目2</li>
</ul>
</body>
</html>このページをChrome、Firefox、Edgeなど複数のブラウザで開いて比較してみましょう！
リセットCSSとは？
デフォルトCSSをそのまま使うと、ブラウザごとに見た目が異なることがあります。
これを防ぐために使うのがリセットCSSです！
リセットCSSを適用すると、ブラウザごとの違いをなくし、統一されたデザインを実現できます。
有名なリセットCSS
- Normalize.css（最も有名で推奨される）
- Eric Meyer’s Reset CSS（すべてのデフォルトスタイルを完全リセット）
- 独自のリセットCSS（必要な部分だけカスタマイズ可能）
試してみよう！
次のリセットCSSを適用して、どのように変わるか試してみましょう。
CSSファイル（reset.css）を作成
/* シンプルなリセットCSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
body {
font-family: sans-serif;
}HTMLファイル（index.html）に適用
<head>内に、次のコードを追加してください。
<link rel="stylesheet" href="reset.css">ブラウザで再読み込みすると、余白やリストのマーカーが消えて、デフォルトスタイルがリセットされていることがわかります！
リセットCSSのカスタマイズ
すべてをリセットすると不便なこともあるので、必要に応じて調整しましょう。
例：見出しのリセットを調整する
h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: bold;
}このようにすると、見出しのデフォルト余白だけを削除し、フォントの太さは維持 できます。
問題集
Q1. ブラウザごとに異なるデフォルトCSSを統一する方法は？
- HTMLに
<default>タグを追加する - リセットCSSを適用する
- ブラウザの設定を変更する
Q2. リセットCSSを適用すると、次のうちどの効果が得られる？
- すべてのCSSが無効化される
- ブラウザごとのスタイルの違いがなくなる
- HTMLタグが使えなくなる
✅ 答え: Q1→2, Q2→2
これで、デフォルトCSSの影響とリセットCSSの使い方が理解できます！
最終チェックをお願いします！
まとめ
- デフォルトCSSはブラウザごとに異なるため、見た目がズレることがある
- リセットCSSを適用することで、ブラウザ間の違いをなくせる
- Normalize.cssなどの既存のリセットCSSを活用すると便利
- 必要に応じてカスタマイズして、自分のスタイルに合わせるのが重要
コメントを残す