HTML/CSS

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

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

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

先輩くん
先輩くん
年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ!
後輩ちゃん
後輩ちゃん
100%自社内開発の求人だから、SESのように職場環境が変わらないのがいいね!
簡単30秒で無料登録!

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

text-decorationプロパティ

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

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

text-decorationプロパティに設定できる値
説明
noneテキストの装飾を行わない
underlineテキストに下線を引く
overlineテキストに上線を引く
line-throughテキストに取り消し線を引く
blinkテキストを点滅させる

下線を消す方法

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

a {
  text-decoration:none
}

下線がある状態から

text-decoration:noneを適用前の表示

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

text-decoration:noneを適用後の表示

下線の色を変更する方法

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

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

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

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

text-decoration:underline solid #f00;を適用した表示

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

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

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

線の種類
説明
solid実線
double二重線
dotted点線
dashed破線
wavy波線
/* 実線 */
.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を適用したのに反映がされない場合は、以下の原因が考えられます。

text-decorationが効かない原因
  • aタグに設定していない
  • キャッシュが抜けてない
  • 優先順位が負けている

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

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

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村