各ブラウザ表示をコントロールするためのCSS
louisrofrano.comでreset.cssなるものが公開されています。
各ブラウザはそれぞれ異なるデフォルト価値を持っているので、表示をコントロールするためにはスタイルシートを使ってそのデフォルト価値をリセットする必要があるとのこと。以前にも使えるCSS活用術ということで覚書をしておいたのですが、自分自身のreset.cssを持つことは必要ですよね。
先日のCSSnite大阪でもコーディング作業を効率よく進めるために自分自身のreset.cssを持ってますか？っていう話になってましたし。いろんなレイアウトスタイルを各ブラウザで変わらず表示させるためにリセットをかけるのはほんと必然です。
元ネタはEric Meyer’s reset.css page
基本のリセットスタイルシートとリセットをかけたあと、追記すべき項目というのが記されています。
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,
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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
- 一番最初にbackground: transparent;を追記します。
- a :focusに対しての指定をする。アクセシビリティの点において重要な項目です。
- bodyに対して基本となるline-height(改行ピッチ)を指定してやる。そして、背景色とテキスト色を決める。
- a img, :link img, :visited imgについてはすでに各ブラウザとも統一されているので特に何もしない。
- caption, th, tdにleft-aligned と normal-weightを指定する。
- blockquoteに関して指定をする。
