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

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

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

CSSの使い方を実用サンプルで学ぶ: XHTMLとCSSの基礎から学び、Web標準のホームページを作成。正しいマークアップや効率的な運用方法も。; XHTML & CSS 実践講座

: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をわかりやすくすることで、ちょっと閲覧しやすい親切なページになるのではないでしょうか。

では次回もお楽しみに。（こう）