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

Post on:2009年8月3日

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

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

HTML

<textarea name="code" class="html" cols="60" rows="5">
<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>
</textarea>

<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>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
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;
}
</textarea>

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;

}

</textarea>

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

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

demo

HTML

<textarea name="code" class="html" cols="60" rows="5">
<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>
</textarea>

<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>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
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;
}
</textarea>

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;

}

</textarea>

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

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

demo

HTML

<textarea name="code" class="html" cols="60" rows="5">
<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>
</textarea>

<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>

</ul>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
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;
}
</textarea>

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;

}

</textarea>

4. プライスリスト

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

demo

HTML

<textarea name="code" class="html" cols="60" rows="5">
<dl id="pricelist">
	<dt>Beef</dt>
	<dd>$15</dd>
	<dt>Egg &amp; Bacon</dt>
	<dd>$9</dd>
	<dt>Cheeseburger</dt>
	<dd>$3</dd>
</dl>
</textarea>

<dt>Egg & Bacon</dt>

<dt>Cheeseburger</dt>

</dl>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
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;
}
</textarea>

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;

}

</textarea>

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

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

demo

HTML

<textarea name="code" class="html" cols="60" rows="5">
<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>
</textarea>

<ul>

<li>Chicken</li>

<li>Horse</li>

<li class="col2 top">Sheep</li>

</ul>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
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;
}
</textarea>

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;

}

</textarea>

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

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

HTML

CSS

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

HTML

CSS

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

HTML

CSS

4. プライスリスト

HTML

CSS

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

HTML

CSS

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

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

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

HTML

CSS

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

HTML

CSS

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

HTML

CSS

4. プライスリスト

HTML

CSS

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

HTML

CSS

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info