css WEB 作りたい

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

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

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

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

リンクタグ<a>とは

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

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

あわせて読みたい!
【web】リンクの貼り方いろいろ【初心者向け】

ブログやホームページを運用している人には必須知識。別ウィンドウ、メール送信、電話発信など様々な種類のリンクの貼り方をご紹介します。適切な場所に適切なリンクを貼ることでユーザー満足度の向上、離脱率の低下にもつながります。

続きを見る

リンク色の変更

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

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

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

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

 css
a { color:pink; }
別のページにジャンプ

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

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

あわせて読みたい!
【初心者にも簡単】HTMLにCSSを適用する方法3種類まとめ

HTMLにCSSを適用する方法を3種類まとめました。最もポピュラーな方法や、各ページ単位でCSSを適用させる方法、イレギュラー対応時などの即効性のあるものまで、必要に応じてその方法を覚えておくと作業の効率が図れます。それぞれの適応範囲や優先順位も改めてご確認を!

続きを見る

これだけでもリンク色の設定はできるのですが、さらに細かく4つのシーンに分けてリンクテキストをそれぞれの色を設定することも出来ます。

1.未訪問のリンク色

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

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

2.訪問済みのリンク色

訪問済みのリンクとは、ユーザーがすでに1度訪れたページへのリンクです。
「訪問済みのリンク色」の設定には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; }

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

 css
a:link { text-decoration: underline }
a:visited { text-decoration: underline }
a:hover { text-decoration: none; } // マウスを乗せた時(ホバー)した時だけ下線を消す
a:active { text-decoration: underline } 
マウスを乗せた時(ホバー)した時だけ下線を消すリンクテキスト

まとめ

いかがでしたでしょうか。


リンクテキストにcssを使って色をつけたり、装飾をしたりできる設定方法をご紹介しました。
一言で「リンク」と言っても4つのシチュエーションがあります。

  • 未訪問のリンク
  • 訪問済みのリンク
  • マウスを乗せた時(ホバー)した時のリンク
  • クリックした時のリンク

それぞれのシチュエーションによってデザインを変え、ユーザーをわかりやすく導くことがサイト作りには重要です。
CSSを使えばまだまだ無限にいろんな設定のリンクテキストを作ることが出来ます。

リンクを制するものはサイトを制す!

と私(daruma108)は勝手に思っていますが、リンクテキストのデザイン1つでブログやホームページのセッション数・回遊率が変わることもあるので、色々と設定を変えて試してみてはいかがでしょうか。

最後までご覧いただきありがとうございます。

本格的にhtmlやCSSを学びたいなら、自宅で現役エンジニアから学べるテックアカデミーがオススメ!まずは無料体験!

私も現在phpを勉強中!
daruma108

テックアカデミー公式ホームページへ

※無料体験だけならいっさいお金はかかりません。

こちらの記事もリンク設定の参考になるかもしれません。よければ合わせてご覧ください。

あわせて読みたい!
【web】リンクの貼り方いろいろ【初心者向け】

ブログやホームページを運用している人には必須知識。別ウィンドウ、メール送信、電話発信など様々な種類のリンクの貼り方をご紹介します。適切な場所に適切なリンクを貼ることでユーザー満足度の向上、離脱率の低下にもつながります。

続きを見る

本格的にhtmlやCSSを学びたいなら、自宅で現役エンジニアから学べるテックアカデミーがオススメ!まずは無料体験!

私も現在phpを勉強中!
daruma108

テックアカデミー公式ホームページへ

※無料体験だけならいっさいお金はかかりません。

-css, WEB, 作りたい
-, , ,

© 2021 ひゃくやっつ