CSSでリンクの色を変更する方法【初心者向け】

今回はCSSでリンクの色を変更する方法を紹介します。

初心者向けに丁寧に解説していきますのでぜひ最後までお付き合いください。

リンク色を変更するCSSの書き方

リンクの文字色を変更する時はCSSのcolorプロパティを使用します。

テキストリンクの文字色を青色（blue）にしてみました。

また、テキストリンクと言っても、状態によって下の4つに分類することができます。

• リンク先に訪問したことがない状態
• 既に訪問したことがある状態
• マウスオーバー時の状態
• クリックまたはタップ時の状態

それぞれの状態において色を指定することも可能です。

それでは順に解説していきます。

a:link（リンク先に訪問したことがない状態）

リンク先に訪問したことがない時は:linkという疑似クラスを使用します。

リンク先に訪問したことがない時のテキストリンクは水色（skyblue）にしました。

初めてクリックすると訪問済みとなり、水色ではなくなります。お試しください。

a:visited（既にリンク先に訪問したことがある状態）

既にリンク先に訪問したことがある時は:visitedという疑似クラスを使用します。

既にリンク先に訪問したことがある時は藍色（navy）にしてみました。

初めてリンクをクリックすると藍色に変わります。

a:hover（マウスオーバー時の状態）

テキストリンクのマウスオーバー時には:hoverという疑似クラスを使用します。

マウスオーバー時はオレンジ（orange）です。

色が変わるのでパソコン操作時にマウスオーバーしてみてください。

※スマホではマウスオーバーは関係ないですが、タップすることでも色が変化するのを確認することができます。

a:active（クリックまたはタップ時の状態）

パソコン操作時のマウスクリック、またはスマホ操作時のタップ時には:activeという疑似クラスを使用します。

クリック時は紫色（purple）になります。

クリックまたはタップして色の変化をお楽しみください。

特定タグのリンク色を変更する

特定のリンク色を変更することも可能です。

例えば<headerタグ>だけ、特定のclassのタグだけ、といった具合です。

上のCSSでは<headerタグ>、<footerタグ>の他、特定のclass、idを持つタグそれぞれのリンク色を指定しています。

最後に

最後に今回のまとめです。

• リンク色の変更には<aタグ>にCSSのcolorプロパティを使う
• a:linkでリンク先未訪問時の色を指定
• a:visitedで訪問済みのリンクの色を指定
• a:hoverでマウスオーバー時のリンク色を指定
• a:activeでクリック時のリンク色を指定
• 特定タグのリンク色も変更できる