疑似クラスを使い見栄えの良いリンク表現

疑似クラスとは、要素が特定の状態であることを表します。疑似クラスにもいろいろ種類がありますが、いちばん使用する頻度が高いのはページ内のナビゲーション部分でしょう。

この際、「a:link(未訪問のリンク）」「a:visited（訪問済みのリンク)」「要素名:hover（マウスを合わした状態）」「要素名:active（クリックした時の状態）」などが使われます。テキストに対してこれらの疑似クラスを指定して、各リンクの色を設定することが多いですが、それと合わせ、backgroundプロパティで背景色や背景画像を設定するなどして工夫すると見栄えのよいページができるでしょう。

デザインサンプル

サンプルCSSコード

＊あらかじめ「:link」「:hover」時に背景として表示させたい画像を制作しておきます。

.ul {
　　margin: 0px;
　　padding: 0px;
　　list-style-type: none;
}

.li {
　　margin: 0px;
　　padding: 0px;
　　display: inline;
}

.a {
　　margin: 0px;
　　text-decoration: none;
　　line-height: 3em;
　　font-weight: bold;
　　width: 191px;
　　height: 42px;
　　background-image:url(img/nav084.gif);
　　background-repeat: no-repeat;
　　color: #333;
　　text-align: center;
　　display: block;
}

.a:hover {
　　color: #fff;
　　background-image: url(img/nav085.gif);
　　text-decoration: underline;
}

スタイルシートデザインガイド