スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > リストのマーカーを変化させる

リストのマーカーを変化させる

投稿日:2007年8月24日   レベル:初心者    ソフトウェア:-

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>


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>


このコードと、筆者がAdvanced Lists Tutorialで使っているものとの、おもな違いは、liタグに余分な属性が加わったことです。つまり、#rollover li a(リンク用)とand #rollover li a:hover(ホーバー中のリンク用)です。このページのリンクにはarrow.gifのイメージが表示されますが、ホーバー中(カーソルがリンク上にある)はorange_arrow.gifのイメージに変わります。とても気の利いたトリックですよね。

引用:Web Design Library 著者:Joseph Skidmore 翻訳:OJer



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング