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

ハイパーリンクは、デフォルトの状態だと青色に下線で表示されますよね。かなり見やすい表示ですが、サイトのデザインによっては違和感が出てしまうかもしれません。なので、全体のバランスを考えて、配色や装飾を変える必要があります。

ただ、あまりに馴染み過ぎると、どこにリンクがあるのか分からなくなるので注意しましょう。派手になりすぎず、リンクだと判別できるような配色が大切です。

ここでは、リンクの色を変える方法を紹介していきます。

 

「colorプロパティ」でリンクの色を変える

リンクの色は、a要素に対して「colorプロパティ」を利用することで変更できます。なので、「a {color: #FF0000;}」とすれば、リンクが赤色になります。ただ、これだとWebサイトのリンクが全て赤色になってしまいます。なので、個別にリンク色を指定するなら、IDやclassを使ってスタイルを適用してください。

また、色を変える以外にも、「backgrond-color」で背景を変えたり、「text-decoration」で装飾を変えたりすることもできます。組み合わせ次第で個性的なリンクを作ることもできますから、試してみると良いでしょう。

【CSS】
a {
color: #FF0000;
background-color: #FFFF00;
text-decoration: overline;}

【HTML】
<a href=”#”>ここにリンクが入る</a>

リンクに色々な装飾を加えると、以下のようになります。あまり奇抜にすると違和感があるので、少し大人しいデザインの方が好ましいですね。

ここにリンクが入る

 

マウスの状態によってリンク色を変える

通常のテキストと違って、リンクは色々な状態になる要素です。たとえば、「未訪問リンク」と「訪問済みリンク」は異なりますし、カーソルを合わせた状態やクリックした状態などでも、スタイルを変えることが出来ます。

状態によって色を変える指定をすると、過去にどのリンクを見たのかが一目で分かります。なので、ユーザービリティの向上にもなるわけです。ですから、しっかりと指定しましょう。

リンクのスタイルを細かく指定するには、「疑似クラス」というセレクタを使います。以下の表を参考にしてください。

a:link 未訪問リンク
a:visited 訪問済みリンク
a:hover カーソルを合わせた状態
a:active クリックしてから離すまで
a:focus キーボードのTabキーなどでで選択した状態

これらを設定することで、動的なアクションを指定できます。サイトの個性を出すことが出来ますから、設定しておきましょう。

 

以上、リンクのスタイル指定について解説しました。CSSの中でも使用頻度が高いですので、しっかりとマスターするようにしてください。慣れてくれば、無意識に設定できるようになるはずです。

サブコンテンツ

このページの先頭へ