CSS ・ CSSの記法
リセットCSS
ブラウザごとの初期スタイルの違いをなくす
ブラウザが最初から持っているスタイル（user agent stylesheet）は、ブラウザごとに少しずつ違います。その差をなくすために、自分の CSS より先に読み込んでおくのがリセットCSSです。
01
サンプルコード
HTML
1<h1>見出し</h1>
2<p>段落の文章です。</p>
3<ul>
4 <li>リスト1</li>
5 <li>リスト2</li>
6</ul>
CSS
1/* とても小さなリセットCSSの例 */
2*,
3*::before,
4*::after {
5 box-sizing: border-box;
6}
7h1, p, ul {
8 margin: 0;
9 padding: 0;
10}
11h1 {
12 font-size: inherit;
13}
14ul {
15 list-style: none;
16}
02
実行結果
ブラウザでの表示見出しの大きさ、上下の余白、リストの点と左の余白など、ブラウザが付けていたスタイルが消えます
03
解説
すべてのブラウザには user agent stylesheet（ユーザーエージェントスタイルシート、UAスタイルシート）と呼ばれるデフォルトのスタイルが付属しています。これは表示する Web ページのすべてに適用される仕様で、ネット上に公開されています。CSS を何も書かなくても、h1 が大きく太字になったり、ul に点が付いたりするのはこのためです。
この仕様から、行間やフォント周りの見た目がブラウザごとに微妙に異なります。その差異をなくすためにリセットCSSが考案されました。 いくつかの種類があり、有志のエンジニアが作成・公開しています。
使用方法は、スタイルの一番上に記述 し、ほかのスタイルより前にページに適用させることです。別ファイルのリセットCSSを使うときは、自分の style.css より先に link で読み込みます。
04
応用例・注意点
主なブラウザの UA スタイルシート
| ブラウザ | 説明 |
|---|---|
Chrome, Opera | Chromium UA stylesheet（chromium.googlesource.com の html.css） |
Firefox | Mozilla UA stylesheet（searchfox.org の mozilla-central/source/layout/style/res/html.css） |
Safari | WebKit UA stylesheet（trac.webkit.org の Source/WebCore/css/html.css） |
リセットCSSを自分の CSS より先に読み込む
後から読み込んだ CSS が優先されるので、リセットCSSを先に書き、その上に自分のスタイルを重ねます。
HTML
1<head>
2 <meta charset="UTF-8">
3 <title>トップページ</title>
4 <!-- 1. リセットCSS -->
5 <link rel="stylesheet" href="css/reset.css">
6 <!-- 2. 自分のCSS -->
7 <link rel="stylesheet" href="css/style.css">
8</head>
注意点
- 01読み込む順番を逆にすると、自分で書いたスタイルがリセットCSSで打ち消されてしまいます。
- 02リセットCSSには、余白などをすべて消す「消すタイプ」（destyle.css など）と、ブラウザ間の差だけをそろえて初期スタイルは残す「整えるタイプ」（normalize.css など）があります。案件ではどれを使っているか最初に確認しましょう。
- 03リセットCSSを使うと見出しやリストの見た目も消えるので、必要なスタイルは自分で書き直します。
05
リセットCSSの選び方
リセットCSSは、案件によっては使うものが 指定されることもあります。制作会社や制作者によっても変わってくるため、種類と特徴を把握しておきましょう。
| リセットCSS | 特徴 |
|---|---|
| Normalize.css | ブラウザ間の一貫性を保ちながら、デフォルトスタイルを整えるためのリセットCSS。初期スタイルは残す「整えるタイプ」 |
| A (more) Modern CSS Reset | すべてをリセットすることはしない、モダンブラウザ用に最適化されたリセットCSS |
| ress.css | Normalize.css をカスタマイズしたリセットCSS |
| destyle.css | スタイルをごっそりリセットするCSS。余白や見出しの大きさなどもすべて消す「消すタイプ」 |
迷ったときは
- 「destyle.css」か「A (more) Modern CSS Reset」がおすすめです。
- 自分が使いやすいスタイルだけを集めた、独自のリセットCSSを作る のも良い方法です。
- どれを使う場合も、読み込む順番は「リセットCSS → 自分の style.css」です。順番を間違えないようにしましょう。