徒然 - 実験

IE6対策に必要な知識を整理するために、class、idの複数指定に関する実験をしてみました。

文字色、背景色、罫線色が、赤、緑、青となるように

.color_red {
	color:#f00;
}
.color_green {
	color:#090;
}
.color_blue {
	color:#00f;
}
.bg_red {
	background:#f99;
}
.bg_green {
	background:#9f9;
}
.bg_blue {
	background:#99f;
}
.border_red {
	border:5px #f00 solid;
}
.border_green {
	border:5px #0f0 solid;
}
.border_blue {
	border:5px #00f solid;
}
#color_red {
	color:#f00;
}
#color_green {
	color:#090;
}
#color_blue {
	color:#00f;
}
#bg_red {
	background:#f99;
}
#bg_green {
	background:#9f9;
}
#bg_blue {
	background:#99f;
}
#border_red {
	border:5px #f00 solid;
}
#border_green {
	border:5px #0f0 solid;
}
#border_blue {
	border:5px #00f solid;
}

として、

htmlに複数classを指定

してみると、

赤文字　青背景　青罫線

青文字　赤背景　赤罫線

結果↓

赤文字　青背景　青罫線

青文字　赤背景　赤罫線

htmlに複数idを指定

すると

idは1つだけなら指定できるけど

2つ以上は指定できない

結果↓

idは1つだけなら指定できるけど

2つ以上は指定できない

となることから、

• 1つの要素に複数classを指定したい場合は、class名を半角スペースで区切る
• 1つの要素に複数idを指定することはできない

ということが分かります。これはIE6, IE7, IE8, Firefox, Opera, Google Chrome, Safariで正しく見えました。…………（＊）

で、これはhtml側での複数指定ですが、次に

css側での複数指定

について見るために、

.color_red.bg_blue.border_green {
	font-size:80px;
}

.color_red.bg_blue.border_greenに80px

とした場合に限って、

.color_red.bg_blue.border_greenに80px

となることから、これはclassが「color_red」かつ「bg_red」かつ「border_green」の場合、font-sizeに80pxを与える指定ということが分かります。

以下、いろいろな組み合わせを試そうとすると前に書いた記述に影響するのでやらずに結論だけ書きますが、ぱっと見似ている

.color_red,.bg_blue,.border_green {
	font-size:80px;
}

はclassが「color_red」と「bg_red」と「border_green」のものは、font-sizeに80pxを与えるという記述なので、こう（↓）まとめると分かりやすいと思います。

• cssにピリオド（.）+class名を続けて記述した場合は「and」条件
• cssにピリオド（.）+class名をカンマ(,)で区切って記述した場合は「and」条件

「おれ～、おかしいなぁ」と思ってCSSを細かく見ていたら、カンマが抜けていたとか入っていたとか、そんなことがよくあります。

（これはidとの組み合わせでも成り立ちますが、後述します）

が、

やっかいなのは、（＊）以降は、IE6を除く話だということ。

例えば

緑文字　緑背景　緑罫線

は、今までの指定だと正しくは文字サイズは小さいままですが、IE6だけ、文字が大きくなっているはずです。

結果↓

緑文字　緑背景　緑罫線

これは、

IE6ではCSSの複数class指定は実装しておらず、並べられたクラスの最後のもののみ適用される

というもので、上の例では、「color_green」があろうがなかろうが、「bg_green」があろうがなかろうが、最後の「border_green」さえあればフォントサイズを80pxにすると解釈されてしまうんです

で、保留していたidとclassの複合指定ですが、

#color_red.bg_red.border_red {
	font-size:80px;
}
#color_red.bg_blue.border_red {
	font-size:80px;
}
#color_red.bg_green.border_red {
	font-size:80px;
}

としたとき、本当は同一ページに同じidのものを2つ以上書くのは反則ですが、別々に試しても下のように書いても結果は同じだったので、説明の都合上この（↓）ように書きますが、

赤文字　赤背景　赤罫線

赤文字　青背景　赤罫線

赤文字　緑背景　赤罫線

赤文字　黒背景　赤罫線

赤文字　赤背景　赤罫線

赤文字　青背景　赤罫線

赤文字　緑背景　赤罫線

赤文字　黒背景　赤罫線

となり、idと複数class指定の組み合わせも成り立つということが分かります。

最後の「bg_black」は今回定義していないので、当然80pxにはならないし、黒背景にもなりませんが、IE6は、前述したとおり「classの複数指定は最後のclassを解釈する」という規則通り、文字が大きくなりました（背景色はさすがに黒にはならない）。

ただし、この書き方は、IE6で複数クラスを使う時の注意点 | CSS-EBLOGの「IDと連携して使用する場合の注意」からすればうまくいかないはずですが、うまくいっちゃいました。

確かに、idとclassの複合で、思い通りにならないことは良くあるので、そういうバグはあるとは思うのですが、いまひとつ、どのような条件のときに起きるのか、まだ分かりません。

