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

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

  • Posted by: wu
  • April 9, 2006 7:47 AM
  • XHTML CSS
2007-01-30更新

Yahoo UI Fonts CSS使用時の各要素のフォントサイズを変更する際の注意点を追加しました。

defalut.cssちょっとだけ修正

2007-01-18 更新

記事の内容も古くなり、Yahoo Libraryなどがでて更に差異を減らすことが簡単になったことから、これを利用し、スタイルも簡潔にシンプルに記述しなおしましました。前よりも使いやすくなったはずです。前回配布していたものとの変更点は次のようになります。

各UA(ブラウザー)は、それぞれ微妙に違ったデフォルトスタイルシートを持っている為、この差異が原因で「こっちは揃っているけど、あっちのブラウザーでは、なんかずれてる」なんて事がよく起こります。

なので、まず最初にUAのデフォルトスタイルシートの各エレメントの見栄えを制作者のスタイルシートで再定義して上書きし、各UAの表示のデコボコを出来るだけ埋めてからCSSデザインし始めるというやり方が楽チンだ。

僕はいつも、「デコボコ埋め+自分好みの大まかなスタイル」を定義して纏めたdefault.cssを用意して、必ず最初にそれを読み込ませてからレイアウトなどを組み、デザインに合わせてdefault.cssの各エレメントのスタイルを調整しながら作っている。CSSコーディングのみの仕事とかも増えてきた事だし、面倒だけどもう一度綺麗にピシ!っと定義し直したdefault.cssを作った。

このファイルを元に、既に記述されている各要素の宣言を調整し、自分好みのベーススタイルを作ってください。

使い方は簡単。読み込むにも色々方法あるけど、例えば、製作の時にdefault.cssと、もう1つサイトデザインのスタイルを纏めたcssファイルを書いて、(X)HTML文書のhead要素内で

<link rel="stylesheet" href="path/default.css" type="text/css"  media="screen" />
<link rel="stylesheet" href="path/bazooka.css" type="text/css" title="Bazooka" media="screen" />
(4/10. default.cssが優先スタイルシートとしてLinkされていたのを修正しました)

という順で読み込んでもいいし、

レイアウト情報などを纏めたCSSファイルの先頭に

@charset "utf-8";
@import url("default.css");

以下 レイアウトなどのスタイル定義がこの下にズラー

とインポートしてからCSSを書くのも良いし、

巨大なサイトで定義が増えそうなら、1つimport.cssを用意して、そこに

@charset "utf-8";
@import url("default.css");
@import url("common.css"); 

っていう読み込ませ方もある。

@charset "utf-8";
@import url(default.css);
@import url(common.css);
@import url(templates.css);

3ping.orgは↑のように、

  1. default.cssで各エレメントの表示を上書きしてデコボコ揃え+大体の好みに整形
  2. common.cssでサイト全体に共通するスタイルを定義
  3. templates.cssでページごとに出現するユニークなスタイルを定義

という感じにしてる。blogサイトなんかではこうやってる人多い。後から読み込んだのが前を上書きするから、大局的から局所的へという読み込む順序も大事。

default.cssの定義解説

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

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

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

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

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

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

以下に記述されているコードは古い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に掲載されている表示サイズと指定する値の関係を表で表したものです。

希望のフォントサイズ (px) 指定する値 (%)
10 77
11 85
12 92
13 100
14 107
15 114
16 122
17 129
18 136
19 144
20 152
21 159
22 167
23174
24182
25189
26197

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

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

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

最後に

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

Comments:11

Comment Form
孜希 2006年4月 9日 20:04

こんばんは。
ここでは初めましてですね。
成程レイアウトしてから、揃えるより、揃えてからレイアウトしたほうがいいですね・・!
拝借しようかと思いましたが、勉強の為にも自分で作ってみることにしますdefault.css。
では。

wu 2006年4月10日 00:41

こんばんは! そうだねー、何故こういうことをしなくちゃいけないのか、しないとどうなるのか という部分を理解してから使ったほうがいいね。

一度定義確認用に色々な要素を使ったプレーンなHTMLを書いておいて、少しずつCSSを書いて観察してみると勉強になるよ。

MaKOTO 2006年4月10日 01:05

\Program Files\Mozilla Firefox\res 内にあるhtml.css,forms.cssに手を加えてデフォルトにしてしまう。ってのはどうでしょうか?

wu 2006年4月10日 01:20

あー この記事書いているときにlegoさんが発見して、僕も中身見たのだけど、出来ることなら、IEの定義部分をいぢりたい。w

