スポンサー
ウェブデザイン基礎講座
- ウェブデザインの大原則 ( 48 )
- ウェブユーザビリティ ( 6 )
- カラーセオリー ( 6 )
フォトショップ講座
- フォトショップの基本 ( 230 )
- エフェクト ( 169 )
- テキスト ( 81 )
- テクスチャ&パターン ( 60 )
- ウェブレイアウト ( 38 )
- ドロー ( 73 )
- カラーマネージメント ( 29 )
- 画像加工&合成&修正 ( 127 )
HTML&CSS講座
- HTML&CSS ( 41 )
グラフィック講座
- AdobeIllustrator ( 37 )
- Fireworks ( 1 )
Flash講座
- Flash ( 31 )
3D講座
- 3D ( 1 )
ウェブプログラミング講座
サイトメンテナンス講座
- サイトメンテナンス ( 39 )
サイト紹介
- サイト紹介 ( 8 )
スペシャルリンク
サイト内検索
メールマガジン
デザイナー向けのメルマガ
毎週金曜日に発行しています
毎週金曜日に発行しています
テクニック
Home ＞
HTML&CSS講座
＞ リストのマーカーを変化させる
リストのマーカーを変化させる
リストのマーカーを変化させる 
投稿日：2007年8月24日 レベル：初心者 ソフトウェア：-
まず、つぎのようなHTMLコードを作りましょう。
このコードと、筆者がAdvanced Lists Tutorialで使っているものとの、おもな違いは、liタグに余分な属性が加わったことです。つまり、#rollover li a（リンク用）とand #rollover li a:hover（ホーバー中のリンク用）です。このページのリンクにはarrow.gifのイメージが表示されますが、ホーバー中（カーソルがリンク上にある）はorange_arrow.gifのイメージに変わります。とても気の利いたトリックですよね。
スポンサードリンク
Step1：リスト
このコードはWeborumのサイトから拝借したものですが、いますでに自分のサイトで使っているリストでも、非常に簡単にマーカー（ビュレットイメージ）に“効果”を追加することができます。
まず、つぎのようなHTMLコードを作りましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>CSS rollover Bullet List Example</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<ul id="rollover">
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
</ul>
</body>
</html>
<html lang="en">
<head>
<title>CSS rollover Bullet List Example</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<ul id="rollover">
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
</ul>
</body>
</html>
Step2：CSSコード
ここにrolloverというidのリストがあります。これが、このリストだけに効くCSSということになります（サイト全体のリストは影響しません）。さてつぎは、CSSコードです。
<style type="text/css">
#rollover ul, #rollover li {
list-style-type: none;
line-height: 20px;
}
#rollover li a {
background-image: url(arrow.gif);
background-repeat: no-repeat; background-position: 0 .4em;
padding-left: 15px;
}
#rollover li a:hover {
background-image: url(orange_arrow.gif);
background-repeat: no-repeat; background-position: 0 .4em;
padding-left: 15px;
}
</style>
list-style-type: none;
line-height: 20px;
}
#rollover li a {
background-image: url(arrow.gif);
background-repeat: no-repeat; background-position: 0 .4em;
padding-left: 15px;
}
#rollover li a:hover {
background-image: url(orange_arrow.gif);
background-repeat: no-repeat; background-position: 0 .4em;
padding-left: 15px;
}
</style>
このコードと、筆者がAdvanced Lists Tutorialで使っているものとの、おもな違いは、liタグに余分な属性が加わったことです。つまり、#rollover li a（リンク用）とand #rollover li a:hover（ホーバー中のリンク用）です。このページのリンクにはarrow.gifのイメージが表示されますが、ホーバー中（カーソルがリンク上にある）はorange_arrow.gifのイメージに変わります。とても気の利いたトリックですよね。
引用:Web Design Library 著者:Joseph Skidmore 翻訳:OJer
スポンサードリンク