分かったらまた追記したいと思います。

最近web作成で<table>を使わなければならないことが多くなりました。

タグがやたらと多くなるのであまり好きではなかったのですが、表を作るには崩れにくいので便利ではあります。

でも、<table border="●" cellspacing="▲" cellpadding="■">と書くのは嫌なので、枠線やセル間隔などの制御をCSSで書くときの備忘録をまとめてみました。やはりIE6とIE7が曲者です。

前提条件として、table, td, thのmargin, paddingを10px、テーブルの幅を400pxとして実験。

<style type="text/css">
table,
td,
th {
	margin:10px;
	padding:10px;
}
table {
	width:400px;
}
</style>

その上で、最初に試したのがこれ。

ソース↓

<style type="text/css">
.table01 {
	border:1px solid #000;
}
</style>

<table class="table01">
	<tr>
		<td>tableに黒いborder:1px</td>
		<td>tableに黒いborder:1px</td>
	</tr>
	<tr>
		<td>tableに黒いborder:1px</td>
		<td>tableに黒いborder:1px</td>
	</tr>
</table>

結果↓

• tableのborderは外側だけ

ということが分かります。

次に、中にも線を引きたいので、

ソース↓

<style type="text/css">
.table02 {
	border:1px solid #000;
}
.table02 td {
	border:1px solid #f00;
}
</style>

<table class="table02">
	<tr>
		<td>tableに黒、tdに赤いborder:1px</td>
		<td>tableに黒、tdに赤いborder:1px</td>
	</tr>
	<tr>
		<td>tableに黒、tdに赤いborder:1px</td>
		<td>tableに黒、tdに赤いborder:1px</td>
	</tr>
</table>

結果↓

• 中にも線を引きたい場合はtd(th)にborderをかける
• その際、td(th)のmarginとはtableとtd(th)の間のこと
  （ただし、IE6, IE7は余白ができない）

セル間隔は、単純にmargin, paddingだけではなく、

ソース↓

<style type="text/css">
.table03 {
	border:1px solid #000;
	border-spacing:10px 100px;
}
.table03 td {
	border:1px solid #f00;
}
</style>

<table class="table03">
	<tr>
		<td>border-spacing:20px 100px</td>
		<td>border-spacing:20px 100px</td>
	</tr>
	<tr>
		<td>border-spacing:20px 100px</td>
		<td>border-spacing:20px 100px</td>
	</tr>
</table>

結果↓

• td(th)同士の間隔はborder-spacingで指定
  （ただし、IE6, IE7では指定できない）
• この際、隣接する余白はマージンの話に書いたmarginと同じレンダリングがなされると思われる

ということなので、border-spacingを0にしてみると、

ソース↓

<style type="text/css">
.table04 {
	border:1px solid #000;
	border-spacing:0;
}
.table04 td {
	border:1px solid #f00;
}
</style>

<table class="table04">
	<tr>
		<td>border-spacing:0</td>
		<td>border-spacing:0</td>
	</tr>
	<tr>
		<td>border-spacing:0</td>
		<td>border-spacing:0</td>
	</tr>
</table>

結果↓

• 「border-spacing」を0にしてもborder同士が隣接すると見苦しい
  （ただし、IE6, IE7 はむしろ見苦しくない）

また、最初にtableとtd(th)に内外10pxの余白を付けていたので、

ソース↓

<style type="text/css">
.table05 {
	border:1px solid #000;
	border-spacing:0;
	padding:0;
}
.table05 td {
	border:1px solid #f00;
	margin:0
}
</style>

<table class="table05">
	<tr>
		<td>tableのpaddng:0、tdのmargin:0</td>
		<td>tableのpaddng:0、tdのmargin:0</td>
	</tr>
	<tr>
		<td>tableのpaddng:0、tdのmargin:0</td>
		<td>tableのpaddng:0、tdのmargin:0</td>
	</tr>
</table>

結果↓

• tableとtd(th)間を0にしても、おなじくborder同士の隣接は美しくない
  （この場合も、IE6, IE7 は普通に見える）

罫線の重なりは、調べた結果こうすれば、

ソース↓

<style type="text/css">
.table06 {
	border:1px solid #000;
	border-spacing:10px 100px;
	border-collapse:collapse;
}
.table06 td {
	border:1px solid #f00;
}
</style>

<table class="table06">
	<tr>
		<td>border-collapse:collapse</td>
		<td>border-collapse:collapse</td>
	</tr>
	<tr>
		<td>border-collapse:collapse</td>
		<td>border-collapse:collapse</td>
	</tr>
</table>

結果↓

• 「border-collapse」を「collapse」にすればtableとtd(th),td(th)間の間隔が無くなる
  （tableのpadding, td(th)のmarginとborder-spacingは無視される。IE6,IE7も）
• この際、borderはtableよりもth(td)の方が優先されるがIE6, IE7では外枠がtableの罫線となる
  （IE6, IE7以外ではtable>thead(tbody,tfoot)>tr>td(th)ということ？）
