初心者向けリセットCSSを自作する手順まとめ

スタイルシートに記述したコードを読み込ませる前にブラウザがデフォルトで持つCSSをリセットする用途でリセットCSSは用いられています。

今回はリセットCSSの基本的なことから自作する手順まで説明します。リセットCSSでリセットされているセレクタが「なぜ・どのように」リセットあるいは再定義されているか知ることによって、スタイルシートの理解をより深めてみましょう。

目次閉じる

リセットCSSとは

リセットCSSとは、冒頭でも述べたとおり各ブラウザがデフォルトで持つCSSをリセットするために用いるCSSのことです。

リセットCSSが必要になる理由

なぜリセットCSSが必要になるかというと、ユーザーがChrome・FireFox・IEといったブラウザのどれを使ってもこちらが意図した表示を提供するためです。「リセットCSSを使うと制作が楽になるから」という理由ももちろんありますが、ブラウザ配慮はユーザー配慮であることを認識しておきましょう。

リセットCSSを使用する際の問題点

もちろんリセットCSSを使用すると問題も生じます。例えば次の3つの問題です。

未使用時に比べてCSSの記述量が多くなる
表示に無関係の無駄な記述が含まれてしまう
ブラウザのデフォルトのCSSを有効活用できない

リセットCSSの記述分だけファイル容量は多くなってしまいます。同じ表示を実現するためにスタイルシートに記述する量がリセットCSS使用時の方が多くなってしまうと見積もれるならばリセットCSSを本当に使用すべきなのかもう一度考え直しましょう。

また、nomalize.cssのように広く使用されることを念頭に入れて設計されたリセットCSSには、制作しているプロダクトの表示には無関係の記述が含まれがちです。より完成度の高いプロダクトをつくるためには、リセットCSSに無駄な記述がないかチェックして必要に応じてその記述を削除しておくことも考えなければなりません。

さらに、input要素やselect要素のように各ブラウザのデフォルトの装飾がある程度完成されていることもあります。各ブラウザのデフォルトの装飾を活かせるなら活かす選択もときには必要です。

代表的なリセットCSS

代表的なリセットCSSは次の5つです。

YUI LibraryのリセットCSSとEric Meyer’s Reset CSSはHTML5に未対応だったりと最近のスタイルシートまわりの事情が考慮されてないので最近は使う人があまりいません。代わってHTML5 Doctor Reset CSSがよく利用されるようになりました。

一方、最新のブラウザ事情やHTMLの仕様が考慮され、ブラウザの持つデフォルトのスタイルを活かし、さらには定期的なアップデートが行われているnomalize.cssとsanitize.cssは厳密に言えば、リセットではなく型を整えている（あるいは再定義している）と言った方が適切かもしれません。ですが、完全にリセットするのではなくブラウザのデフォルトのスタイルを活かすメリットが大きく、最近の開発ではこの2つが選ばれています。

とりあえず参考にnomalize.cssの中身を見てみると、行数にして400行近くあります。実際の使用時には圧縮するとしてもformに関する記述やprogressタグなど使用場面が限られている要素の記述が含まれ、すべて毎回読み込むのはあまり適切ではないかもしれません。（nomalize.cssは不必要でない部分は編集して使用してもライセンス上問題ありません。）

nomalize.cssで例えばh1タグについての記述をみると

[css]
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
[/css]

と指定されており、制作するプロダクトによってはこのような記述が煩わしく感じるかもしれません。なのでスタイルシート設計の前には工期・工数・記述量などをよく考えた上でリセットCSSを選択するのが良いと思います。

リセットCSSの自作手順

でもリセットCSSのいいとこどりもしたいときはあるかもしれません。ごく一部だけデフォルトのスタイルを活かすこともあると思います。そこでリセットCSSを自作できるようになっておくとプロダクトごとに柔軟なCSS設計が行えます。ということでリセットCSSを自作していきましょう。

リセットCSSを自作するときのステップは大まかに言えば

