「見出しの上になぜか余白がある」「ボタンの見た目がブラウザで違う」——その正体は、ブラウザが最初から勝手につけているスタイルです。それをまっさらにするのがリセットCSS。結論から言うと、学習中はこの記事の10行ミニリセットをコピペすれば十分です。そもそも何なのかと、定番の配布3種の選び方をまとめます。
リセットCSSって何？
ブラウザは、CSSを1行も書かなくても<h1>を大きく、<ul>に黒丸を、<body>に余白をつけて表示します。この「標準スタイル」は親切な反面、自分でデザインを組みはじめると邪魔になります。しかも余白の量や見た目はブラウザごとに微妙に違う。
そこで、標準スタイルをいったん消して（＝リセットして）、まっさらな状態から書き始めるための下敷きがリセットCSSです。
コピペで使える10行ミニリセット
配布されているものを使う前に、まずはこれで十分です。style.cssの一番上に貼りつけてください。
*,
*::before,
*::after {
box-sizing: border-box; /* 幅の計算を直感的に */
}
body,
h1, h2, h3, h4, p,
ul, ol, figure {
margin: 0; /* 勝手な余白を消す */
}
img {
max-width: 100%; /* 画像がはみ出さない */
height: auto;
display: block;
}
button,
input,
textarea {
font: inherit; /* フォームだけ文字が違う問題を防ぐ */
}やっていることは4つだけ。幅の計算方法の統一（box-sizing）、標準余白の削除、画像のはみ出し防止、フォーム部品のフォント統一。初心者がつまずく「なぜか」の大半は、この4つで消えます。
配布されている定番リセットCSS3選
チームの現場や配布テンプレートでは、実績のあるリセットCSSがよく使われます。方向性の違う定番を3つ紹介します。
destyle.css
「ぜんぶ消す」に振り切った、日本の制作現場で人気のリセットCSS。見出しの大きさもボタンの見た目も完全にまっさらになるので、デザインを1から自分で組む前提のサイトに向いています。消しすぎに感じるか、気持ちいいと感じるかで好みが分かれます。
ress
「消す」と「ととのえる」のバランス型。標準スタイルの差をそろえつつ、box-sizingの統一などの実用的な下ごしらえも入っています。normalize.css（差をそろえる系の元祖）をベースに、リセット寄りに強化した立ち位置です。
sanitize.css
「標準の見た目は活かして、ブラウザ差だけ直す」ノーマライズ系の代表格。見出しの大きさやリストの黒丸は残るので、標準の見た目をベースに少しだけ整えたいページや、文章主体のサイトに向いています。
使い方：自分のCSSより「先」に読みこむ
どれを使う場合も、鉄則はひとつ。リセットCSSを自分のCSSより先に読みこむことです。CSSは後に書いたものが勝つので、順番が逆だと自分のスタイルがリセットされてしまいます。
<head>
<!-- 1. 先にリセットCSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/destyle.min.css">
<!-- 2. あとに自分のCSS -->
<link rel="stylesheet" href="style.css">
</head>ファイルをダウンロードして自分のcssフォルダに置いてもいいですし、上の例のようにCDN（配布サーバー）のURLを直接書けばダウンロードも不要です。
迷ったらこの使い分け
- 学習中・小さな自作ページ → この記事の10行ミニリセット。中身を全部把握できるのが強い
- デザインを1から全部組む → destyle.css。ボタンもフォームも完全にまっさら
- 標準の見た目を活かしたい・文章主体 → sanitize.css。差だけそろえてくれる
- その中間 → ress
まとめ
- リセットCSSは「ブラウザが勝手につけるスタイル」を消して、まっさらから書くための下敷き
- 学習中は10行ミニリセットのコピペで十分——box-sizing・余白・画像・フォームの4点だけ
- 配布物は方向性で選ぶ——ぜんぶ消すならdestyle.css、差だけそろえるならsanitize.css。自分のCSSより先に読みこむのが鉄則
「なぜか思いどおりにならない」の犯人を最初にまとめて退場させておく——それだけで、CSSはずっと素直な道具になります。