33 視覚的な表現を追加した訪問済みのリンク
制作・文＝境祐司
|
 |
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疑似クラスで容易に実現できる。 |
［INDEX］
>>> 31 光の反射を表現し、知的な印象を与えるナビゲーション
>>> 32 ガーリーなテイストでデザインされたフレーム
>>> 33 視覚的な表現を追加した訪問済みのリンク
>>> 63 背景画像が手前に飛び出すように見える立体表現
>>> 64 デザイン性の高い洗練されたテイストの表組み
>>> 79 アンチエイリアスオフとテクスチャを合わせた文字
>>> 80 エリアを重ねたような立体感のあるレイアウト
>>> 81 繰り返し処理を考えたインパクトのある背景画像
>>> 82 写真のように鮮明な木目のテクスチャ画像
>>> 83 日めくりカレンダーにした日付のデザイン