リセットしたいタグの選択
使用しないタグの除外
仕上げのCSS圧縮

の3つになります。

classをほとんどのHTMLタグに割り当てて文書内で使いまわせるようにHTMLを組んでいる場合は、HTML5 Doctor Reset Stylesheetを参考に使わないタグのみリセットCSSから削除した上でタグのデフォルトスタイルを完全にリセットしてしまった方が効率的です。一方で、デフォルトのブラウザのスタイルシートを活かしたいタグにはリセットCSSを当てないようにします。

以下に、リセットする場合にどのようにCSSのプロパティを当てていくか、そして使用しないタグの除外の方法、圧縮の方法について最低限ですが書いてみます。

margin、padding、borderのリセット

CSSを一切記述せずにページを公開したことがある人なら分かると思いますが、デフォルトではmarginやpaddingが各タグに割り振られています。これを一旦ゼロにリセットしてあげることで「あれ？ここに変な余白があるぞ、どっかから継承されてる……？」なんてことから解放されます。

HTML5 DoctorのリセットCSSではこの継承問題を取り除くためにあらゆるタグに以下のようにmargin: 0; padding: 0; border: 0;が指定されています。

[css]
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
[/css]

文字のスタイルをそろえる

デフォルトでは見出しタグごとにフォントサイズが異なります。デザインによっては見出しタグのフォントサイズをそろえたいこともあると思います。フォントサイズをそろえるにはHTML文書内で使用されるタグすべてにfont-size: 100%;と指定してあげて親要素からフォントサイズが継承されるようにしてあげます。

太字を使わないのであればフォントの太さもnormalにそろえておくと、strongタグなどの装飾が楽になります。また、インライン要素内でのテキストや画像などの垂直方向の揃え位置を指定するvertical-alignをそろえておくのも忘れないように。

行の高さを揃える

行の高さline-heightもそろえておいた方がCSSを組みやすいです。HTML5 Doctorの記述では以下のようにbodyにline-heightに1を指定しています。

[css]
body {
line-height: 1;
}
[/css]

ここで単位なしの値でline-heightを指定していることに注意してください。emのような単位を指定すると子孫要素で行の高さが意図していない高さになってしまうことがあります。

box-sizingを指定する

paddingとborderを要素幅に含ませることができるbox-sizing: border-box;を指定します。HTML5 Doctorの方には記述されていません。box-sizingを指定すればCSS組みがかなり楽になり、記述も相対的に少なく済むようになります。

[css]
selector {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[/css]

不要な記述を削除する

既存のリセットCSSをカスタマイズしている場合はリセットする必要のない不要な記述を削除します。

例えば、HMTL5 DoctorのリセットCSSにはhgroupが含まれています。hgroupは廃止される予定のHTMLタグであり、概ねHTML内で使われてないはずなのでリセットする意味はまずありません。保守性と拡張性を考慮した現実的なHTML設計をするのであれば他にもHTML内で使用しないタグもあるはずなので未使用のタグもこの時点で削除します。

また、inputやselectといった特定の用途を持ったタグのリセットは多くのページで不要になる可能性があります。フォームの送信を伴うページ以外で必要なければ削除してもいいかもしれません。（モバイル開発では逆に削除すると困ることの方が多いです。）

リセットCSSを圧縮する

この時点でプロダクトに必要なリセットCSSだけが記述されていると思います。リセットCSSの修正をする機会はプロジェクトの公開後はほとんどないはずなのでリセットCSSの部分だけでも圧縮します。CSSの圧縮ツールはCSS Minifierなどオンラインツールを使えば楽です。

サンプル

サンプルとして私が実際に使っている自作リセットCSSの中から1つ紹介します。

[css]
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-size: 100%;
vertical-align:baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article, header, footer, aside, figure, figcaption, nav, section {
display:block;
}
body {
line-height: 1;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
ol, ul {
list-style: none;
list-style-type: none;
}
[/css]