【CSS/html】aタグ(リンク)の色を変えない方法

「リンクの色を文字の色と同じにしたいんだよな」

「訪問後のリンクの色を変化させたくない」

CSSでaタグ(リンク)の色を変えない方法を解説します。

【結論】リンクの色を変えない方法

a,a:hover,a:visited{
    color: inherit;
}

aタグの色を親と同じ設定にすることでリンクの色を変えないようにします。

それだけではマウスを乗せたとき、再訪問したときに色が変わってしまうため「:hover」「:visited」のときも同様の指定をします。

【結論】訪問後のリンクの色を変えない方法

a,a:visited{
    color: #0071d1;/*カラーコードは任意*/
}

訪問後のリンクは「a:visited」です。訪問前のリンク「a」と同じ色を指定することで訪問後の色を変えないようにします。

hoverは任意ですが、違う色にしたほうがわかりやすいでしょう。

リンクの色＝aのcolor

リンクの色を指定するにはaタグのcolorを指定します。

a{
    color: ○○○;
}

訪問後の色＝a:visitedのcolor

訪問後のリンクはa:visitedのcolorを指定します。「:visited」は訪問後のときという条件を表す疑似クラスです。クラスがつくぶん優先度があがるので注意です。

a:visited{
    color: ○○○;
}

同様にマウスを乗せたときに色を変えるならa:hoverのcolorを指定します。visitedの後に指定しましょう。

a:hover{
    color: ○○○;
}

親と同じ設定にするinherit

inheritはどのCSSでも使えるCSSで親と同じ値にすることができます。

例えば親のcolorが#333ならaタグのcolorも#333になります。

aタグ、a:visited、a:hoverはブラウザ側で初期値にcolorが指定されています。そのためそれぞれをCSSで指定し色を変更しましょう。

下線の指定

本題とは異なりますが、リンクには通常下線が付きます。

a,a:visited{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

下線を消したいときは「text-decoration: none」、

下線を付けたいときは「text-decoration: underline」を指定しましょう。

【コラム】リンクの色を変える意味

ここまでリンクの色を変えない方法を紹介しましたが、基本的にはリンクはリンクとわかるようにしましょう。

メインメニューなど明らかにリンクとわかる場所はいいですが、文章中のリンクなどは周りと色が同じではリンクであることに気付かず見落としがちです。下線だけ引いていても同じです。

パソコンではマウスを乗せて変化させることでリンクがあるとまだ気づけますが、スマホでは「マウスを乗せる」という行為がありません。

見ただけでリンクだとわからせる必要があります。

リンクはクリックされて初めて意味があります。

リンクだと気づかれないのではそれ以前の問題です。

デザイナーは自分で作っている身ですので「わかるだろ」と思うかもしれませんが、訪問者はそうではありません。

意味のあるリンクを作りましょう。

【コラム】訪問後のリンクを変える意味

ユーザーは見たことない、知らない情報を求めています。

クリックしたら知っている情報だった、では少しがっかりしてしまうでしょう。

訪問後のリンクを変えることでこれを解消することができます。

とくにお知らせ一覧では効果抜群です。

昔は「NEW」アイコンを付けるということが流行っていました。

しかし、そのNEWはだれにとっての新情報でしょうか？

初めてサイトに来た人はNEWがついていない情報も新情報ですし、いつもサイトに来ている人はNEWがついている情報でも古い情報かもしれません。

一方「visited」で訪問後のリンクの色を変えておけばその人にとっての新情報がわかるようになります。

リンク、訪問後のリンクの色を変えるのはユーザビリティ、サイトの使いやすさのために重要なことなのです。

まとめ

リンクの色を変えない方法

a,a:hover,a:visited{
    color: inherit;
}

訪問後のリンクの色を変えない方法

a,a:visited{
    color: #0071d1;/*カラーコードは任意*/
}

以上、CSSでaタグ(リンク)の色を変えない方法でした。