[CSS]リスト要素を使用したスタイルシートの5つのトリック

ul, ol, dl要素を使用したスタイルシートの5つのトリックをPieter Beulqueから紹介します。

5 CSS tricks with lists

• 1. 数字だけ異なるスタイルに
• 2. 背景が変わるナビゲーション
• 3. 最後の項目がフェード
• 4. プライスリスト
• 5. 一つのリスト要素で複数のカラム

1. 数字だけ異なるスタイルに

ol要素を使用して、数字だけ異なったフォントのスタイルを実装します。

demo

HTML

<ol>
<li><span>Lorem ipsum dolor ... elit.</span></li>
<li><span>Aliquam ... eu risus.</span></li>
<li><span>Vestibulum ... neque.</span></li>
<li><span>Lorem ipsum dolor ... elit.</span></li>
<li><span>Aliquam ... eu risus.</span></li>
<li><span>Vestibulum ... neque.</span></li>
</ol>

CSS

ol{
	font-family: Georgia, sans-serif;
	font-style: italic;
	color: #999;
	font-size: 16px;
}

ol li{
	margin: 5px 0;
}

ol li span{
	font-style: normal;
	color: #333;
	font-size: 14px;
}

2. 背景が変わるナビゲーション

ul要素を使用して、ホバー時に背景が変わるナビゲーションを実装します。
要画像：sprite.jpg

demo

HTML

<ul>
<li><a title="Lor" href="#">Lorem</a></li>
<li><a title="Aliq" href="#">Aliquam</a></li>
<li><a title="Morb" href="#">Morbi</a></li>
<li><a title="Prae" href="#">Praesent</a></li>
<li><a title="Pell" href="#">Pellentesque</a></li>
</ul>

CSS

ul {
	list-style-type: none;
	font-weight: bold;
}

ul li:first-child {
	border-left: 0;
}

ul li {
	display: inline;
	float: left;
	width: 200px;
	height: 50px;
	border-left: 1px solid #666;
	border-right: 1px solid #eee;
}

ul li a {
	display: block;
	width: 200px;
	text-align: center;
	height: 20px;
	background-image: url('sprite.jpg');
	padding: 15px 0;
	color: #333;
	text-decoration: none;
}

ul li a:hover {
	background-position: left 50px;
	color: #fff;
}

3. 最後の項目がフェード

ネガティブマージンを使用して、最後の項目がフェードするように実装します。
要画像：fade-list.jpg, fade-last.png
参考：ネガティブマージンの理解を深め、活用するテクニック集

demo

HTML

<ul>
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
<li class="last"><img src="fade-last.png" /></li>
</ul>

CSS

ul {
	list-style-type: none;
	font-size: 14px;
	line-height: 20px;
	color: #333;
}

ul li {
	width: 380px;
	background-image: url('fade-list.jpg');
	height: 80px;
	padding: 10px;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
	border-right: 1px solid #666;
}

ul li.last {
	margin-top: -100px;
}

ul li.last, ul li.last img {
	width: 402px;
	border: 0;
	padding: 0;
	height: 100px;
}

4. プライスリスト

dl要素を使用して、プライスリストを実装します。

demo

HTML

<dl id="pricelist">
<dt>Beef</dt>
<dd>$15</dd>
<dt>Egg & Bacon</dt>
<dd>$9</dd>
<dt>Cheeseburger</dt>
<dd>$3</dd>
</dl>

CSS

dl {
	width: 500px;
	font-style: italic;
	font-family: Georgia, sans-serif;
}

dl dt {
	width: 400px;
	height: 15px;
	padding: 5px 10px;
	border-bottom: 1px solid #666;
	display: block;
	float: left;
	margin: 5px 0;
}

dl dd {
	text-align: center;
	font-weight: bold;
	width: 80px;
	height: 15px;
	padding: 5px 0;
	border-bottom: 1px solid #666;
	display: block;
	float: left;
	margin: 5px 0;
}

5. 一つのリスト要素で複数のカラム

ネガティブマージンを使用して、一つのリスト要素で複数のカラムを実装します。
参考：ネガティブマージンの理解を深め、活用するテクニック集

demo

HTML

<ul>
<li>Chicken</li>
<li>Horse</li>
<li></li>
<li class="col2 top">Sheep</li>
<li></li>
<li class="col2">Fish</li>
<li></li>
<li class="col3 top">Duck</li>
<li></li>
<li class="col3">Bird</li>
</ul>

CSS

ul {
	list-style:none;
	width: 600px;
}

ul li {
	line-height: 20px;
	padding-left: 10px;
}

ul li.col2 {
	margin-left:150px;
	border-left: 1px solid #999;
}

ul li.col3 {
	margin-left:300px;
	border-left: 1px solid #999;
}

ul li.top {
	margin-top:-40px;
}