HTMLリンクの下線を消す方法

 
コーディング

テキストリンクの下線を消すにはその「a」HTMLタグの中に「style="text-decoration:none;"」
と書き込むだけです。

これで見た目は色以外通常のテキストと同じになりますが、リンクとしての動きは変わりません。
下記がサンプルコードとブラウザでの表示です。

<a href="http://hp.amolz.com/linkhtml/under.html" style="text-decoration:none;"> このページのリンクです。</a>

このページのリンクです。

上記の「このページのリンクです。」は押すとこのページへの移動が行われますが、
下線が消えているのがわかると思います。
また、CSSの「text-decoration」は下線を消す以外でもテキストに対して下記のように
表示させるプロパティがあります。

none:テキストに線は付かず、点滅もしません。これが初期値です。

underline:テキストに下線が付きます。

overline:テキストに上線が付きます。

line-through:テキストに打ち消し線が付きます。

blink:テキストが点滅します。

例えば「text-decoration:underline;」を使えばリンクがついていないテキストに
下線をつけることも出来ます。

下線を消す際の注意点

ほとんどのホームページではテキストリンクの下線は消していないため、
例外的なサイトにしてしまうと訪問者にリンクだと気付かれず利便性の悪いホームページを
作ってしまう可能性があります。

そのため、はっきりとした理由がない限り上記の手法は取らない事をおすすめします。

また、逆に「text-decoration:underline;」でリンクでないテキストに下線をつけることも
訪問者を勘違いさせる要因になる場合があるので注意しましょう。