リンクテキストのスタイルを指定したい

リンクテキストのスタイルを変更するとき、ほぼすべてのページで行います。:linkセレクタ、:visitedセレクタ、:hoverセレクタ、:activeセレクタを使用することで、ユーザーが要素にマウスポインタを重ねたり（ホバー）、クリックした入りするのに合わせて、適用するスタイルを切り替えことができます。おもにリンクの<a>要素に対して使われますが、:hoverセレクタと:activeセレクタは、<a>だけでなくほかのタグに対しても適用可能です。これらのセレクタを使うときに注意しなければならないのは記述の順番です。CSSには、必ず「:link」「:visited」「:hover」「:active」の順番で書いておかないと思った通りにスタイルが適用されません。

状態が変化したときにリンクテキストの色を変えています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>サンプル</title>
    <style>
      a:link{
        color: #4fb24b;
      }
      a:visited{
        color: #8b8b8b;
      }
      a:hover{
        color: #ff7c7e;
      }
      a:active{
        color: #5e85ff;
      }
    </style>
</head>
<body>
   <h1>代表的な検索エンジン</h1>
   <ul class="link">
        <li><a href="#">Google</a></li>
        <li><a href="#">MSN</a></li>
    </ul>
</body>
</html>

実際のサイトのリンクCSS

実際のWebサイトでは、リンクの<a>タグにスタイルを適用する時に、未訪問リンクの:link、訪問済みリンクの:visitedは使わないので、次のようなCSSを書くことが多いです。:linkや:visitedを省略する代わりに「a」をセレクタにしたスタイルを作成します。

a{
color:#4fb24b;
}
a:hover{
color:#ff7c7e;
}
a:active{
color:#5e85ff;
}

スマートフォンの「:hover」「:active」の動作はPCと違う

指で直接画面を操作するスマートフォンでは「:hover」や「:active」の状態に切り替わるタイミングが、マウスを使うパソコンとは異なります。基本的には、パソコンに比べてかなり遅いタイミングで状態が切り替わります。たとえば、リンクをタップすると、「ホバー状態」に切り替わるよりも前にリンク先のページが表示さえることも多く、:hoverに適用したスタイルに切り替わらないと感じることがあります。スマートフォンでは「:hoverセレクタ」や「activeセレクタ」で表示を切り替えるのは、あまり有効的ではないでしょう。その代わり、スマートフォンでは、「-webkit-tap-highlight -color」プロパティが用意されています。

カテゴリー:WEB