HiGash.Net ホームページへ戻る

Home [Blog] » 1ピクセルのズレも許せない! ブラウザのデフォルトCSSをリセット

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

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をまとめてみようかと検討中。

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

コメント/トラックバック

1 件のコメント/トラックバックをいただきました。ありがとうございます!!

  1. santa より:

    こんにちは。とても勉強になりました。使わせていただいていただいてよろしいのでしょうか?WEBつくっております。宜しくお願いいたします。もしOKでしたら、フォームのズレの修正の仕方がおわかりでしたら、おしえてくださいましたら、大変幸せです。
    失礼致します。

ぜひこのエントリーに対するコメントをお聞かせください。

以下のURLでトラックバックも受付けています。

http://higash.net/20080522/reset_css.html/trackback/

Preview

トラックバック
http://higash.net/20080522/reset_css.html/trackback/

Page Top