HTML初心者が知っておくべきリセットCSS と3つのポイント

HTMLとCSSを勉強し始めると誰もがブラウザ間による実装の違いに頭を悩ませる事になります。最近はIE6のシェアが落ちてきた事により、以前よりWebサイトが作りやすい環境になってきてはいますが、それでもまだブラウザ間のCSSの差異は存在します。そのわずかな差や各種バグのためにCSSの裏技であるCSSハックを用いたり、条件分岐コメントという方法を用いてIEにだけCSSを適用したりとWeb制作者は長年非常に苦労してきました。今回はHTMLを学び始めたばかりの初心者が知っておくべきリセットCSSとそのポイントについて書いてみます。

ポイント1. デフォルトCSSは各ブラウザ間に差異があることを理解しよう

HTMLとCSSを学び始めた人がまず覚えなければいけない大事な事は「ブラウザごとにデフォルトのCSSは異なる」ということです。(デフォルトのCSSとは初期状態で適用されているCSSのこと)

たとえばMacで標準搭載されているSafariは<h1>タグで囲った部分が明朝系のフォントになります。ところが全く同じソースコードのHTMLをFirefoxで表示すると文字はゴシック体のフォントで表示され、さらには行間の空白部分の長さも違います。(下図参照)

このようにブラウザ毎のデフォルトCSSは微妙に異なるということを理解しておくと、Webサイトを制作する際の対処もしやすくなります。

ポイント2. *ユニバーサルセレクタを使ったリセット方法とそのデメリットを把握しよう

HTMLとCSSでコーディングを始める最初の段階で各ブラウザが持っているデフォルトのCSSを一度リセットしてしまおうというのがいわゆる『reset.css』と呼ばれるものです。これは上書きができるcssの特性を利用した方法です。一度リセットしてまっさらな状態からCSSを書き始めればブラウザ間のスタイルの差異に頭を悩ませたり、余計なハックを使う必要も少なくなります。CSSリセットする場合は必ず一番最初にリセットの設定を書いて下さい。何故ならば『CSSは上書きができる』ので、同じ設定であれば後から書かれたものが優先されるからです。

一昔前は良く

*{
   margin : 0;
   padding : 0;
}

というリセット手法を使うサイトが多く見られました。* ←こいつはユニバーサルセレクタと呼ばれるもので、HTMLの全ての要素を選択していることになります。つまりこれを使うことで『一番最初に全ての要素をリセットしてしまえる』という訳です。ところがこの手法には下記デメリットが存在することが明らかになりました。

• ブラウザのレンダリングが若干遅くなる
• 良いスタイルも全てリセットされてしまう
• リセットしたままだとフォームの部分で表示がずれてしまうブラウザがある

「ブラウザのレンダリング速度」ですが、最近のPCは基本性能が上がっていますしブラウザ自体の処理速度も向上してますので「ユニバーサルセレクタを使うと遅くなる」といっても体感的にほとんど差は感じられないと思います。ただし、スペックの低いPCや古いブラウザを使っている場合、あるいは携帯のフルブラウザやスマートフォンから閲覧する場合はレンダリングの遅さが顕著に表れる場合があるので十分に注意する必要があります。

またGoogleは将来的にWebサイトの表示速度も検索結果に反映させるような事を言っているので「表示速度」は今後も重要な要素の一つに変わりありません。ユニバーサルセレクタを用いたリセット手法はデメリットを理解した上で使う使わないを判断するべきでしょう。

それじゃ他にどんなリセット方法があるの？ってことでいくつかご紹介。まぁこの辺は他のブログでも良く紹介されてますが、話の流れ的に(笑)

ポイント3. 良く使われるリセット手法を把握しよう

YUI3を使ったリセット方法

