CSS でリンクの青い下線を削除する

1. CSS のリンクから青い下線を削除するには、text-decoration プロパティを none に設定する
2. CSS のリンクから青い下線を削除するには、選択に疑似クラスを使用する
3. CSS のリンクから下線と色を削除するには、box-shadow プロパティを削除する

このチュートリアルでは、HTML のハイパーリンクに形成された青い下線を削除する方法を紹介します。CSS を使用してそのような下線を削除します。

CSS のリンクから青い下線を削除するには、text-decoration プロパティを none に設定する

CSS の text-decoration プロパティを使用して、テキストの装飾を指定できます。このプロパティは、他の 3つのプロパティの省略形のプロパティです。これらのプロパティは、text-decoration-line、text-decoration-color、および text-decoration-style です。text-decoration-line プロパティは、上線、下線、ラインスルーなどのテキスト装飾を適用します。text-decoration-color プロパティは、テキスト装飾の色を設定する役割を果たし、text-decoration-style は、テキスト装飾に実線、波状、点線、破線などのさまざまなスタイルを適用します。省略形のプロパティ text-decoration を使用する場合、値を none として指定できます。その結果、3つのプロパティすべてを none に設定できます。その結果、ハイパーリンクの下線が削除され、青色も削除されます。

たとえば、クラス container で div を作成します。次に、div 内で、クラス thisPage を使用して span を作成します。次に、span タグの間に Current Page というテキストを入力します。次の行に anchor タグを記述します。タグの href 属性を # に設定します。anchor タグ内に、クラス otherPage で別の span を記述します。スパンの間に次のページというテキストを書きます。次に、対応する CSS ファイルで、container クラス内にある anchor、tag を .container a として選択します。16 進コード #FF0000 を使用して、テキストに赤色を設定します。次に、text-decoration プロパティを none に設定します。

以下の CSS は、テキスト次のページをハイパーリンクである赤に設定します。none に設定されている text-decoration プロパティは、anchor タグの要素の下線と青色を削除します。

サンプルコード：

<div class="container">
    <span class="thisPage">Current Page</span>
    <a href="#"><span class="otherPage">Next Page</span></a>
</div>

.container a {
  color: #FF0000;
  text-decoration: none;
}

CSS のリンクから青い下線を削除するには、選択に疑似クラスを使用する

疑似クラスを選択し、最初のメソッドと同じ CSS プロパティを適用して、リンクから青い下線を削除します。以前は、anchor タグのみを選択していました。このメソッドでは、疑似クラスを使用してアンカータグを選択します。:hover、:visited、:link、:active などの疑似クラスを使用します。:hover クラスは、ユーザーがマウスなどのポインティングデバイスで要素をポイントするときに適用されますが、必ずしも要素をクリックする必要はありません。:visited クラスは、リンクがすでにクリックされている場合に適用されます。同様に、:link クラスはすべての未訪問のリンクを選択します。そして、:active クラスはアクティブなリンクを選択します。このメソッドのデモンストレーションには、同じ HTML ドキュメントを使用します。

例えば。疑似クラス:link、:visited、:hover、および:active を使用して、anchor タグを選択します。各疑似クラスはコンマで区切ります。text-decoration プロパティを none に設定し、color プロパティを #000000 に設定します。

適用された CSS プロパティは、以下の例のすべての疑似クラスに有効になります。a:link セレクターは、ハイパーリンクの色を黒に変更し、リンクにアクセスしていないときに下線を削除します。これは、他のすべてのセレクターの中で color プロパティをオーバーライドします。a:visited セレクターは、リンクにアクセスした後、リンクからアンダースコアを削除します。CSS 効果は、リンクにカーソルを合わせたときやリンクをクリックしたときにも発生します。このようにして、CSS 疑似クラスを使用して、リンクから下線と青色を削除できます。

コード例：

<span class="thisPage">Current Page</span>
<a href="#"><span class="otherPage">Next Page</span></a>

a:link, a:visited,  a:hover, a:active
{
    color: #000000;
    text-decoration: none;
}

CSS のリンクから下線と色を削除するには、box-shadow プロパティを削除する

場合によっては、box-shadow プロパティを使用して下線のスタイルを設定できます。プロパティを使用して、任意のテキストに下線効果を提供できます。次の CSS コードスニペットは下線を作成します。

box-shadow: inset 0 -3px 0 0 #bdb;

このような場合、下線を削除する場合は、box-shadow プロパティを削除するか、プロパティの値を none に設定できます。

以下の例では、span クラスは緑色でスタイル設定され、box-shadow プロパティは赤色の下線を作成するために使用されます。次に、プロパティの値が none に設定され、テキストから下線効果が削除されます。

サンプルコード：

<span class="thisPage">Current Page</span>

.thisPage {
  color: green;
  box-shadow: inset 0 -3px 0 0 red;
  box-shadow: none;
}