CSSでリンクの色をクリック状態によって変える方法

CSSでリンクの色をクリック状態によって変える方法

CSSでリンクの色を変えるときにはリンクのクリック状態ごとに分けた色の指定ができます。

CSSでリンクの色を変更する方法として、aタグと親要素を連結したセレクタにcolorプロパティを指定することでリンクの色は変更できます。でもリンクがどんな状態でも色は統一されてしまいます。

しかしCSSでリンクの色を指定するときに「擬似クラス」を使用した場合には、リンクの色をクリック状態よって変えることができます。

 

CSSでリンクの色を変える方法

 

CSSでリンクの色を変える方法を先に説明しておきます。CSSでリンクの色をクリック状態によって変える場合には、リンクの色を変えるための基本として必要な方法になるからです。

 

<div class="test-link">
 <a href="#">Click</a>
</div>

 

上のHTMLがCSSでリンクの色を変えたい要素です。class属性がついてるdivタグが親要素、aタグでマークアップしてるのがdivの子要素にしたリンク要素です。

CSSではaタグでマークアップしてるリンクテキストの色を変更することになります。

 

.test-link a{
 color: deeppink;
}

 

リンクの色を変えたい場合には、リンク要素を包括してる親要素のclass名とリンクテキストをマークアップしてるaタグをCSSで連結させたセレクタを作ります。

そしてcolorプロパティの値にカラーコード一覧とかでカラーコードを探して指定します。

 

Advertisement

 

このようにCSSでリンクの色を変更した方法の場合には、リンクがどんな状態でもリンクの色はCSSで指定した色で統一されます。

ですがCSSでリンクの色を変更した方法に一手間加えることで、クリックの状態でリンクの色を変更できるようにできます。

 

リンクの色をCSSの擬似クラスで変更する

 

CSSでリンクの色をクリック状態によって変更するには「擬似クラス」を使用します。リンクの色を変更するために使うCSSの擬似クラスは以下の4つです。

 

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

 

記事の冒頭から、さんざん「クリック状態」と連呼してきましたが、上記4つのそれぞれの擬似クラスで、リンクがどんな状態にあるのか条件を決めることできるため、CSSでリンクの色をクリック状態で変更が可能になるのです。

 

:link

 

CSSの:link擬似クラスは「リンクが未訪問の状態の場合」に指定したリンクの色を変えることができます。

リンクが未訪問の状態のときなので、まだ一度もクリックしてない状態のリンクに対してのリンクの色を変更できる擬似クラスです。

CSSでリンクの色をクリック状態によって変える方法としては、:link擬似クラスで記述したリンクの色が基準になる色と考えます。

 

:visited

 

CSSの:visited擬似クラスは「訪問済みの場合」のリンクの色を変えることができます。一度訪れたWebサイトのページは訪問済みとなり、再び開くと:visitedで指定したリンクの色が適用できます。

例えば、私たちが普段Googleで検索してヒットしたWebサイトのページを訪れて、一度検索結果に戻ると訪れたページのリンク(タイトル)の色は変更されてます。

このときのリンクの色の状態が「クリックされた訪問後の状態」で:visitedで指定したリンクの色が適用されます。

 

:hove

 

CSSの:hover擬似クラスは、「リンクにマウスポインタが乗った状態」のときにリンクの色が変わります。:hoverで指定したリンク要素はマウスオーバーでリンクの色を変更できますが、スマホのタッチ操作ではリンクの色は変更されません。

:hoverはリンクをマウスでクリックする前の状態で、マウスポインタの動作によって適用したいリンクの色が変更できます。

 

:active

 

CSSの:active擬似要素は「リンクがアクティブ状態のとき」のリンクの色を変更できます。

アクティブ状態とは、通常マウスの左ボタンを押し下げたときの状態のことで、リンクをクリックして離さない押しっぱなし状態のことです。

リンクを押したままクリックし続ける状態なので、なんとなく中途半端なクリック状態?のときに:activeで指定するリンクの色の変更が適用されます。

 

リンクの色をクリック状態ごとに変更する書き方

 

CSSでリンクの色をクリック状態によって変える方法として、リンクの色はCSSの擬似クラスを使用して変更すればいいのだということが理解できたと思います。

あとはCSSでリンクの色をクリック状態ごとに分ける擬似クラスを指定した書き方をマスターするだけです。

 

<ul>
 <li class="tes-link"><a href="#01">Click01</a></li>
 <li><a href="#02">Click02</a></li>
 <li><a href="#03">Click03</a></li>
</ul>

 

上のHTMLでリンク要素を3つ作成したリスト要素のうち一つのリストにclass属性をつけて、CSSでリンクの色をクリック状態ごとに変更する書き方を一つずつ説明します。

 

訪問前のリンクの色を変える

 

まずはCSSでリンクの色を変更する方法のうち訪問前のリンクの色を変える書き方です。

 

.tes-link a:link {
 color:deeppink;
}

 

リンクの色を変更する要素のclass属性で指定したクラス名とリンクしたaタグを連結してセレクタにします。そしてコロンを書いた後ろに訪問前のリンクの色を変更できる擬似要素linkを記述します。

そして記述したセレクタの中にcolorプロパティを使って、値に訪問前に適用したいリンクの色を指定します。

 

 

