ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング