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種類まとめ

続きを見る

これだけでもリンク色の設定はできるのですが、さらに細かく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つでブログやホームページのセッション数・回遊率が変わることもあるので、色々と設定を変えて試してみてはいかがでしょうか。

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

  • WEBやプログラミングの知識をつけたい
  • でも、スクールの学費は高すぎる

という方には、安価で始められる侍テラコヤ」を1度チェックしてみて!

口コミや評判、実際に入会してみて気づいた注意点を紹介!

Check!
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

続きを見る

「侍テラコヤ」ホームページ

\ベーシック・プレミアム限定 初月50%OFFクーポンコードあり/

「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

design WEB

2023/3/25

「侍テラコヤ」は安くで始めるプログラミングスクール【リ...

【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も

WEB 作りたい

2022/11/9

【箇条書き】リストタグ[ ul・ol・li ]の使い方...

ブログにコメント欄は必要?非表示にする設定方法【WordPress】

WEB 作りたい

2022/10/5

ブログにコメント欄は必要?非表示にする設定方法【Wor...

誰でもホームページの更新ができるようにする方法【googleドキュメント簡単活用術】

WEB 作りたい

2022/9/11

自社で更新できるホームページ作成【Googleドキュメ...

今、再注目のアニメーションGifの素材サイトまとめ【フリー】

design WEB 作りたい

2022/9/3

今、再注目のアニメーションGifの素材サイトまとめ【フ...

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

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

続きを見る

  • WEBやプログラミングの知識をつけたい
  • でも、スクールの学費は高すぎる

という方には、安価で始められる侍テラコヤ」を1度チェックしてみて!

口コミや評判、実際に入会してみて気づいた注意点を紹介!

Check!
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

続きを見る

「侍テラコヤ」ホームページ

\ベーシック・プレミアム限定 初月50%OFFクーポンコードあり/

「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

design WEB

2023/3/25

「侍テラコヤ」は安くで始めるプログラミングスクール【リ...

【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も

WEB 作りたい

2022/11/9

【箇条書き】リストタグ[ ul・ol・li ]の使い方...

ブログにコメント欄は必要?非表示にする設定方法【WordPress】

WEB 作りたい

2022/10/5

ブログにコメント欄は必要?非表示にする設定方法【Wor...

誰でもホームページの更新ができるようにする方法【googleドキュメント簡単活用術】

WEB 作りたい

2022/9/11

自社で更新できるホームページ作成【Googleドキュメ...

今、再注目のアニメーションGifの素材サイトまとめ【フリー】

design WEB 作りたい

2022/9/3

今、再注目のアニメーションGifの素材サイトまとめ【フ...

-WEB, 作りたい
-, ,