デフォルトスタイルの差異を無くすCSS

default.cssの定義解説

default.cssの要素の定義順は、その昔、hxxk.jpの真琴さんのCSSをこっそり覗き見してモノマネしています。要素の役割ごとに分類して定義していくやり方で、このやり方で長らくやってるけど、出現ルールが硬いので一番わかりやすい。分類内の順序は、

1. ブロック要素が先、インライン要素が後
2. 出現頻度が高いものが先
3. 一括指定が先　ばらが後

プロパティーの順序はプロパティの書き順@脳内ルールhail2u.net「CSS2 Specificationでのプロパティの出現順序」に則って書いています。

差異を埋めるために、部分的にアンダースコアハックだけ使ってIEにだけ読み込ませている所があります。あとはー、要素の左右のmarginやpaddingの値にはemを使わないでpxで指定しています。これは文字サイズが変化してもグリッドを保ったままにさせる為です。今まで色々試したけど、これが問題なく綺麗。

以下はdefault.cssの記述に簡単にコメントつけてみました。

• default.cssを適用したXHTMLのエレメンツ。

と合わせて見いくと確認しやすいかも知れません。

以下に記述されているコードは古いdefault.cssの可能性があります。最新のものはdefault.cssにありますので、こちらを参照して下さい。
@charset "utf-8";
	
/*
*　Reset & Base Style Sheet
*　Last Update 2007-01-18
*
*　1-1.Yahoo UI Library Fonts CSS
*　1-2.Universal selector
*　1-3.Structure Module
*　1-4.Text Module
*　1-5.Hypertext Module
*　1-6.List Module
*　1-7.Edit Module
*　1-8.Forms Module
*　1-9.Tables Module
*　1-10.Image Module
*　1-11.Object Module
*/

/*======================================

　1-1.Yahoo Library Font.css
　http://developer.yahoo.com/yui/fonts/

　*Copyright (c) 2006, Yahoo! Inc. All rights reserved.
　*http://developer.yahoo.com/yui/license.txt

=======================================*/

body {
　font-size: 13px;
　*font-size: small;
　*font: x-small;
}

table {
　font-size: inherit;
　font: 100%;
}

select,
input,
textarea {
　font-size: 99%;
}

/*======================================

　1-2.Universal selector
	
=======================================*/

* {
　margin: 0; 
　padding: 0;
　line-height: 1.6;
　color: #333;
　font-size: 100%;
　font-weight: normal;
　font-style: normal;
}

/*======================================

　1-3.Structure Module
	
=======================================*/

body {
　background-color: #fff;
　font-family: Arial, Helvetica, sans-serif;
}

/*======================================

　1-4.Text Module
	
=======================================*/

p,
pre,
address,
cite {
　margin: 0.5em 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
　margin: 0.5em 20px; 
}

h1 {
　font-size: 189%;
}

h2 {
　font-size: 159%;
}

h3 {
　font-size: 144%;

}

h4 {
　font-size: 122%;
}

h5 {
　font-size: 107%;
}

h6 {
　font-size: 107%;
}

pre {
　padding: 0.5em 10px; 
　border: 3px solid #eee;
　width: 95%;
　overflow: scroll;
　color: #3d4263;
　font-family: "Osaka－等幅", monospace;
}

pre[title]::before {
　margin-bottom: 0.4em;
　padding: 0 10px;
　display: block; 
　content: attr(title);
　color: black;
　background-color: #eee;
}

blockquote {
　margin: 1.5em 20px 1.5em 40px;
　padding: 1px; 
　background-color: #eee;
}

blockquote * {
　color: #888;
}

blockquote[title]::before {
　margin: 2px;
　padding: 0.1em 16px;
　display: block;
　content: attr(title); 
　background-color: #fff; 
}

blockquote[cite]::after {
　padding: 0.1em 20px;
　display: block; 
　content: attr(cite);
　color: #333333;
　text-align: right;
}

cite {
　display: block;
　color: #333333;
　text-align: right;
}

em {
　font-weight: bold;
}

strong {
　color: #ff4500;
}

code {
　font-family: "Osaka－等幅", monospace;
}

abbr,
acronym {
　border-bottom: 1px dotted #aaa;
　cursor: help;
}

kbd {
　border: 1px solid #ccc;
　padding: 0 0.3em; 
　background-color: #f5f5f5;
　font-family: "Osaka－等幅", monospace;
　text-transform: uppercase;
}

