第17回 訪問済みリンクを一工夫しようテーブルレイアウトを卒業しよう

訪問済みリンクを一工夫しよう

リンク、つまり<a>をCSSでデザインする際は疑似クラスをよく使います。:linkや:hoverなんてやつですね。念のため疑似クラスのおさらいです。

:link
訪問前のリンク
:visited
訪問済のリンク
:active
選択中のリンク
:hover
カーソルが重なった状態
:focus
キー操作等でフォーカス中の状態

こんなかんじですね。

これを使って、各状態をデザインしていくわけですが、たまに見かけるのが:hover以外全部同じデザインになっているようなリンクです。

別 に間違っているわけではないのですが、リンク先のページが既に訪問済みなのかどうなのか、一見してわからないのはユーザビリティ的にはあまりよくありませ ん。CSSでデザインされていなくても、一般的なブラウザーで訪問済みリンクが紫になるのは、ユーザーに対して「このページは既に見ているよ」と知らせる役割があるからです。

そこで今回は、これまでご紹介してきたテクニックの合わせ技で、訪問済みリンクをわかりやすくデザインしてみたいと思います。

使うテクニックは以下の2つです。

<div class="nav">
<ul>
<li><a href="./01.html">top</a></li>
<li><a href="./02.html">info</a></li>
<li><a href="./03.html">link</a></li>
</ul>
</div>
li {
list-style-type: none;
}
li a{
padding-left: 18px;
background: url(list_icon.gif) 0 0 no-repeat;
text-decoration: none;
}
li a:link{
color: #999;
}
li a:visited{
background-position: 0 -58px;
color: #333;
}
li a:hover{
background-position: 0 -28px;
text-decoration: underline;
color: #666;
}

するとこうなります。上から、訪問済み、訪問前、カーソルが重なった状態です。

リンク状態

背景に使った画像はこちら。

リンク背景に使った画像

今回は<li>ではなく、<a>のbackgroundで画像を指定しましたが、これは、<a>の状態によって画像をずらしたいからです。ちょっと難点なのは、3つのアイコンを含む大きい画像を使っているので、「CSSでリストをデザインする」でやったようなcenter指定ができないことです。なので、画像サイズやフォントサイズは微調整が必要になります。それが大変な場合は、今回のような画像をずらす方法ではなく、バラバラの3つの別画像をそれぞれ指定すればよいでしょう。

いずれにしても、visitedをわかりやすくすることで、ちょっと閲覧しやすい親切なページになるのではないでしょうか。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
CSSはショートハンドで楽して書こう
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読