33 視覚的な表現を追加した訪問済みのリンク | デザインってオモシロイ -MdN Design Interactive-


33 視覚的な表現を追加した訪問済みのリンク
制作・文=境祐司

To Use
XHTML
CSS
JavaScript
Photoshop
Illustrator
Fireworks
透過PNG




XHTML

【1】メニューとして表示するリスト(<ul><li>~</li></ul>)を<div>要素を追加して、全体をグループ化しておく


CSS

【2】メニュー項目全体の幅を指定(width: 254px;)してボックスの領域を決める。続けて、リスト項目の頭に付くリストマーカーの画像(navi_icon.gif)を指定



【3】:visited疑似クラスで訪問済みリストマーカーを指定する(#contents ul li a:visited {background:#fff url(navi_icon2.gif)left center no-repeat;})


▼使いどころ
サイドバーなどに更新頻度の高いリンクが大量に表示される場合、一度チェックしたページを視覚的に確認できると便利だ。リストマーカー(背景画像)と:visited疑似クラスで容易に実現できる。
twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

1.14-1.20