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

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

CSSを使えば、リンクを自由自在にスタイリングできます。文字に色をつけたり、背景を設定したり、サイズを変更したりといった書式設定はもちろん、アニメーションを組み合わせれば、マウス操作に応じた心地よい視覚効果も簡単に実現できます。

擬似クラスは「LVHA」の順序で記述する

リンク関連の擬似クラスを正しく機能させるには、次の順序で記述することが重要です。

  1. :link … 未訪問のリンク
  2. :visited … 訪問済みのリンク
  3. :hover … マウスカーソルが乗っている状態
  4. :active … クリックされている瞬間

この順序は各擬似クラスの頭文字を取って「LVHA順」と呼ばれます。順序を守らないと、後から宣言したスタイルが先のものを上書きし、意図した通りに表示されなくなることがあるので注意しましょう。

実装例1：背景色とボックスシャドウが変化するホバー効果

以下の例では、2つ目のリンクに対してIDセレクター「#mod」で基本スタイルを設定し、:hover 擬似クラスによってマウスオーバー時の見た目を変化させています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 25px;
}
#mod {
   padding: 10px;
   color: darkturquoise;
   border: thin solid;
   background-color: lemonchiffon;
}
#mod:hover {
   color: white;
   box-shadow: 0 0 0 1px black;
   background-color: slateblue;
}
</style>
</head>
<body>
<p>
<a href="mailto:user@example.com">Demo link</a>
</p>
<p>
<a id="mod" href="mailto:user@example.com">Modified demo link</a>
</p>
</body>
</html>

表示結果

このコードを実行すると、次のように表示されます。

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

2つ目のリンクにマウスカーソルを合わせると、文字色が白に、背景色がスレートブルーに変化し、黒い枠線のようなシャドウが表示されます。

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

実装例2：文字サイズと装飾が変化するホバー効果

次の例では、:hover のタイミングで font-size を拡大し、text-decoration: overline で上線を追加しています。また、box-shadow を使って柔らかな影の演出も加えています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 25px;
   display: flex;
   float: left;
   border: thin solid;
   background-color: snow;
   padding: 20px;
}
body * {
   border-radius: 5%;
}
#mod {
   padding: 10px;
   color: royalblue;
   text-decoration: none;
}
#mod:hover {
   box-shadow: 0 0 10px 2px black;
   text-decoration: overline;
   font-size: 1.2em;
}
</style>
</head>
<body>
<div>
<button><a href="#">Demo</a></button>
<a id="mod" href="#">Demo</a>
</div>
</body>
</html>

表示結果

このコードを実行すると、次のように表示されます。

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

2つ目のリンクにマウスカーソルを合わせると、文字が約1.2倍に拡大され、上線が引かれ、周囲にぼんやりとした影が浮かび上がります。

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

まとめ

リンクのスタイリングでは、:link・:visited・:hover・:active の4つの擬似クラスをLVHAの順序で定義するのが基本です。:hover と組み合わせて色・影・文字サイズなどを変化させれば、JavaScriptを使わずとも直感的で魅力的なインタラクションを実装できます。ぜひ自分のサイトでも試してみてください。

  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疑似