リスト（ul要素）とリストアイテム（li要素）でつくるレイアウト[CSS]

css0906042.jpg

sohtanaka.comより、おもしろい発想だったので、リストアイテム（li要素）でつくるレイアウトの紹介です。

デモページはコチラから

HTMLマークアップもCSSもごくシンプルです。

HTML

<div class="container">
<ul class="col3">
	<li>
		<h2>Column 1</h2>
	</li>
	<li>
		<h2>Column 2</h2>
	</li>
	<li>
		<h2>Column 3</h2>
	</li>
</ul>
</div>

CSS

.container {
	margin: 0 auto;
	width: 970px;
	overflow: hidden;
}
ul.col3 {
	width: 980px;
	margin: 20px 0;
	padding: 0;
	list-style: none;
	float: left;
}
ul.col3 li {
	float: left;
	background: #fff;
	width: 276px;
	padding: 10px 20px;
	margin: 5px 10px 5px 0;
}

しかし、ul要素は、リストを定義するタグです。レイアウト目的で使うのは、どうかと思いますが、こういう発想無かったですね。ありえないですけど、ちょっとやられた感があります。