HTML5 のリセット・スタイルシート
私たちは、HTML5 の雛形やスタイリングについて多くの人から質問を受けたので、それについて、Remy が先週に話した基本的なブロック構築の続きを話そう。私は、みなさんのために HTML5 のリセット・スタイルシートを作ったので、これを持って行って、みなさんのプロジェクトで改変して使ってほしい。
Eric Meyers CSS reset をもとに、私は、Erics の作品から若干の調整を入れた。後ほど手に入れられるが、まず、ここでは、そのファイルの全体を掲載したので、それを少しずつかみ砕いていこう。
/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/
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, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
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;
}
それで何が変わったのか？
まず、<acronym>, <font>, <big> といった HTML5 仕様では廃止された要素を削除した（私たちは、別の投稿で廃止された要素の詳細について扱うつもりだ）。HTML5 の新要素を加えて、それらのデフォルトのパディングやマージンやボーダーを削除してリセットするようにした。それから、ブロックとしてレンダリングする必要がある要素に対して、明示的に display:block 宣言を追加した。
さらに、Eric のスタイルシートから :focus の部分を削除した。これには 2 つの理由がある。ひとつは、outline:0 を宣言すると、キーボート・ユーザーのためのフォーカス識別子を削除してしまうことになるからだ。もうひとつは、Eric は、みんながそれを編集したり :focus をスタイルしてくれると思って、自身のスタイルシートをリリースしたのだけれども、実際にはそうではないからだ。私が <ins>に対してデフォルトをセットしたことに気づいただろうか。私は、みんなが Eric のスタイルに頻繁にアップデートするとは思えないからだ。
Eric のスタイルシートには他にも変更を加えた。私は、リストから黒丸を削除してしまう行を取り除くと決めた。これは、純粋に個人的な理由からだ。私は、とにかく、Eric のリセットを使うときにはリストのスタイルに手を入れることが多い。しかし、私は、あなたのナビゲーションから厄介な黒丸を取り除くために nav ul {list-style:none;} を入れることにした。
属性セレクタの利用
私が <abbr> と <dfn> 向けに属性セレクタを入れたことに気づいただろうか。これは、単に、title 属性があれば表示されるようなスタイルが欲しいからに過ぎない。この理由は、第一に、アクセシビリティのためだ。例えば、私たちは、このサイトでは規則的に <abbr> 要素を使っているが、いつも title 属性を入れているわけではない。それは、私たちの読者みんな（利用しているデバイスに関係なく）が、HTML とは何なのかを知っていると想定しても問題がないからだ。しかし、私たちは、それでもなお、<abbr> を入れる必要があるのだ。スクリーンリーダに、"HTML" をどうにかして発音させるのではなく、H-T-M-L と確実に読んでもらえるようにするためだ。
mark って何？
<mark> は HTML5 に導入された新要素だ。ドキュメントのテキストをマークするのに使う。仕様では、<mark> について "mark 要素は、他のコンテキストとの関連性に起因して、参照を目的にマークまたはハイライトされる、あるドキュメントの中の一連のテキストを表します。" と説明している。 この要素は、検索結果でフレーズをハイライトするために使われると、私は予想してる。私たちは、まもなく、これについて詳しい内容を投稿することになるだろう。
アプリケーション要素ってどこにある？
"アプリケーション要素" とは、私が <datagrid>, <datalist> といった要素を簡単に説明するために使った用語だ。基本的には、ウェブサイトというよりは、ウェブ・アプリケーションで使われる要素だ。これら ‘Web Applications 1.0′ だった機能は、現時点でも、なかなかブラウザーに実装されず、放置されている。また、このリセットは、主に、text/html で提供されるページを対象としている。
Go grab it
これは、クリエイティブ・コモンズ・ライセンスのもとにリリースしたものです。あなたは、個人利用、商用利用問わず、これを使うことができる。私は、ホスティングについては Google に任せたいので、Google Code からゲットしてほしい。そして、あなたの考え、疑問、改善案があれば、私に知らせてほしい。