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

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

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

本書情報

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

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

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報

作成者	たにぐち まこと
学習時間	9時間
受講者数	43,706人
レビュー	(9,232件)

動画の詳細はこちら

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;
}