/*======================================

　1-5.Hypertext Module
	
=======================================*/

a:link {
　color: #005585;
}

a:visited {
　color: #485270;
}

a:hover {
　color: #b83800;
}

/*======================================

　1-6.List Module
	
=======================================*/

ul,
ol,
dl {
　margin: 1em 20px;
　padding: 1px 10px;
　list-style-position: inside;
}

li,
dt,
dd {
　font-size: 100%;
}

dt {

}

dd {
　color: #666666;
}

li li,
li p,
li pre,
li dt,
li dd,
dd li,
dd p,
dd pre,
dd dt,
dd dd {
　font-size: 100%;
}

li ul,
li ol,
li dl,
li p,
dd ul,
dd ol,
dd dl,
dd p {
　margin: 0 10px;
}

/*======================================

　1-7.Edit Module
	
=======================================*/

del {
　color: #666666;
　text-decoration:	line-through;
}

del[datetime]::before {
　content: " ( "attr(datetime)"\00524a\009664) ";
}

ins {
　border-bottom: 1px dotted #ccc;
　text-decoration: none;
}

ins[datetime]::before {
　content: " ( "attr(datetime)"\004fee\006b63) ";
}

/*======================================

　1-8.Forms Module
	
=======================================*/

form {
　margin: 0.5em 20px;
　padding: 1px 0; 
}

form dl,
form p {
　margin: 0.5em 10px;
}

fieldset {
　border: 1px solid #ddd;
}

legend {
　margin: 0 1em;
　padding: 0 10px;
}

input,
textarea {
　padding: 0.1em 10px;
　border: 1px solid #ddd;
　font-family: Arial, Helvetica, "ヒラギノ角ゴ Pro W3",  sans-serif;
　background-color: #f5f5f5;
}

input {
　line-height: 1.2;
}

input:hover,
textarea:hover {
　border: 1px solid #aaa;
}

input:focus,
textarea:focus {
　border: 1px solid #000;
}

textarea {
　padding: 0.4em 8px;
}

/*======================================

　1-9.Tables Module
	
=======================================*/

table {
　margin: 0 20px 0.5em 20px;
　border: 1px solid #aaa;
　background-color: #eee;
}

th,
td {
　padding: 0 10px;
}

th {
　color: #fff;
　background-color: #999;
}

td {
　border: 1px solid #ddd;
　background-color: #fff;
}

/*======================================

　1-10.Image Module
	
=======================================*/

a img {
　border: 3px solid #ccc;
}

a:hover img {
　border: 3px solid #bccd56;
}

/*======================================

　1-11.Object Module
	
=======================================*/

object,
embed {
　margin: 1em 20px;
}

このまま使うのではなく、目的のデザインに合わせて色や文字サイズを調整して読み込ませて下さいね。既に主要な要素は記述済みなので、ここから好みに調整することでCSSファイルの記述の手間が省けるでしょう。また、これからあるデザインをCSSで実現するって時に、このdefault.cssを最初に読み込ませ、まず差異を埋めてベーススタイルを決める。という使い方なので、既に作り終えているサイトに後からコレを追加したらきっとおかしなことになりますよ。しりませんよ。

追記 2007-01-30: フォントサイズを変更する際の注意点

ご覧の通り、default.css内、(定義グループのアウトライン番号1-1)にはYahoo UI Library Fonts CSSの指定があります。基本フォントサイズを13px(IE7ではsmall, IE6ではx-small)に設定しているので、各要素のフォントサイズを変更する場合は、この基本サイズからの相対的な数値をパーセント単位で指定します。

以下は、Yahoo Fonts CSSに掲載されている表示サイズと指定する値の関係を表で表したものです。

上記の表を参考に、例えばh2要素のフォントサイズを20px、p要素のフォントサイズを16px相当の大きさにしたい場合は、次のように該当する部分を編集します。(default.css内には既にセレクタとして用意してあるので、そこへ追加・記述します。)

h2 {
 font-size: 152%; /* 20px相当のフォントサイズ */
}

p {
 font-size: 122%; /* 16px相当のフォントサイズ */
}

最後に

• IEなどにあるバグ、または仕様の差が直る訳ではありません
• 全ての要素のスタイルを定義している訳ではありません
• UTF-8が扱えるエディターで開かないと、一部文字化けします

• default.css

• 適用サンプル。