【CSS】aタグの下線を消す方法と色を変更する方法

本記事では、aタグを使った時にデフォルトで表示される下線を消す方法と下線の種類・色を変更する方法について解説しています。

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

本書情報

著者	Mana
発売日	2019/3/16
ページ数	280ページ
Kindle版	○
レビュー (Amazon)	(1,654件)

１冊ですべて身につくＨＴＭＬ＆ＣＳＳとＷｅｂデザイン入門講座 /ＳＢクリエイティブ/Ｍａｎａ

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

text-decorationプロパティ

aタグの下線を消すまたはカスタマイズするにはtext-decorationプロパティを使います。

text-decorationプロパティに指定できる値は以下のとおりです。

下線を消す方法

下線を消すにはtext-decoration:noneを使います。

a {
  text-decoration:none
}

下線がある状態から

text-decoration:noneを適用させると以下のようになります。

下線の色を変更する方法

下線の色を変更するにはtext-decoration:underlineを使います。

underlineの後には「下線の種類」「カラー」を設定することができます。

a {
  text-decoration:underline solid #f00;
}

上記のサンプルコードを適用させると以下のように下線が赤色に変更されます。

下線の種類を変更する方法

下線の色を変更するには色を変更した時と同様にtext-decoration:underlineを使います。

下線の種類で設定できる値は以下のとおりです。

/* 実線 */
.link01{
  text-decoration:underline solid #f00;
}

/* 二重線 */
.link02{
  text-decoration:underline double #f00;
}

/*点線 */
.link03{
  text-decoration:underline dotted #f00;
}

/* 破線 */
.link04{
  text-decoration:underline dashed #f00;
}

/* 波線 */
.link05{
  text-decoration:underline wavy #f00;
}

text-decorationが効かない原因と対処法

text-decorationを適用したのに反映がされない場合は、以下の原因が考えられます。

それぞれの対処法について解説していきます。

aタグに設定していない

1つ目の原因はaタグではなく親要素などにtext-decorationを適用させている可能性があります。

text-decorationはaタグ自身に適用させる必要があります。

<p>
  <a href="#">ボタン</a>
</p>

/* NG設定 */
p {
  text-decoration: none;
}

/* OK設定 */
a {
  text-decoration: none;
}

キャッシュが抜けてない

2つ目の原因はキャッシュが抜けていない可能性があります。特にwordpressなどのCMSは反映に時間がかかります。

キャッシュを抜く手順は以下のとおりです(Chrome)。

1. ブラウザの右上にある「その他のツール」次に「閲覧履歴を消去」をクリックします。
2. モーダルが表示されるので、削除したい期間を設定しキャッシュされた画像とファイルにチェックを入れます。
3. 最後に「データを削除」をクリックします。

優先順位が負けている

3つ目の原因は優先順位が負けている可能性があります。CSSには同じクラスまたはタグに対して同じプロパティが設定されている場合、優先順位が高い方が適用されます。

優先順位が負けている場合、値の後ろに!importantを付けることで優先順位を一番にすることができます。

a{
  text-decoration:none !important;
}