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

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

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

この記事の目次

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

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

view raw css_a_color.css hosted with ❤ by GitHub

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

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

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

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

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

view raw css_a-link.css hosted with ❤ by GitHub

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

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

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

view raw css_a-visited.css hosted with ❤ by GitHub

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

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

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

view raw css_a-hover.css hosted with ❤ by GitHub

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

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

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

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

view raw css_a-active.css hosted with ❤ by GitHub

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

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

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

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

	/* headerのリンク色を変更する */
	header a{
	color: blue;
	}
	/* footerのリンク色を変更する */
	footer a{
	color: red;
	}
	/* greenというclassを持つタグのリンク色を変更する */
	.green a{
	color: green;
	}
	/* brownというidを持つタグのリンク色を変更する */
	#brown a{
	color: brown;
	}