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

CSSでリンクをスタイリングする方法｜擬似クラスの基本と実例

CSSでリンクのデザインを変更するには、リンクが持つ以下の4つの状態を理解しておくことが重要です。これらはアンカー要素（<a>タグ）の擬似クラスとして定義されており、状態ごとに異なるスタイルを適用できます。

a:link …… 未訪問の通常リンク
a:visited …… すでに訪問したことのあるリンク
a:hover …… マウスカーソルがリンク上にある状態
a:active …… リンクがクリックされている瞬間

サンプル1：リンクの状態ごとに色を変える

それでは、実際のコード例を見てみましょう。次の例では、通常時・ホバー時・クリック時でリンクの文字色を切り替えています。

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
   color: orange;
   text-decoration: underline;
}
a:hover {
   color: red;
   text-decoration: underline;
}
a:active {
   color: green;
   text-decoration: underline;
}
</style>
</head>
<body>
<h1>Tutorials</h1>
<p><a href="https://www.tutorialspoint.com/java">Java</a></p>
<p><a href="https://www.tutorialspoint.com/chsharp">C#</a></p>
<p><a href="https://www.tutorialspoint.com/jquery">jQuery</a></p>
<p><a href="https://www.tutorialspoint.com/ruby">Ruby</a></p>
<p><a href="https://www.tutorialspoint.com/pytorch">PyTorch</a></p>
</body>
</html>

表示結果

CSSでリンクをスタイリングする方法｜擬似クラスの基本と実例

サンプル2：下線を消してシンプルなデザインにする

続いて、text-decoration を none に設定して下線を非表示にする例です。すべての状態で同じ色とスタイルを適用することで、すっきりとした印象のリンクになります。

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
   color: blue;
   text-decoration: none;
}
a:hover {
   color: blue;
   text-decoration: none;
}
a:active {
   color: blue;
   text-decoration: none;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is the <a href="https://tutorialspoint.com">reference</a></p>
</div>
</body>
</html>

表示結果

CSSでリンクをスタイリングする方法｜擬似クラスの基本と実例

ポイント：擬似クラスの指定順序に注意

これらの擬似クラスは、:link → :visited → :hover → :active の順（いわゆる「LVHA順」）で記述するのが推奨されています。CSSでは後から書かれたルールが優先されるため、順序を誤るとhoverやactiveのスタイルが正しく反映されない場合があります。

また、プライバシー保護のため、:visited に対して指定できるプロパティはブラウザ側で制限されています。変更できるのは主に文字色や背景色などに限られる点も覚えておきましょう。

  1. CSS属性セレクターでフォームを美しくスタイリングする方法

    CSS属性セレクターとは CSSの属性セレクターを使用すると、特定の属性やその値を持つHTML要素だけを対象にスタイルを適用できます。フォームの入力欄やボタンのように、同じタグでも役割が異なる要素を個別に装飾したい場合に特に便利です。 属性セレクターには、主に以下のような記述ルールがあります。 p[lang] ― lang属性を持つすべてのp要素を選択します。 p[lang=fr] ― lang属性の値が「fr」に完全一致するすべてのp要素を選択します。 p[lang~=fr] ― lang属性の値に「fr」という単語が含まれるすべてのp要素を選択します(空白区切りの値リストに部分一致)。

  2. CSSの::first-letter疑似要素で文章の最初の一文字をおしゃれに装飾する方法

    ::first-letter疑似要素とは？ CSSでは、::first-letter（ファーストレター）疑似要素を使うことで、要素の最初の一文字だけを自由に装飾できます。雑誌や書籍の冒頭でよく目にする「ドロップキャップ」と呼ばれる演出効果も、追加のHTMLマークアップや画像を用意することなく、CSSだけで手軽に実現可能です。 なお、::first-letterの適用対象となる「最初の文字」は、句読点などの記号、ダイグラフ（合字）、contentプロパティによって生成されるコンテンツなどが存在する場合には変化することがあるため、注意が必要です。 それでは、CSSの::first-letter疑似