【初心者向け】CSSでリンクの下線をサクッと消す方法
2024-04-02
CSSでリンクの青い下線を削除する方法
CSSを使用して、リンクの青い下線を削除するには、text-decoration プロパティを使用します。このプロパティは、テキスト装飾を制御し、none 値を指定することで下線を非表示にできます。
方法
以下の2つの方法で、リンクの青い下線を削除できます。
全てのリンクの下線を削除するには、以下のCSSコードを使用します。
a {
text-decoration: none;
}
このコードは、a タグ（リンクを表すタグ）全てに text-decoration: none; を適用します。
a.特定のクラス名 {
text-decoration: none;
}
このコードは、a タグに 特定のクラス名 クラスが指定されている場合のみ、下線を削除します。
注意点
- 上記のコードは、デフォルトの青い下線を削除します。その他の装飾（下線の色や太さなど）は、別途設定する必要があります。
- 一部のブラウザでは、
text-decoration: none;を設定しても下線が消えない場合があります。その場合は、!importantキーワードを追加することで強制的に下線を削除できます。
例
以下の例では、全てのリンクの下線を削除し、important キーワードを使用して強制的に下線を削除しています。
<a href="#">リンク1</a>
<a href="#">リンク2</a>
<a href="#">リンク3</a>
a {
text-decoration: none !important;
}
このコードを実行すると、全てのリンクの下線が消えます。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
</head>
<body>
<h1>リンクの青い下線を削除する</h1>
<p>
<a href="#">リンク1</a>
<a href="#">リンク2</a>
<a href="#">リンク3</a>
</p>
</body>
</html>
CSSコード
/* 全てのリンクの下線を削除 */
a {
text-decoration: none;
}
/* 特定のリンクの下線を削除 */
a.特定のクラス名 {
text-decoration: none;
}
実行結果
text-decorationプロパティの代わりに、border-bottomプロパティを使用して下線を削除することもできます。outlineプロパティを使用して、リンクにフォーカスが当たったときに表示される下線を削除することもできます。
CSSでリンクの下線を削除するその他の方法
a {
border-bottom: none;
}
このコードは、全てのリンクの border-bottom プロパティを none に設定し、下線を削除します。
a {
outline: none;
}
text-decoration-line プロパティを使用する
CSS3では、text-decoration プロパティよりも詳細な制御を可能にする text-decoration-line プロパティが導入されました。
a {
text-decoration-line: none;
}
!important キーワードを使用する
a {
text-decoration: none !important;
}
- 上記の方法を使用する場合は、各プロパティの役割とブラウザの対応状況を理解した上で使用してください。
!importantキーワードは、慎重に使用しないと意図しないスタイルが適用される可能性があるため、注意が必要です。
css hyperlink underline
