CSSリセットとベーススタイル

ブラウザにはデフォルトスタイルがある

CSSを何も書かなくても、ブラウザはHTMLに最低限のスタイルを適用します。

CSSを一切書いていないのに、見出しは大きく太字になり、リストには点がつき、要素の間に余白があります。

これはブラウザが持っているデフォルトスタイル（ユーザーエージェントスタイルシート）のおかげです。

もっと詳しく

ブラウザのデフォルトスタイルは、開発者ツール（F12）の「スタイル」パネルで確認できます。

user agent stylesheet と表示されているものがデフォルトスタイルです。

デフォルトスタイルはブラウザごとに違う

このデフォルトスタイルは、ブラウザごとに微妙に異なります。

主要な値はほぼ同じですが、フォームの要素（ボタン、入力欄）などで違いが出ることがあります。

同じHTMLなのにブラウザによって見た目が揃わなかったり、開発者の意図したデザインの邪魔になる場合があります。 この問題を解決するのがCSSリセットです。

CSSリセットで揃える

CSSリセットの考え方はシンプルです。

ブラウザのデフォルトスタイルをまっさらにしてから、自分でスタイルを定義する。

『グローバルCSSとは何か』 レッスンで例示したグローバルCSSを再度確認してみましょう。

/* 1. CSSリセット */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
 
/* 2. ベーススタイル */
body { font-family: system-ui, sans-serif; line-height: 1.6; }
 
/* 3. デザイントークン（CSS変数） */
:root { --background: #ffffff; --text: #171717; }
 
/* 4. ダークモードの色定義 */
.dark { --background: #171717; --text: #ffffff; }
 
/* 5. レスポンシブなサイズ定義 */
h1 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); }

/* 1. CSSリセット */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

この1行がCSSリセットの役割を担います。

よく使われるリセットコードを読んでみよう

すべての要素を選択する（ * セレクタ）

*（アスタリスク）はユニバーサルセレクタと呼ばれ、ページ上のすべての要素を選択します。

* {
  /* ここに書いたスタイルは、すべての要素に適用される */
}

疑似要素も含める（ *::before, *::after セレクタ）

::before と ::after は、要素の前後にコンテンツを追加するための疑似要素です。

* だけでは疑似要素は含まれないため、*::before と *::after も一緒にリセットします。

サイズ計算を直感的にする（ box-sizing: border-box プロパティ）

これはCSSリセットの中でも特に重要なプロパティです。

CSSのデフォルトでは、width: 200px と指定しても、パディングやボーダーを足した値が実際の幅になります。

content-box（デフォルト）だと、パディングを増やすたびに要素がどんどん大きくなります。border-box にすると、指定した幅の中にパディングが含まれるので、サイズが予測しやすくなります。

赤い要素（content-box）の方が広くなっていますね。width: 200px にパディングとボーダーが足されているからです。

青い要素（border-box）は width: 200px の中にパディングとボーダーが含まれているので、指定通りの幅になっています。

CSSのデフォルトは赤い要素（content-box）ですが、青い要素の手法（border-box）が直観的であるため、こちらを利用することが多いです。

デフォルトの余白をリセットする（ margin: 0 プロパティ）

ブラウザのデフォルトスタイルでは、body、h1〜h6、p、ul などに余白（margin）が設定されています。

margin: 0 でこれをリセットすることで、すべての余白を自分でコントロールできるようになります。

リセットしてから、好みの余白を自分で追加していきます。

リセットの次は「ベーススタイル」で土台を整える

CSSリセットで「まっさら」にしたら、次はサイト全体の土台を整えます。これがベーススタイルです。

フォントを統一する

body {
  font-family: system-ui, sans-serif;
}

system-ui は、ユーザーのOS標準フォントを使う指定です。WindowsならSegoe UI、macOSならSan Franciscoなどが自動的に選ばれます。

フォントが統一されることで、どの環境でも読みやすい見た目になります。

行間を読みやすくする

body {
  line-height: 1.6;
}

line-height: 1.6 は、文字サイズの1.6倍の行間を確保します。行間が狭いと文章が読みにくくなるため、本文には1.5〜1.8程度の値がよく使われます。

次のステップ

CSSリセットもベーススタイルも、前回学んだ通り「サイト全体の土台」としてグローバルCSSに書きます。 土台ができたところで、次は色やサイズを1箇所で管理できる CSS変数（カスタムプロパティ） を学びましょう。