CSSでリンクの各状態をスタイリングする方法：:link・:visited・:hover・:activeの使い方
CSSの擬似クラスである :link、:visited、:hover、:active を使うことで、リンクのさまざまな状態に応じて個別のスタイルを適用できます。これらを正しく機能させるためには、記述する順序が重要です。推奨される順序は以下の通りです。
- :link … まだ訪問していないリンク
- :visited … すでに訪問済みのリンク
- :hover … マウスカーソルが乗っている状態のリンク
- :active … クリックされている瞬間のリンク
この順序を守ることで、後から定義したスタイルが意図せず上書きされるのを防ぎ、すべての状態が正しく反映されます。
構文
CSSでリンクの状態を指定する基本構文は次の通りです。
a:(pseudo-selector) {
/* 宣言 */
}例1：基本的なリンク状態のスタイリング
以下の例では、リンクの各状態ごとに色や装飾を変えています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-left: 20px;
display: flex;
float: left;
}
a:link {
color: navy;
text-decoration: none;
}
a:visited {
color: yellowgreen;
}
a:hover {
color: orange;
text-decoration: wavy underline;
}
a:active {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<a href="#">Demo link </a>
</div>
<div>
<a href="">Demo visited link</a>
</div>
</div>
</body>
</html>出力結果
このコードを実行すると、次のように表示されます。
最初のリンクにマウスを乗せた（ホバーした）場合は、以下のように変化します。
2番目のリンクをクリックした瞬間は、次のように表示されます。
例2：視覚効果を加えたリンクスタイリング
次の例では、枠線やテキストシャドウ、ボックスシャドウなどを組み合わせて、より印象的なリンク表現を実現しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
float: left;
}
a {
margin: 20px;
padding: 10px;
border: 2px solid black;
text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black;
font-size: 1.1em;
}
a:link {
text-decoration: none;
}
a:visited {
color: blueviolet;
}
a:hover {
color: orange;
font-size: 150%;
font-weight: bold;
box-shadow: 0 0 5px 1px grey;
}
a:active {
color: red;
box-shadow: inset 0 0 15px red;
}
</style>
</head>
<body>
<div>
<a href="#">Kapow!</a>
<a href="">Dishoom</a>
</div>
</body>
</html>出力結果
このコードを実行すると、次のように表示されます。
最初のリンクにマウスを乗せると、文字が拡大され影が付きます。
クリックしている間は、内側に赤いシャドウが表示され、押し込まれたような演出になります。
まとめ
擬似クラスを活用すれば、通常時・訪問済み・ホバー時・クリック時それぞれに合わせたリンクデザインを簡単に実装できます。ユーザーにとって操作しやすいインターフェースを作るためにも、:link → :visited → :hover → :active の順序を守りながら、目的に応じたスタイリングを行いましょう。
-
CSSのtext-decoration-colorプロパティでリンクやテキストの下線の色を変更する方法
text-decoration-colorプロパティとはCSSのtext-decoration-colorプロパティは、text-decoration-lineで指定された装飾線（下線・上線・取り消し線など）の色を変更するために使用します。通常、下線は文字色と同じ色で表示されますが、このプロパティを使えば下線だけに別の色を指定でき、デザインの幅が大きく広がります。構文CSS text-decoration-colorプロパティの基本的な構文は以下のとおりです。Selector { text-decoration-color: /*値*/; }値には、redやviole
-
CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説
HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