CSSのリンクの色を変えない方法を現役エンジニアが解説【初心者向け】
初心者向けにCSSのリンクの色を変えない方法について現役エンジニアが解説しています。リンクの色はデフォルトでは、マウスを乗せた場合やキャッシュに残っている場合に色が変わってしまいます。今回はaタグに擬似クラスを使う方法や色を設定する方法を解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSのリンクの色を変えない方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
- リンクの色とは
- リンクの色が変わってしまう原因
- リンクの色が変わらないためにすること
- 基本動作を実際に書いてみよう
- 各擬似クラスの設定は行わない方法
- すべての擬似クラスで同じ色を指定する方法
- 執筆してくれたメンター
- CSSを学習中の方へ
そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
CSSのリンクの色を変えない方法について詳しく説明していくね！
お願いします！
リンクの色とは
リンクとは、今表示されているページ上で、他のページに移動できるURLが含まれた場所です。
例えば1をクリックすると、https://techacademy.jp/magazine/category/webdesign/css というページに移動します。
2をクリックすると、現在ご覧いただいているページである、https://techacademy.jp/magazine/21233 に移動します。
リンクの色とは、3（以下の画像）のようにページ内の文字に対してリンクを指定する場合、文字色が黒色からリンクを表す色に変化した状態（画像では青色）で表示されることを意味します。
リンクの色が変わってしまう原因
未訪問のサイトと訪問済みのサイトでリンクの色が異なっていることや、マウスカーソルを当てた際、マウスクリックした際にリンクの色が変わることがあります。
これらはaタグの:link, :visited, :hover, :active擬似クラスの設定が原因です。
:linkは未訪問のリンク、:visitedは訪問済みのリンク、:hoverはマウスカーソルが当たっているリンク、:activeはマウスクリック中のリンクを指します。
リンクの色が変わらないためにすること
「aタグの色を指定して、各擬似クラスの設定は行わない」という方法と、「すべての擬似クラスで同じ色を指定する」という方法があります。
「aタグの色を指定して、各擬似クラスの設定は行わない」場合には、以下のようにaタグで色指定するだけで良いです。
a {
color: blue;
}
「すべての擬似クラスで同じ色を指定する」場合には、:link, :visited, :hover, :active擬似クラスで同じ色を指定すれば良いです。
a:link, a:visited, a:hover, a:active {
color: blue;
}
基本動作を実際に書いてみよう
まずはデフォルト動作を見てみましょう。
リンクの訪問や、マウスホバー、クリックでリンクの色が変わります。
※CodePenでは、標準でマウスホバーやクリックで色が変わらないため、:hoverと:activeの設定をしています。
HTML
<a href="https://techacademy.jp/programming" target="_blank" rel="noopener noreferrer"> <p>標準リンク(リンク訪問や、マウスホバー、クリックで色が変わる)</p> </a>
CSS
a:hover {
color: red;
}
a:active {
color: green;
}
CSS解説
1行目のa:hover {では、HTMLの aタグで囲まれた標準リンク(リンク訪問や、マウスホバー、クリックで色が変わる) という文字の上に、マウスカーソルを移動させた場合に、color: red;で色を赤色にするように指定しています。
4行目のa:active {では、HTMLの aタグで囲まれた標準リンク(リンク訪問や、マウスホバー、クリックで色が変わる) をクリックしたとき、color: green;で色を緑色にするように指定しています。
aタグのことをアンカータグといいます。
実行結果
各擬似クラスの設定は行わない方法
次に「aタグの色を指定して、各擬似クラスの設定は行わない」方法です。
no-color-changeクラスで色を一括指定しています。
リンクの色が変わらないことを確認しましょう。
HTML
<a href="https://techacademy.jp/programming" target="_blank" rel="noopener noreferrer"> <p>色の変わるリンク(リンク訪問や、マウスホバー、クリックで色が変わる)</p> </a> <a class="no-color-change" href="https://techacademy.jp/programming" target="_blank" rel="noopener noreferrer"> <p>色の変わらないリンク(リンク訪問や、マウスホバー、クリックで色が変わらない)</p> </a>
CSS
a:hover {
color: red;
}
a:active {
color: green;
}
a.no-color-change {
color: blue;
}
CSS解説
1行目のa:hover {では、HTMLの アンカータグで囲まれた文字の上に、マウスカーソルを移動させた場合に、color: red;で色を赤色にするように指定しています。
4行目のa:active {では、HTMLの アンカータグで囲まれた文字をクリックしたとき、color: green;で色を緑色にするように指定しています。
7行目のa.no-color-change {では、HTMLの<a class=”no-color-change”で囲まれた色の変わらないリンク(リンク訪問や、マウスホバー、クリックで色が変わらない)をクリックしても、色が変わらないように指定しています。
a.no-color-changeの記号.は、HTMLの<a class=”no-color-change”にある、class（クラス）を意味します。
このHTMLのクラスを指定する文法については、次の記事を参考にしていただくと良いです。
HTMLで一つのタグにidを複数使う方法を現役デザイナーが解説【初心者向け】 | TechAcademyマガジン
実行結果
すべての擬似クラスで同じ色を指定する方法
最後に「すべての擬似クラスで同じ色を指定する」方法です。
no-color-changeクラスの各擬似クラスで色の設定を行っており、各擬似クラスの設定は行わない方法と同様に、リンクの色が変わりません。
HTML
<a href="https://techacademy.jp/programming" target="_blank" rel="noopener noreferrer"> <p>色の変わるリンク(リンク訪問や、マウスホバー、クリックで色が変わる)</p> </a> <a class="no-color-change" href="https://techacademy.jp/programming" target="_blank" rel="noopener noreferrer"> <p>色の変わらないリンク(リンク訪問や、マウスホバー、クリックで色が変わらない)</p> </a>
CSS
a:hover {
color: red;
}
a:active {
color: green;
}
a.no-color-change:link,
a.no-color-change:visited,
a.no-color-change:hover,
a.no-color-change:active {
color: blue;
}
CSS解説
1行目のa:hover {では、HTMLの アンカータグで囲まれた文字の上に、マウスカーソルを移動させた場合に、color: red;で色を赤色にするように指定しています。
4行目のa:active {では、HTMLの アンカータグで囲まれた文字をクリックしたとき、color: green;で色を緑色にするように指定しています。
7行目以降の次のコードを実装することで、HTMLの<a class=”no-color-change”で囲まれたリンクの色が変わらないように指定しています。
1行目から6行目までのアンカータグへのCSS指定は、HTMLの<a class=”no-color-change”で囲まれたリンク色にも適用されています。
その状態で7行目以降の次のコードを実装することで、HTMLの<a class=”no-color-change”で囲まれたリンク色にのみ、リンク色が変わらない指定が上書きされます。
a.no-color-change:link, a.no-color-change:visited, a.no-color-change:hover, a.no-color-change:active
実際には色が変わらないというより、color: blue;という指定で青色に固定しているという表現のほうが良いかもしれません。
:linkは未訪問のリンクを意味します。
:visitedは訪問済のリンクを意味します。
:hoverはマウスカーソルが当たっているリンクを意味します。
:activeはマウスクリック中のリンクを意味します。
実行結果
執筆してくれたメンター
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 |
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
