borderプロパティでリンク画像の枠線を制御
画像にリンクを設定した場合、一般的な視覚系ブラウザでは、リンク画像の周りに境界線を表示します。この境界線を表示したくない場合には、img要素に「border: none」を指定してデフォルトスタイルをリセットすると良いでしょう。
img {
border: none;
}
リンク画像にデフォルトで表示される枠線を非表示にした場合、リンクが貼られていることが視覚的に分かりにくくなる可能性があります。リンク画像では、「押す」「行く」という動作や機能を視覚的に表現し、通常の画像と差別化すると良いでしょう。例えば、リンク画像をボタンのように立体的にしたり、小さな矢印アイコンや三角形アイコンを付加したりするなどの工夫が考えられます。
リンク擬似クラスで未訪問リンクと既訪問リンクのスタイルを振り分ける
「リンクのデフォルトスタイル」の節で述べたように、一般的な視覚系ブラウザでは、リンク先を訪問したことがあるかどうかで、リンクのアンカーを区別して表現します。CSSで両者の状態を区別して表現するには、未訪問リンクは「:link」、既訪問リンクは「:visited」というリンク擬似クラスを使用します。
a:link { color: #003399; } /* 未訪問リンクの文字色を#003399に */
a:visited { color: #660099; } /* 既訪問リンクの文字色を#660099に */
ダイナミック擬似クラスでユーザーアクションに応じてスタイルを振り分ける
さらに、ポインタのホバー時には「:hover」、アクティブ時は「:active」、フォーカス時には「:focus」というダイナミック擬似クラスを使用して、ユーザーアクションに応じたスタイルを適用させることができます。
「:hover」「:active」擬似クラスについては、リンク擬似クラスと共に、a要素に指定し、リンクテキストのスタイルをコントロールするのに使用されるのが一般的です。これらについては次節で詳しく紹介しましょう。
「:focus」擬似クラスについては、弱視のユーザーなどがアクションしやすいよう要素を目立たせるために使用されることが多く、例えば、background-colorプロパティで背景色を指定して、要素をハイライト表示させるような使い方をします。しかし「:focus」擬似クラスは、IE 7以下でサポートされていないため、クロスブラウザなデザインを実現するには、別途「csshover3.htc」のようなスクリプトを使用する必要があります。なお、「:focus」をサポートする視覚系ブラウザで、フォーカス時に要素のまわりにデフォルトで表示されるボーダーは、border関連プロパティではなく、outline関連プロパティで制御することができます。
| ダイナミック擬似クラス | 説明 |
| 「:hover」 | ある要素がマウスのようなポインティングデバイスで指し示されているが、まだアクティブではない状態の時に適用される |
| 「:active」 | ある要素がアクティブな状態の時（例えば、マウスや実行キーなどを押してから離すまでの間）に適用される |
| 「:focus」 | ある要素がフォーカスを受けている状態の時（例えば、アクセスキーやTabキーなどのキーボード操作によってフォーカスを受けている状態の時や、入力フィールドにテキストを入力できる状態の時）に適用される |
複数の擬似クラスを指定する場合は、記述順序に注意する
次の例では、未訪問リンクと既訪問リンクの下線を非表示に指定し、文字色（前景色）をそれぞれ「青」と「緑」に指定、ホバー時とアクティブ時には下線を表示、文字色は「赤」になるよう指定しています。
a:link {
color: blue; /* 文字色を青に */
text-decoration: none; /* 装飾しない（下線を非表示） */
}
a:visited {
color: green; /* 文字色を緑に */
text-decoration: none; /* 装飾しない（下線を非表示） */
}
a:hover, a:active {
color: red; /* 文字色を赤に */
text-decoration: underline; /* 下線を表示 */
}
この例のように、a要素に複数の擬似クラスを指定する場合には、スタイルの読み込み順序による優先度を意識して、「a:link、a:visited、a:hover、a:active」の順序で指定するようにしましょう。リンクのスタイルが期待した結果にならないといった問題は、指定順序に原因があることが多いのです。
例えば「a:hover」の記述が「a:link」や「a:visited」よりも前にある場合、ホバー時の指定は、後方の「a:link」や「a:visited」の指定に上書きされてしまうため、結果としてホバー時の状態になっても、スタイルは変化しないままになってしまいます。同様に、「a:active」の後に「a:hover」を記述した場合、「a:active」の指定は「a:hover」の指定に上書きされて無効になります。
