CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのアンカー疑似クラス（:link・:visited・:hover・:active）の使い方

CSSの疑似クラスセレクターである :active、:hover、:link、:visited を使うと、リンク（アンカー要素）の状態ごとに異なるスタイルを適用できます。

疑似クラスを正しく機能させるための指定順序

これらのセレクターは、記述する順序が非常に重要です。正しく動作させるためには、必ず以下の順序で定義してください。

  • :link
  • :visited
  • :hover
  • :active

この順序は「LVHA」と呼ばれることもあり、:hover や :active のスタイルが、先に定義した :link や :visited のスタイルによって上書きされないようにするための基本ルールです。

CSS疑似クラスの基本構文

a:(pseudo-selector) {
    /* declarations */
}

例1：リンクの状態ごとにスタイルを変える

CSSアンカー疑似クラスを使用した具体的な例を見てみましょう。

<!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>
<h2>Your favourite sports?</h2>
<a href="#">Football</a>
<a href="">Cricket</a>
</div>
</body>
</html>

出力結果

初期表示は以下のようになります。

CSSのアンカー疑似クラス（:link・:visited・:hover・:active）の使い方

最初のリンクにマウスカーソルを合わせると（ホバー時）、次のような表示になります。

CSSのアンカー疑似クラス（:link・:visited・:hover・:active）の使い方

リンクをクリックした瞬間（アクティブ時）は、以下のように変化します。

CSSのアンカー疑似クラス（:link・:visited・:hover・:active）の使い方

例2：グラデーション背景上でのアンカー疑似クラス

もう一つ、別のサンプルを見てみましょう。この例では、グラデーション背景の上に配置したリンクに対して、各状態のスタイルを設定しています。

<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
    color: #000;
    padding:20px;
    background-image: linear-gradient(135deg, grey 0%, white 100%);
    text-align: center;
}
.anchor {
    color: #FF8A00;
}
.anchor:last-child {
    color: #03A9F4;
}
.anchor:visited {
    color: #FEDC11;
}
.anchor:hover {
    color: #C303C3;
}
.anchor:active {
    color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>

出力結果

CSSのアンカー疑似クラス（:link・:visited・:hover・:active）の使い方

まとめ

アンカー疑似クラスを使いこなすことで、未訪問・訪問済み・ホバー中・クリック中といったリンクの状態を直感的にユーザーへ伝えられます。特に :hover や :active のフィードバックは、Webサイトの操作性やUX向上に大きく貢献します。定義順序「LVHA」を守り、効果的なリンクスタイリングを実装しましょう。

  1. CSS疑似クラスとクラスの組み合わせ方を徹底解説

    CSSの疑似クラス（Pseudo-classes）は、要素そのものに対して適用するだけでなく、CSSクラスと組み合わせることで、HTML要素をより柔軟かつ精密に選択・装飾することができます。この記事では、疑似クラスとクラスを組み合わせた実践的なサンプルコードを2つ紹介します。 例1：:lang()疑似クラスとクラスの組み合わせ まずは、:lang()疑似クラスをCSSクラスと組み合わせた例を見てみましょう。:lang()は、要素のlang属性の値に基づいてスタイルを適用できる疑似クラスです。 <!DOCTYPE html> <html> <head> <

  2. CSSの疑似クラス（Pseudo-class）とは？基本から実例までわかりやすく解説

    CSSの疑似クラス（pseudo-class）は、セレクタに追加することで、その要素の「特別な状態」を指定するためのキーワードです。これを使うことで、通常のセレクタだけでは表現できない細かいスタイル制御が可能になります。例えば、リンクにマウスカーソルが乗っている状態（:hover）、チェックボックスが選択されている状態（:checked）、すでに訪問済みのリンク（:visited）など、要素の状態に応じてスタイルを切り替えられます。代表的な疑似クラスの一覧:link … まだ訪問していないリンクに適用:visited … 訪問済みのリンクに適用:hover … マウスカーソルが要素の上にあると