CSSの記述テクニック 階層宣言コーディング

2007-04-02追記

この記事は2007年4月1日にエイプリールフールネタとして書かれたものであり、紹介しているCSSの宣言ブロック内にセレクタを記述する方法は不正な書式であり無効です。

検索・他の記事から訪れた人は勘違いしないように注意してください。

CSSの記述はセレクタを並列に定義していくので、視覚的に構造を表すことができません。ここで定義グループごとにファイルを分割して管理したりする方法が有効になるのですが、これもXHTML文書の構造を頭にいれておかなければならないし、文書とビジュアルの結びつきをきちんと設計しなければ分割する意味がなくなってしまいます。

今日は、これらの弱点を埋める「階層宣言コーディング」という記述方法を紹介します。

次の記述は単純に文脈セレクタを使った記述です。

p.caution {
 color: red;
 font-weight: bold;
}

div.entry {
 background-color: #eee;
}

div.entry p.caution {
 border: 1px solid green;
 margin: 1em;
}

上記の記述では、まず、p.cautionに対するスタイルが定義された後にdiv.entry内に出現するp.cautionに新たにスタイルが定義されています。宣言自体は並列にならぶので、スタイルの構造は文脈セレクタを頼りに先頭から目で追って理解するしかありません。これだけならまだ構造を理解するのは難しくありませんが、同じ階層の要素にスタイルを定義する場合は、そのつど文脈セレクタを頭から書いていかなければならず、記述は煩雑になります。

これを文脈セレクタを使わずにスマートに記述するには、次のように宣言ブロック内で新たなセレクタと宣言ブロックを定義していきます。

body {
	p.caution {
 		color: red;
 		font-weight: bold;
	}

	div.entry {
 		background-color: #eee;
		p.caution {
			border: 1px solid green;
			margin: 1em;
		}
	}
}

上記の記述では、div.entry内のp.cautionは、文脈セレクタではなく宣言ブロックの階層構造によって適用範囲が判断されます。つまり、宣言は下の階層へと適用され、それより上や同列のセレクタには適用されません。この記述方法はCSSの記述を簡略化するばかりか、視覚的にもカスケードの流れが理解でき、文書とビジュアルの結びつきを無視するのが難しくなるので、自然とコードを綺麗にまとめられるという利点があります。

次に上げるページは、CSSでは文脈セレクタを一切使わずに階層構造のみで記述してスタイリングされています。

• 階層宣言を利用して製作したページ

CSSの記述は以下のようになっています。

@charset "utf-8";

/*
* Author: wu
* WebSite: http://3ping.org/
* Date: 4/1
*/

*{
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: normal;
	body{
		margin: 0 20px 1em;
		background-color: #444;
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		/* elements */
		h1{
			margin: 1em 0 0.5em;
			font-size: 140%;
			color: #fff;
		}
		h2{
			margin: 0.5em 10px;
			padding: 0.1em 10px;
			color: #fff;
			background-color: #bccd56;
		}
		h3{
			margin: 0.5em 10px;
			padding: 0.1em 10px;
			color: #999;
			background-color: #eee;
		}
		p{
			margin: 0.4em 20px;
			color: #666;
		}
		ul{
			margin: 0.5em 20px;
			list-style-position: inside;
		}
		
		dl{
			margin: 0.5em 20px;
			border-left: 5px solid #eee;
		}
		dt{
			padding-left: 10px;
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			color: #80af00;
		}
		dd{
			margin: 0 20px;
			color: #999;
		}
		address{
			margin: 0 20px;
			color: #999;
		}
		/* 汎用クラス */
		p.return{
			clear: both;
		}
		/* Structure */
		div#content{
			width: 100%;
			margin: 1em 0 0.5em;
			padding: 1px 0;
			background-color: #fff;
			/* div#entries */
			div#entries{
				width: 70%;
				float: left;
			}
			div.entry{
				margin: 1em 0;
				ul.info{
				 	li{
						display: inline;
						color: #999;
						font-size: 80%;
					}
				}
			} /* end div#entries */
			/* div#utilities */
			div#utilities{
				width: 30%;
				float: right;
				clear: right;
				background-color: #f5f5f5;
				ul{
					list-style-type: square;
					color: #999;
				}
				dl{
					margin: 0.4em 10px;
					padding: 1px 0;
					background-color: #eee;
					dt,
					dd{
						margin: 0.2em 10px;
					}
					dt{
						padding: 0;
						border: none;
						color: #000;
					}
					dd{
						color: #999;
					}
				}
			} /* end div#utilities */
		} /* end div#content */
	} /* end body */
} /* end Universal Selector */

文脈セレクタが一切使われていない点に注目してください。ほとんどは単一セレクタの階層構造によって定義されています。

最初の階層には全称セレクタを指定しますが、これは省略することができます。その場合、ルートセレクタはbodyになります。bodyは省略できず、省略した場合はその後の階層を無視します。(IE6だけはbodyを省略しても適用されるが、これはバグです)

スタイルの継承が階層構造によって視覚的に見えるので、今までの記述方法でうまくCSSを管理できない方は、これからはｗこの階層宣言コーディングｗっでｗCSSを記述してはどうでしょうか?ｗｗｗｗｗｗｗ

^0^