はじめてのHTML5　第2回『HTML5のさらに詳しいCSSリセット方法』

リセットCSSとは

各ブラウザ(IE・FireFox・safariなど)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートのことを『リセットCSS』と呼んでいます。

ブラウザ毎のデフォルトスタイルをリセットする理由
例えばデフォルトのまま文字を表示すると、ブラウザ毎に文字サイズが変わってしまいます。そこで、デフォルトのスタイルをすべてリセットするCSSを読み込み解決します。

※ただし、リセットCSSは必ず必要というわけではありません。今回、詳しい説明などはいたしませんが、ブラウザのデフォルトスタイルを有効に使っていこうという考え方もあります。

HTML5のリセットCSS

XHTML1.0でのリセットCSS

いままでのXHTML1.0で主に使用しされていた代表的なリセットCSSは、

• YUI LibraryのCSS Reset
• Eric Meyer’s のCSS Reset

上記の2つが有名です。

1つ目はYahoo! User Interface Libraryが提供するリセットCSSで、2つ目はEric Meyer氏のリセットCSSになります。

HTML5でのリセットCSS

HTML5でのリセットCSSには新たに加わった要素をリセットする役割と、いくつかの新しい要素を本来のブロック要素に変える役割があるようです。

1つ目のリセットCSSはEric Meyer氏のリセットCSSです。XHTML1.0の時も使用していましたが、現在HTML5のタグにも対応していました。

2つ目はhtml5doctorのリセットCSSです。Eric Meyer氏のCSSを調整したもので現在(2011年2月2日)HTML5のリセットCSSでは一番有名なもののようです。私もこちらを使用していこうと考えていますので、html5doctorのソースを確認したいと思います。

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

/*要素のフォントサイズやマージン・パディングをリセットしています*/
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;
}

/*行の高さをフォントサイズと同じにしています*/
body {
    line-height:1;
}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
nav ul {
    list-style:none;
}

/*引用符の表示が出ないようにしています*/
blockquote, q {
    quotes:none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
    text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
    border-collapse:collapse;
    border-spacing:0;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
    vertical-align:middle;
}

ただ1点気になったのは、ul要素へのリセットが

nav ul {
    list-style:none;
}

となっていた部分です。

どうやら制作者はあえてこうしているようなのですが、個人的にはul自体にリストスタイルを指定したかったので、元になっているEric Meyer氏のCSSを参考に

ol, ul {
	list-style: none;
}

ul要素へのリセットはこちらに変更したいと思います。

また画像を縦に並べたときに余白が出てしまわないように

img {
　　　vertical-align: top;
　　　font-size:0;
　　　line-height: 0;
}

も追記しておこうと思います。

今後、勉強していくうちに少しずつ変わってくると思いますので、変わったらまたメモ代わりに記事を書く予定です。

参考サイト：

• Reset CSSについてのまとめ：リセットするべき?しないべき？　【Rriver】
• HTML初心者が知っておくべきリセットCSS と3つのポイント　【3streamer blog】
• HTML5 のリセット・スタイルシート　【HTML5.JP】