そうすると上の画像のように3つあるリンクのうちCSSで訪問前のリンク色を変えたリンク(画像ではClick01)は、colorプロパティの値で指定した色に変更できます。

class属性をつけて一部だけのリンク色を変えてるので、リンクの色を変更してないリンク要素はブラウザのデフォルトの訪問前のリンク色で表示されます。(画像ではClick02と03)

 

訪問済みリンクの色を変更

 

次にCSSでリンクの色を変更する方法のうち訪問済みのリンクの色を変える擬似クラス:visitedをセレクタに指定した書き方です。

 

.tes-link a:link {
 color:deeppink;
}

.tes-link a:visited {
 color:gray;
}

 

訪問前のリンク色を変える記述の下にリンク要素につけたclass属性のclass名とaタグを連結し、コロンを書いて:visitedを加えます。

そして:visitedを加えたセレクタの中でcolorプロパティを記述して、colorの値にはリンクをクリックして訪問済み状態になったときに適用するリンクの色を指定します。

今回は例として訪問済みリンクの色をグレーにしました。

 

 

上の画像のClick01がCSSで訪問済みリンクの色をグレーに変更してクリックした訪問済み状態の表示です。

またClick02のリンクの色は、クリックして訪問済みにしたブラウザのデフォルトの訪問済みリンクの色で、Click03は訪問前のブラウザのデフォルトのリンク色です。

 

Advertisement

CSSで訪問前のリンクの色を指定した要素と同じ要素に、訪問済みリンクの色を変える指定をしていますが、検証ツールでCSSを確認するとリンクの色が訪問済みリンクの色で適用できてるので書き方に間違えがないのを確認できます。

 

マウスオーバー時のリンクの色

 

次はCSSでリンクの色を変更する方法のうち「マウスオーバー時のリンクの色」を擬似クラスの:hoverを使用して変える書き方です

 

.tes-link a:link {
 color:deeppink;
}

.tes-link a:visited {
 color:gray;
}

.tes a:hover {
 color:#333;
}

 

「:link」「visited」を記述した下に、マウスオーバー時にリンクの色を変更するセレクタを作り、作ったセレクタの後ろに:hoverを加えてマウスオーバーで適用するリンクの色を指定できるようにします。

セレクタを作ったらリンクにマウスが乗ったマウスオーバー時に適用したいリンクの色をcolorプロパティの値で指定します。

例としてマウスオーバー時のリンクの色を黒にしました。

 

 

上の画像でリンクテキストのClick01がリンクにマウスを乗せてマウスオーバーしたリンクの色(黒)が変更された状態の表示です。

このマウスオーバー時のリンクを変更したリンクの色は、マウスをリンクに乗せない状態だと、訪問前のリンクの色や訪問済みリンクの色をCSSで指定してるので、それぞれのクリック状態でリンクの色が適用されます。

 

アクティブ状態のリンクの色

 

最後にCSSでリンクの色を変更する方法のうち「アクティブ状態のリンクの色を変える書き方」です

 

.tes-link a:link {
 color:deeppink;
}

.tes-link a:visited {
 color:gray;
}

.tes a:hover {
 color:#333;
}

.tes a:active {
 color: red;
 text-decoration:underline;
}

 

「:link」「visited」「:hover」を記述した下にリンクの色を変えるCSSのセレクタを作り、セレクタの後ろにコロンをつけてactiveを記述します。

そしてアクティブ状態のリンク色をセレクタの中でcolorプロパティの値で指定します。

例としてアクティブ状態のリンク色を赤にして、消していたリンクの下線をあえてつけてみました。

 

 

上の画像がCSSでリンクの色をアクティブ状態にしてリンク色が適用された時の画像です。

リンクをクリックで押し下げした状態のままでアクティブ時に突入するので、リンクの色が変更されたか表示確認したい場合にはリンクにマウス左クリック押し下げ状態で確認してください。

 

CSSでリンクの色を指定する順番

 

CSSでリンクの色をクリック状態によって変えるために指定した「link」「visited」「hover」「active」の擬似クラスは、リンクの色を指定する順番を必ず守って指定します。

指定する順番は以下の順にします。

 

  1. :link
  2. :visited
  3. :hover
  4. :active

 

もし指定する順番を間違えてしまうとリンクの色を変えた「hover が効かない」とか「訪問済みのリンクの色が変わらない」などの原因になります。

例えば以下のCSSのようなクリック状態の順番でリンクの色を変更したとします。

 

/*ホバー*/
a:hover {
 color:#333;
}

/*訪問前*/
a:link {
 color:deeppink;
}

/*アクティブ*/
a:active {
 color: red;
 text-decoration:underline;
}

/*訪問済み*/
a:visited {
 color:gray;
}

 

そうするとhoverがvisitedのとき効かなくて色も変わらない。

さらにvisitedときにactiv状態にすると訪問済みリンクの色の状態でactiveで指定したアンダーラインが表示するおかしなリンク色の変更になってしまいます。

このようにリンクの色が変わらないなどの原因が起こらないように、CSSでリンクの色をクリック状態で変える指定順番を間違えないようにしてリンクの色を変更してください。

CSSカテゴリの最新記事