CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでリンクの下線を消す方法｜text-decorationプロパティの基本と実例

はじめに

デフォルトでは、HTML内のすべてのリンク（<a>要素）には下線が自動的に表示されます。この下線は、CSSのtext-decorationプロパティを使うことで簡単に削除できます。デザイン性の高いナビゲーションメニューやボタン風のリンクを作成したい場合などに、よく使われるテクニックです。

構文

CSSのtext-decorationプロパティの基本的な構文は以下のとおりです。

Selector {
   text-decoration: /*値*/
}

下線を削除する場合は、値としてnoneを指定します。

使用例1：シンプルな下線の削除

以下の例では、a要素に対してtext-decoration: noneを指定し、リンクの下線を削除しています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   padding: 5px;
   box-shadow: inset 0 0 5px violet;
}
a {
   font-style: italic;
   text-decoration: none;
}
</style>
</head>
<body>
<a href="#">Demo</a>
<p>
<a href="https://example.com/">Example domain</a>
</p>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。すべてのリンクから下線が消えていることが確認できます。

CSSでリンクの下線を消す方法｜text-decorationプロパティの基本と実例

使用例2：擬似クラスと組み合わせた応用例

次の例では、:last-child擬似クラスと組み合わせて、特定のリンクだけに異なるスタイルを適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   width: 50%;
   text-align: right;
   color: green;
   border: thin dashed red;
}
a {
   text-decoration: none;
}
a:last-child {
   color: inherit;
   background-color: moccasin;
}
</style>
</head>
<body>
<div>
<a href="#">Link Demo</a>
<p>
Watch this: <a href="https://example.com/">Example site</a>
</p>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSでリンクの下線を消す方法｜text-decorationプロパティの基本と実例

補足：ホバー時には下線を表示するのがおすすめ

下線を完全に削除すると、リンクであることが視覚的にわかりにくくなる場合があります。そのため、実務ではマウスオーバー時のみ下線を表示するテクニックがよく使われます。

a {
   text-decoration: none;
}
a:hover {
   text-decoration: underline;
}

このように設定することで、通常時はすっきりとした見た目を保ちながら、ユーザーがリンクだと認識できるようになります。アクセシビリティの観点からも、色だけでなく下線や太字などでリンクを示すことが推奨されています。

  1. CSSを使って画像スプライト（Image Sprite）からアイコンを表示する方法

    画像スプライト（Image Sprite）とは 画像スプライトとは、複数の小さな画像を1枚の大きな画像ファイルにまとめたものです。最大のメリットは、HTTPリクエストの回数を減らせることにあります。ブラウザがサーバーへ送るリクエスト数が減るほど、サイトの読み込み時間が短縮され、ページの表示速度が向上します。 CSSでスプライト画像からアイコンを表示する仕組み CSSでは、background-positionプロパティを調整することで、1枚のスプライト画像の中から目的のアイコン部分だけを切り出して表示できます。基本的な流れは以下の通りです。 backgroundプロパティでスプライト画像

  2. CSSで放射状グラデーションのサイズを指定する方法

    CSSで放射状グラデーションのサイズを制御するには、radial-gradient() 関数を使用します。この関数は、背景画像として放射状グラデーションを定義するもので、第1引数にサイズ（形状と大きさ）を、その後に位置やカラーストップを指定します。基本的な書き方以下の例のように、関数の最初のパラメータとして希望するサイズを設定します。background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32));サイズに指定できる値グラデーションのサイズには、以下