• 「border-collapse」のデフォルトは「separate」

ということで、「border-collapse:collapse;」とすれば、IEでも他のブラウザでもきれいな表が作れるというのがポイントでした。

ところで、話変わって、横方向に一括でスタイルをかけたいときは<tr>をセレクトしてやればよいですが、縦方向の場合は、

ソース↓

<style type="text/css">
.table07 {
	border-collapse:collapse;
}
.table07 th,
.table07 td {
	border:1px solid #f00;
}
.table07 .col1 {
	width:20%;
	text-align:left;
	background:#fee;
}
.table07 .col2 {
	width:10%;
	text-align:right;
	background:#efe;
}
.table07 .col3 {
	width:20%;
	text-align:right;
	background:#eef;
}
.table07 .col4 {
	width:40%;
	text-align:right;
	background:#ffe;
}
</style>

<table class="table07">
	<col class="col1">
	<col class="col2">
	<col class="col3">
	<col class="col4">
	<thead>
		<tr>
			<th>col1</th>
			<th>col2</th>
			<th>col3</th>
			<th>col4</th>
		</tr
	</thead>
	<tfoot>
		<tr>
			<td>col1</td>
			<td>col2</td>
			<td>col3</td>
			<td>col4</td>
		</tr
	</tfoot>
	<tbody>
		<tr>
			<td>幅:20%</td>
			<td>幅:10%</td>
			<td>幅:20%</td>
			<td>幅:40%</td>
		<tr>
			<td>left</td>
			<td>right</td>
			<td>right</td>
			<td>right</td>
		</tr>
		<tr>
			<td>ピンク</td>
			<td>水色</td>
			<td>紫</td>
			<td>黄色</td>
		</tr>
	</tbody>
</table>

結果↓

（毎回のことですが、このブログにかかっているcssやjsの影響により、「text-align」が思い通りに表示されていませんが、ソースをテキストエディタにコピーして単独で表示させたらうまく出来ました）

列に属性を与えるには<col>または<colgroup>が利用できる

というのが便利です。

でもやっかいなのは、<col>は空要素ということ。<colgroup>にしても、<col>を<colgroup><col><colgroup>とはさむことはできますが、trやthead(tbody, tfoot)の前に記述しなければならず、td(th)をはさむことができません。

だから、

ソース↓

<style type="text/css">
.table08 {
	border-collapse:collapse;
}
.table08 th,
.table08 td {
	border:1px solid #f00;
	width:25%; /* ← 上の例にこれを追加 */
}
.table08 .col1 {
	width:20%;
	text-align:left;
	background:#fee;
}
.table08 .col2 {
	width:10%;
	text-align:right;
	background:#efe;
}
.table08 .col3 {
	width:20%;
	text-align:right;
	background:#eef;
}
.table08 .col4 {
	width:40%;
	text-align:right;
	background:#ffe;
}
</style>

<table class="table08">
	<col class="col1">
	<col class="col2">
	<col class="col3">
	<col class="col4">
	<thead>
		<tr>
			<th>col1</th>
			<th>col2</th>
			<th>col3</th>
			<th>col4</th>
		</tr
	</thead>
	<tfoot>
		<tr>
			<td>col1</td>
			<td>col2</td>
			<td>col3</td>
			<td>col4</td>
		</tr
	</tfoot>
	<tbody>
		<tr>
			<td>幅:20% ？</td>
			<td>幅:10% ？</td>
			<td>幅:20% ？</td>
			<td>幅:40% ？</td>
		<tr>
			<td>left</td>
			<td>right</td>
			<td>right</td>
			<td>right</td>
		</tr>
		<tr>
			<td>ピンク</td>
			<td>水色</td>
			<td>紫</td>
			<td>黄色</td>
		</tr>
	</tbody>
</table>

結果↓

• td(th)にwidthを与えると、そちらが優先される
• そこで「.col1 td {……}」とやってみたが、構造的にtdはcolの子要素ではないので、不適当な書き方
  （参照：「特定の列の<td>または<th>だけにスタイルを – HTML – 教えて！goo」）
• その回避方法は、td(th)にidやclassを振るしかない？

ということで、やはりhtmlのコードが膨らんでしまうのがテーブルの嫌なところです。

ところで、tfootについて、
・tfoot は tbody の前に書いた方がいいよ | WWW WATCH
・tfoot に関するエントリーの補足 | WWW WATCH
・tableのtfootの記述位置について｜WEB Drawer -WEB制作に関するメモサイト-
・HTMLテーブル（表）の本体部分を定義するタグ <tbody> | 初心者でもわかるホームページの作り方
などにもあるように、ユーザーエージェントは（相当な行数もの）データのすべてを読む前にtfootをレンダリングできる（user agents can render the foot before receiving all of the (potentially numerous) rows of data）という理由から、

<table>は、 <thead> <tfoot> <tbody> の順に書く方が良い

ということを最近知りました。