wu 2006年4月10日 16:51

>ブラウザの差異を埋めるのが目的のはずなのに、IE未対応機能を使ってるのはなぜ?[はてブユーザーコメントから抜粋]


タイトルはあくまで要約で、
「デコボコ埋め+自分好みの大まかなスタイル」
というのがこの記事の内容です。


仰るとおりIE未対応のセレクタを使っていますが、ここは
「自分好みの大まかなスタイル」に該当していて、(このままの記述ならば)未実装のブラウザーでも表示が崩れたりする事はありません。 contentプロパティーなどを実装しているブラウザーだと"ちょっと親切"になるので書いています。


トラックバック受信先の
http://hxxk.jp/2006/04/09/1940
で僕の冒頭部分の説明を補足して下さっているので、読んでみて下さい。

アサノ@携帯 2006年4月11日 02:14

あー h6 指定無しに関しては最後の注意書き?に書いてありましたねすんません。あと font-size 云々も同様に書いてありますね。要するによく読んでからメールすれって事でしたすんません。

wu 2006年4月11日 02:58

アサノさん、メール返信しました!

2006年4月11日 14:02

pre 要素の内容に含むべきでないとされているタブ文字があることもあり、読み易いとは言えないコードになっていると思います。手前味噌のようで恐縮ですが、以下の文章などを参考にして整形してみてはどうでしょうか。

CSS の閲覧用整形ガイドライン
http://orz.cc/blog/2006/03/15/css-format

また、a img {} では必ずしもリンクされていることにはなりません。正しくは a:link img でしょう。

wu 2006年4月12日 07:57

Pre要素の中のタブ文字、imgへのリンク部分も削除しました。
哀さん、ありがとうございます。

wu 2007年1月18日 09:33

このdefault.cssは、デフォルトスタイルの差異をなくすためだけのものではなく、リセットとベーススタイルを定義したファイルです。
なので、最低限変更するだろうと思われる要素にはcolorプロパティで着色しています。

wu-たんぐ 2007年1月23日 20:21

「これブックマークしたはずなんだけど、消えてる、なんで?」
って思った方々、ごめんなさい。

この記事を書いた時からドメインが変わっており、以前は以下のアドレスで公開されていました。
http://numerous.org/bazooka/mt/archives/2006/04/09_074735.html

はてぶ、del.icio.usではこのアドレスに集中してブックマークされたので、今新たにブックマークしたひとは2重にブックマークしてしまっています。 どちらのアドレスでも現在のURIにリダイレクトされますのでご安心ください。

Trackbacks:6

TrackBack URL for this entry
http://3ping.org/mt/mt-tb.cgi/70
Listed below are links to weblogs that reference
デフォルトスタイルの差異を無くすCSS from 3ping.org
CSS を書く前に読んでもらいたいこと from hxxk.jp 2006-04-09 (日) 23:05
何故各ブラウザはそれぞれ微妙に違ったデフォルトスタイルシートを持っているのか、という理由を補足しました。
デザイン変えた from Blog.37to.net 2006-04-14 (金) 23:59
ブログのデザイン変えた。 変えた所 3カラムがあまり好みではないので、リキッド...
リニューアルしました from 雑草の萌芽 2006-04-20 (木) 22:15
デフォルトスタイルの差異をなるべく無くすCSSというものをはてブで知り、それがとても気に入りました。そこで、配布されているdefault.cssをベースに...
movabletype導入 from TipeH 2006-05-16 (火) 09:18

サイト全体をmovable typeに移行したりする件

テンプレートいろいろ from MS-K's irresponsible Diary [Serendipity Weblog] 2006-06-02 (金) 11:21
くそ忙しいのも落ち着いてきて、風邪のひどい症状も落ち着いてきたので、 ここらあたりで(やっと)自分の制作環境におけるテンプレートを作り出しました。 ...
[情報]CSSまとめ from 萌え理論Blog 2007-03-24 (土) 22:15
解説 CSSとは CSS*1とは、(X)HTML文書の見栄えを整形するための、Web標準*2の指定方法です。要するにホームページをデザインする手段です。...

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

Book

実践 Web Standards Design

拙著「実践 Web Standards Design」ではXHTMLやCSSの仕様からマークアップの手法・考え方をはじめ、レイアウトや実践的なWebサイト構築のワークフロー、そしてCSSを利用したさまざまな技術的Tipsを解説しています。

Products
Search
Feeds

Return to page top