CSSでリンクの下線を消す方法｜text-decoration:noneの使い方を解説
Webページ上のリンク（<a>タグ）には、ブラウザのデフォルト設定として下線が表示されます。この下線を削除したい場合は、CSSの text-decoration: none; を使用します。
ここでは、リンクの状態に応じた擬似クラス（:link、:visited、:hover、:active）と組み合わせて、下線を消す具体的なコード例を紹介します。
例1：:link と :visited で下線を削除する
まずは、未訪問リンク（:link）と訪問済みリンク（:visited)の両方に text-decoration: none; を指定する基本的な例です。
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<h1>デモ見出し</h1>
<div>
<p>こちらが <a href="https://tutorialspoint.com">参考リンク</a> です</p>
</div>
</body>
</html>出力結果
このコードでは、リンクの色を青に保ちながら、下線のみを非表示にしています。a:link はまだクリックされていないリンク、a:visited はすでに訪問したことのあるリンクに適用されます。
例2：マウスオーバー時・クリック時にも下線を削除する
次に、カーソルを合わせたとき（:hover）やクリックしている瞬間（:active）にも下線が表示されないようにする例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: blue;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: none;
}
a:active {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<h1>デモ見出し</h1>
<div>
<p>こちらが <a href="https://tutorialspoint.com">参考リンク</a> です</p>
</div>
</body>
</html>出力結果
各擬似クラスの役割まとめ
- :link … まだ訪問していない通常のリンクに適用される
- :visited … ユーザーがすでに訪問したリンクに適用される
- :hover … マウスカーソルがリンク上にあるときに適用される
- :active … リンクがクリックされている瞬間に適用される
よりシンプルな書き方
すべての状態で同じスタイルを適用したい場合は、擬似クラスを使わず a 要素に対して一括で指定することも可能です。
a {
color: blue;
text-decoration: none;
}このように記述すれば、未訪問・訪問済み・ホバー中・クリック中のすべての状態で下線が表示されなくなります。デザインに応じて、必要な擬似クラスだけを個別に指定するか、一括指定するかを選択するとよいでしょう。
-
CSSでテキスト選択時のデフォルト色を変更する方法｜::selectionの使い方
Webページ上でテキストをドラッグして選択すると、通常は青っぽいハイライトが表示されます。このデフォルトの選択色は、CSSの ::selection 疑似要素を使うことで、文字色や背景色を自由に上書きできます。 以下に、選択時のハイライトを紫背景・白文字にカスタマイズするサンプルコードを示します。 サンプルコード <!DOCTYPE html> <html> <head> <style> /* Firefox向け（旧バージョン対応） */ ::-moz-selection { &
-
CSSでグラデーションのカラーストップ位置を設定する方法
CSSのグラデーションでは、各色が切り替わる位置(カラーストップ)をパーセンテージまたは絶対的な長さで指定できます。これにより、色の遷移を均等ではなく自由にコントロールすることが可能です。カラーストップの基本例えば、linear-gradient()関数でカラーストップの位置を指定する場合、以下のように記述します。background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );このように位置を明示的に指定すると、各色がその地点で完全に