CSSでリンクの下線を消す方法と色を変える方法を解説します。
目次
CSSでリンクの下線を消す・なくす方法
先に結論を述べると、下記のCSSを使うことでリンクの下線を消すことができます。
.link {
text-decoration: none;
}なぜこのようにすることでリンクの下線を消せるかを以下で解説します。
リンクにつく線をコントロールする”text-decoration”
リンクの下線は、CSSの text-decoration というプロパティでコントロールします。
これは text-decoration-line, text-decoration-color, text-decoration-style という3つを一括で指定できるプロパティです
- text-decoration-line
- 線の種類を指定（下線、上線、線無しなど）
- text-decoration-color
- 線の色を指定
- text-decoration-style
- 線のスタイルを指定（破線、波線など）
つまり、 text-decoration: none; (あるいは text-decoration-line： none; ) とすれば、 下線の種類が「下線無し」になるため、リンク要素から下線が消えることになります。
マウスオーバーしたときだけ下線を消す方法
通常時には下線を表示されておき、マウスオーバーしたときだけ消すということも可能です。そのためには下記のCSSを使います。
.link:hover {
text-decoration: none;
}:hover はホバー（マウスオーバー）したときにだけCSSを適用したい場合に使う擬似クラスです。
このようにマウスオーバーでスタイルが変わるように設定しておくと、その要素がリンク要素だとわかりやすくなります。
通常時は下線無しでマウスオーバーで下線を出す方法
:hover を使えば、通常時は下線を消しておきマウスオーバーで表示させるという逆のパターンも可能です。
.link {
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}リンクの下線が消えないときの解決法
リンクの下線が消えない場合は、text-decoration: none; がその要素に適用されていないということです。
この原因にはいくつかのパターンが考えられます。
- 他のCSSに優先順位で負けている
- 他のCSSに上書きされている
- キャッシュが残っている
この中でもっとも可能性が高いのは「他のCSSに優先順位で負けている」ことでしょう。
このパターンが当てはまるかを確認するもっとも手軽な方法は、 text-decoration: none; を text-decoration: none!important; に変えてみることです。
!important; をつけることでそのCSSの優先順位が上がるため、これが原因だった場合はリンクの下線が消えるはずです。
!important はCSSの適切な設計の観点からは基本的に使用を避けるべきものです。上記では、あくまでもCSSが反映されない原因を、CSSに詳しくない方でも手軽に検証するための手段として !important を紹介しています。
CSSが反映されないときの原因と解決方法については下記の記事で詳しく解説しているので、併せてチェックしてみてください。
WordPressでCSSが反映されない！うまく効かないときの8つのチェックリスト
CSSでリンクの下線の色を変える方法
CSSを使えばリンクの下線の色を変えることも可能です。
先ほどtext-decorationについて解説しましたが、その中の text-decoration-color の設定によって下線の色を指定できます。
.link {
text-decoration: underline black;
}ただし、上記の実例を見てわかるとおり、テキストとまったく違う色を指定すると違和感のあるデザインになりやすいです。
そのため、リンクの下線の色はテキストの色と合わせることを原則とするのがよいでしょう。
なお、色の系統を揃えたうえでの微調整であれば下線の色を変えるのもアリだと思いますが、その場合は線を少し太くした方がよいので、後述するborderによる下線を使いましょう。
text-decorationではなくborderでリンクの下線を表現することも可能
リンクの下線は基本的に text-decoration で設定しますが、 border を使う方法もあります。
border を使うパターンの方がデザインをカスタムしやすいので、こだわりたい方はこちらを使うのもおすすめです。
まず、下線を border でつけられるように text-decoration は none にしておきます
.link {
text-decoration: none;
}その上で、枠線を要素の下につけるためのCSSプロパティである border-bottom を記述します。
.link {
border-bottom: 1px solid #fd6c3f; /* 線の太さ 線の種類 線の色 */
}borderを使えば下線の太さや種類、テキストと下線との距離などを調整することができます。
.link {
border-bottom: 2px dashed #ffb7a1; /* 線の太さ 線の種類 線の色 */
padding-bottom: 3px; /* テキストと下線との距離 */
}
