CSSでリンクタグの色や下線の設定変更

普段、パソコンやスマホでインターネットをしていると、当たり前のように使っているリンクテキスト。
そのリンクテキストにcssを使って色をつけたり、装飾をしたりできる設定方法をご紹介します。

リンクテキストのデザイン１つでブログやホームページのセッション数・回遊率が変わるので、色々と設定を変えて試してみてはいかがでしょうか。

リンクタグ<a>とは
リンク色の変更
リンクの下線の設定変更
- リンクの下線を消す
- リンクの下線を表示させる
まとめ

リンクタグ<a>とは

リンクタグとは、インターネット上のコンテンツの特定の一部をクリックした時に、現在閲覧中のページから、他のページに移動できるようにする技術です。みんなが当然のように使っている機能なのですが、意外とインターネットの最大の特徴とも呼ばれ、１つのページからありとあらゆるページへ「つながる」ことが出来る機能です。

リンクにも色々種類があります。リンクの種類については下記の記事で詳しく説明しております。

リンク色の変更

それではリンクテキストの色の設定方法をご紹介します。

リンクの設定には<a>タグを用い、飛び先のURLを「href（エイチレフ：Hypertext Reference ハイパーテキストリファレンスの略）」要素に指定します。

 html
<a href="https://hyakuyattsu.com/">別のページにジャンプ</a>

別のページにジャンプ

リンクテキストの設定を何もしていなければ、サイトのデフォルト設定のまま表示されます。
色を変えようと思うとcssでリンクの<a>タグの色を指定します。

 css
a { color:pink; }

別のページにジャンプ

リンク文字をピンク色に変更してみました。

htmlにcssを適用させる方法はこちらの記事でご紹介しています。

1.未訪問のリンク色

未訪問のリンクとは、ユーザーがまだ訪れたことのないページへのリンクです。
初見のサイトでのリンク色は基本こちらの「未訪問のリンク色」が表示されていることになります。
「未訪問のリンク色」の設定にはaの後に「:link」を付け、「a:link」と設定します。

 css
a:link { color:green; } // 未訪問リンクの色を「green」にする。

2.訪問済みのリンク色

訪問済みのリンクとは、ユーザーがすでに１度訪れたページへのリンクです。
「訪問済みのリンク色」の設定にはaの後に「:visited」を付け、「a:visited」と設定します。

 css
a:visited { color:orange; } // 訪問済みリンクの色を「orange」にする。

3.マウスを乗せた時（ホバー）した時のリンク色

リンクテキストにマウスを乗せた時（ホバー）に色を変更することも出来ます。
「マウスを乗せた時（ホバー）した時のリンク色」の設定にはaの後に「:hover」を付け、「a:hover」と設定します。

 css
a:hover { color:pink; } // マウスを乗せた時（ホバー）した時のリンクの色を「pink」にする。

4.クリックした時のリンク色

4つ目はクリックした瞬間のリンク色を指定します。
「クリックした時のリンク色」の設定にはaの後に「:active」を付け、「a:active」と設定します。

 css
a:active { color:gray; } // クリックした時のリンクの色を「gray」にする。

全てをまとめて設定すると

4つをまとめて表示するとこのように表示されます。

 css
a:link { color:green; } // 未訪問リンクの色を「green」にする。
a:visited { color:orange; } // 訪問済みリンクの色を「orange」にする。
a:hover { color:pink; } // マウスを乗せた時（ホバー）した時のリンクの色を「pink」にする。
a:active { color:gray; } // クリックした時のリンクの色を「gray」にする。

実際に設定したリンクテキストが↓こちらです。

未訪問は緑、訪問済みはオレンジ、マウスを乗せた時はピンク、クリックした時はグレーになるリンクテキスト

リンクテキストの指定は色だけではありません。いろんなcssを組み合わせて指定することも出来ます。
次はリンクテキストの下線の指定をしてみましょう。

リンクの下線の設定変更

続いては、リンクテキストの下線の指定をしてみましょう。
下線というのはこういうやつです。

下線を表示

何も設定を変更していないデフォルト状態では、リンクテキストには下線が表示されます。

リンクの下線を消す

リンクの下線を消すには<a>タグにcssで「text-decoration:（テキストデコレーション）」を選択し、「none」を指定することで下線を消すことが出来ます。

 css







a { text-decoration: none; }

リンクの下線を表示させる

逆に、リンクの下線を表示させるには「text-decoration:（テキストデコレーション）」を選択し、「underline」を指定します。

 css
a { text-decoration: underline; }

先程のリンク色設定の時の４つのシーンへの指定方法と組み合わせれば「マウスを乗せた時（ホバー）した時だけ下線を消す」といったような設定も可能です。

 css
a:link { text-decoration: underline }
a:visited { text-decoration: underline }
a:hover { text-decoration: none; } // マウスを乗せた時（ホバー）した時だけ下線を消す
a:active { text-decoration: underline }

マウスを乗せた時（ホバー）した時だけ下線を消すリンクテキスト