1ピクセルのズレも許せない！　ブラウザのデフォルトCSSをリセット

CSSでWebデザインを行う際に欠かせないのが、Webブラウザが標準で備えているデフォルトCSSをリセットするCSSリセットの手法。当サイトもreset.cssでCSSリセットを行ってからレイアウト用のCSSを読み込むことによって、なるべく多くのブラウザでレイアウトの崩れが出ないように制作しています（とはいえ、いくつかレイアウト崩れは見つかっていますが・・・）。

CSSリセットに関する話題はインターネットを検索するとかなりたくさん見つかりますが、やはり秀逸なのは YUI Reset CSS だと思います。しかし、YUI Reset CSSの記述はCSS Validatorに通らないし、不足していると感じる要素もいくつかあるので自分用にYUI Reset CSSをカスタマイズしてみました。

Internet Explorer 6 & 7、Firefox 2、Safari 3、Opera 9を対象ブラウザと考えています。

@charset "utf-8";

/*
reset.css ver 1.0 [2008/5/22]
*This document validates as CSS level 3
*http://higash.net/20080522/reset_css.html

Modify YUI Reset CSS, YUI Fonts CSS
*Copyright (c) 2008, Yahoo! Inc. All rights reserved.
*http://developer.yahoo.com/yui/license.html
*/

/* --HTML-- */
html {
background:#fff;
color:#333;
overflow-y:scroll;
}

/* --BODY-- */
body {
font:12px/1.5 'Lucida Grande',Arial,Helvetica,Verdana,sans-serif;
margin:0;
overflow:visible;
padding:0;
}

/* for IE7 */
*+html body {
font-family:'メイリオ';
font-size:75%;
}

/* for IE6 */
* html body {
font-size:75%;
}

/* --OTHER TAGS-- */
a img, fieldset, img {
border:0;
}

blockquote, dd, div, dl, dt, fieldset, form,
h1, h2, h3, h4, h5, h6, input, li, ol, p, pre,
select, span, textarea, td, th, ul {
margin:0;
padding:0;
}

abbr, acronym {
border:0;
}

address, caption, cite, code, dfn, em, th, strong, var {
font-style:normal;
font-weight:normal;
}

caption, th {
text-align:left;
}

code, kbd, pre, samp, tt {
font-family:monospace;
line-height:100%;
}

/* for IE7 */
*+html code, kbd, pre, samp, tt {
font-size:108%;
}

h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}

input, select, textarea{
font-size:100%;
font-family:'Lucida Grande',Arial,Helvetica,Verdana,sans-serif;
}

ol, ul {
list-style:none;
}

q:before, q:after {
content:'';
}

/* tables still need 'cellspacing="0"' */
table {
border-collapse:collapse;
border-spacing:0;
font-size:100%;
}

以下、YUIからの変更点などいくつかメモを。

まず、CSSのプロパティはアルファベット順で記述しています。CSSのプロパティはCSS Specificationの記載順に記述するという方も多いようですが、僕はアルファベット順のほうが作業がしやすいのでそうしています。他の人と共同で作業する際もアルファベット順というルールなら戸惑うこともないだろうし。

17行目： overflow-y:scroll はFirefoxで縦スクロールバーを絶対に表示するための記述です。コンテンツが縦スクロールの必要なく収まった場合に、Firefoxはスクロールバーを表示しないため、コンテンツを真ん中に配置している場合などに縦スクロールのありなしで表示位置にズレが生じます。これを防ぐのが overflow-y:scroll 。ただし、このプロパティはCSS レベル 2.1としてはInvalidです。CSS レベル 3ならValid。

22行目： font のfont-familyはもちろんプロジェクトに応じて変更します。font-sizeは12pxを基準とします。line-heightには単位を設定しません。

28〜37行目：IE用のCSSハックを使います。 * html セレクタ { } でIE6向け、 *+html セレクタ { } でIE7向けにCSSを上書き。IEはfont-sizeをpxで設定するとブラウザの表示メニューで文字の大きさを変更できないため、%で指定します。IEをはじめとしたモダンブラウザのデフォルトのfont-sizeは16pxなので、12pxに相当する75%を設定します。また、IE7（かつメイリオフォントがインストールされている場合）のみメイリオフォントでページを表示するようにします。

80行目： MacのFirefoxの場合、inputなどのフォームで入力する文字がbodyで指定したフォントと関係なく明朝体で表示される のでbodyで指定したfont-familyをもう一度記述します。

92行目：tableの設定です。HTML中に <table cellspacing=”0″… というように cellspacing=”0″ を記述する必要があります。

以上、簡単なメモでした。なお、reset.cssは随時アップデートしていきます。

ブラウザごとにフォームの表示が結構違うので、次はフォームにフォーカスを当てたCSSをまとめてみようかと検討中。