Webサイト内で参照ページなどがあるときに使用されるテキストリンク。

CSSで設定することでこのテキストリンクの色を変更することができます。

「CSSでどう設定するの？」「どんな色を使うのが正解なの？」

今回は、そんな疑問を持ち、CSSでリンクの色を変える方法を知りたい、という方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSを使ってリンクの色を変える方法がわかるようになりますよ。

ぜひ最後まで読んでくださいね！

CSSでリンクの色を変えるには？

まず、HTMLでリンクを作成しましょう。

<a href="#">リンクをクリック！</a>

上記のようにaタグで囲うと、中のテキストがテキストリンクになります。これをクリックすると別のページに飛ぶことができますね。

このままでもテキストに色がついていますが、これはブラウザの仕様で、ブラウザによって異なります。

それでは、CSSを使ってこの色を自分で設定してみましょう。リンクの色を変えるには、セレクタに要素名のaを指定します。

a {
  color: green;
}

リンクの色が緑色になったことが確認できたでしょうか？

今回はわかりやすくするために緑色を指定していますが、この後でも解説するように、リンクの色は青系が良いとされています。

リンクだとわかりにくい色は避けた方が良いでしょう。

また、CSSを使えば、テキストの色以外にも様々な指定ができます。

リンクでよく使われる指定として、下線を非表示にするtext-decorationプロパティがあります。

a {
  color: green;
  text-decoration: none;
}

このように指定すると、リンクの下線を非表示にすることができます。

反対に、下線を表示させるには「text-decoration:underline」を使います。

色が変わるのを防ぐ方法について

リンクに対してCSSを指定していない場合、リンクにはブラウザ仕様の色がついています。

このデフォルト以外にも、クリックした際やリンクが訪問済みになった際などにも色が決められています。

a要素にcolorを指定することで、これらの色も同じものになり、状態によって色が変わるのを防ぐことができます。

また、それぞれの状態のときの色を指定するには、疑似クラスを使用します。

a:visited {
  color: blue;
}

こうすることで、訪問済みサイトのリンクの色が変わります。

リンクの状態を指定する疑似クラスは、この他に以下の3つがあります。

中でも、マウスカーソルがホバーした状態の:hoverはよく使われます。

色々と試してみてくださいね。

リンクの色で最適なものは？

リンクの色は自由に指定できますが、色選びには注意が必要です。

クリックできるリンクだとすぐにわかる色が望ましいですね。

ここでは、色指定について詳しく解説していきます。

テキストリンクで最適な色について

文章の中にあるテキストリンクの色で最適なものは、青系の色になります。

Googleなどの検索エンジンはもちろん、多くのサイトで青系の色が使用されているため、直感的にリンクだと認識してもらえます。

特別な理由がない限りは、青で統一しておくと良いでしょう。

場所に応じた指定方法について

文章の中のテキストリンクにおいては、青系が良いのですが、他の場所では必ずしもそうだというわけではありません。

例えば、フッターなどは背景色がある場合が多く、色によってはそこに青いテキストを乗せると違和感が生まれます。

サイドバーにおいても青系は避けた方が良いでしょう。サイドバーに並ぶカテゴリーなどの項目は、クリックできるもの、として認識するため、青くする必要はありません。

多くのリンクに青系を使用すると、古い昔のサイトという印象を与える可能性もあります。

青系の色を指定するのは、テキストリンクのみにしておいた方が良さそうですね。

まとめ：リンクの使い方をマスターしよう

今回は、CSSを使ってリンクの色を変える方法を解説してきました。

リンクの場所に応じて最適な色が異なる、ということも紹介しましたね。

Webページを作るにあたって、リンクの知識は必須となります。

今回の記事が参考になれば幸いです。