Yahoo! User Interface Libraryのreset.cssを使った方法です。Yahoo UIはBSD Licenseなので、ライセンス表記を消さなければ改変したり商用利用したりするのも可能です。(通常はダウンロードしたソースコード内に下記のようにライセンス表記がしてあるのでそのまま読み込んで仕様すればOK)

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
html{
    color:#000;background:#FFF;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;padding:0;
}
table{
    border-collapse:collapse;border-spacing:0;
}
fieldset,img{ border:0; }
address,caption,cite,code,dfn,em,strong,th,var{
    font-style:normal;font-weight:normal;
}
li { list-style:none; } caption,th{ text-align:left; }
h1,h2,h3,h4,h5,h6{
    font-size:100%;font-weight:normal;
}
q:before,q:after{ content:''; }
abbr,acronym{ border:0;font-variant:normal; }
sup{ vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
input,textarea,select{ font-family:inherit;font-size:inherit;font-weight:inherit; }
input,textarea,select{ *font-size:100%; }
legend{ color:#000; }

比較的良く使われている方法ではありますが、注意しなければいけない箇所もあります。それはhtml要素にbackground-imgやbackground-colorを指定した場合にbody要素の背景が描画エリア一杯に表示されなくなるという問題です。この件に関してはhail2u.net – Weblog – YUI 3: CSS Resetの問題に詳しく書かれています。

Eric Meyer Reset CSS

次にご紹介するのはEric Meyer氏によるCSSリセットの方法。彼が自身のブログで提起したreset.cssは様々な論議を呼び、その後のリセットCSSに大きな影響を与えました。今でも海外サイトで良く使われている方法の一つです。英語圏ではreset.cssによるスタイルの初期化の事を「グローバルリセット」という呼び方をする事が多いです。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

このリセット方法は<font>や<big>といった非推奨要素(今後廃止される予定のタグ)も含まれてしまっているので、様々な人が利用するブログのテンプレートなどを作る場合には良いかもしれませんが、それ以外の場合は少々自分でカスタマイズして使用したほうが良いと思います。

リセットしないUn-Reset CSS

一方ではリセットをせずに、サイトを作る事を提唱している人もいます。

「最初からあるスタイルを全部リセットするなんてもったいない。必要最小限のスタイルの上書きにして、デフォルトスタイルも有効に使おうよ」

そういった考えで生み出されたのがVanilla CSS Un-ResetというCSSです。その名の通り「Un-Reset」なのでリセットしてません。必要な箇所のスタイルだけ上書きするCSSとなっています。

/**
* Start Vanilla CSS 0.9.9
*/
body {
	font: 9pt/1.5em Arial, Helvetica, sans-serif;
}
pre, code, tt {
	font: 1em/1.5em 'Andale Mono', 'Lucida Console', monospace;
}
h1, h2, h3, h4, h5, h6, b, strong {
	font-weight: bold;
}
em, i, dfn {
	font-style: italic;
}
dfn {
	font-weight:bold;
}
p, code, pre, kbd {
	margin:0 0 1.5em 0;
}
blockquote {
	margin:0 1.5em 1.5em 1.5em;
}
li ul, li ol {
	margin:0 1.5em;
}
ul, ol {
	margin:0 1.5em 1.5em 1.5em;
}
ul, ul li {
	list-style-type:disc;
}
ol, ol li {
	list-style-type:decimal;
}
dl {
	margin:0 0 1.5em 0;
}
dl dt {
	font-weight:bold;
}
dd {
	margin-left:1.5em;
}
table {
	margin-bottom:1.4em;
	width:100%;
}
th {
	font-weight:bold;
}
th, td, caption {
	padding:4px 10px 4px 5px;
}
tfoot {
	font-style:italic;
}
sup, sub {
	line-height:0;
}
abbr, acronym {
	border-bottom: 1px dotted;
}
address {
	margin:0 0 1.5em;
	font-style:italic;
}
del {
	text-decoration: line-through;
}
pre {
	margin:1.5em 0;
	white-space:pre;
}
img.centered, .aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignright {
	display: inline;
}
img.alignleft {
	display: inline;
}
.alignright {
	float: right;
	margin-left: 10px;
}
.alignleft {
	float: left;
	margin-right: 10px;
}
* html .clearfix {
    height: 1%;
}
* + html .clearfix {
	display: inline-block;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .group {
    height: 1%;
}
* + html .group {
	display: inline-block;
}
.group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

これ以外にも様々なリセット手法が存在します。実際のWebサイト制作の際は対象ブラウザや制作期間などもありますから、どの手法を用いるのかメリットとデメリットを把握してその時々でベストな選択をするべきでしょう。上記で紹介したようなreset.cssを元にオリジナルのリセットCSSを作ってみるのも良いと思います。

HTMLの次期バージョンHTML5の策定作業が進行していますが、既にHTML5のタグやCSS3を先行実装するブラウザも現れてきました。これらが実際の制作現場で使われるようになると、また制作の手法も変わってくるでしょう。リセットCSSもHTML5用のものが提案されていたりします。今後どうなっていくのか注目です。