【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
総合評価
( 5 )
メリット
  • HTMLとCSSの基本が体系的に学べる
  • Webデザインの基本が学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

text-decorationプロパティ

aタグの下線を消すまたはカスタマイズするには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アクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次