
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要素は、リストを定義するタグです。レイアウト目的で使うのは、どうかと思いますが、こういう発想無かったですね。ありえないですけど、ちょっとやられた感があります。
コメント