HTMLで特定のリンクだけ下線を消す方法

2023-05-22

HTMLで特定のリンクだけ下線を消すには、CSSを使用してスタイルを指定することができます。以下に示す方法を使用して、特定のリンクの下線を消すことができます。

• スタイルシートの定義（CSS）:

<style>
	.no-underline {
		text-decoration: none;
	}
</style>

• リンクの要素にクラスを追加:

<a href="#" class="no-underline">特定のリンク</a>

上記のコードでは、スタイルシートで.no-underlineクラスを定義し、text-decoration: none;で下線を消しています。そして、リンクの要素にclass="no-underline"を追加することで、そのリンクに対して下線が消えます。

もし、複数のリンクに対して下線を消したい場合は、同じクラスを複数の要素に追加することもできます。例えば、以下のような方法です。

<a href="#" class="no-underline">リンク1</a>
<a href="#" class="no-underline">リンク2</a>
<a href="#" class="no-underline">リンク3</a>

このようにすることで、上記の全てのリンクに対して下線が消えます。

style属性を使う場合

style属性を使用して特定のリンクの下線を消す場合、以下のような方法を使います。

<a href="#" style="text-decoration: none;">特定のリンク</a>

上記のコードでは、style属性を使用してtext-decoration: none;を直接指定しています。これにより、その特定のリンクに対して下線が消えます。

複数のリンクに対して下線を消したい場合も同様に、各リンクのstyle属性にtext-decoration: none;を指定します。

<a href="#" style="text-decoration: none;">リンク1</a>
<a href="#" style="text-decoration: none;">リンク2</a>
<a href="#" style="text-decoration: none;">リンク3</a>

これにより、各リンクに対して下線が消えます。ただし、スタイルの再利用や一元管理の観点から、可能であればCSSを使用してスタイルを指定することが推奨されます。