リンクのアンダーラインを消す方法【2通りの方法を解説】

リンクのアンダーラインを消す方法をお伝えします。

元々、ホームページのリンクは、「青色＋アンダーライン」が一般的でした。

でも、現在は、多くの人がホームページを見ることに慣れているため、リンクからアンダーラインを消すサイトも増えてきました。

ホームページのリンクに、アンダーラインを表示しないサイトも増えてきた

そこで、ホームページのリンクから、アンダーラインを消す方法をお伝えします。

なお、ここでは、「全ページのリンクのアンダーラインを消す方法」と「一部のリンクのアンダーラインを消す方法」の、２つの方法をお伝えしますので、参考にしてくださいね。

■ 全ページのリンクのアンダーラインを消す方法

手順：CSSファイル（style.css）に書かれている、「a」の記述を、
下記のように変更する。

a { color:#0000FF; text-decoration:underline; }
　　↓　↓　↓　↓　↓
a { color:#0000FF; text-decoration:none; }

「a」という記述は、リンクについての記述です。

そのため、CSSファイル（style.css）の記述を、上記のように変更することで、全ページのリンクからアンダーラインを消すことができます。

具体的には、下記のように、リンクからアンダーラインが消えるという形ですね。

・ アンダーラインが消えたリンク

style.css ファイルの記述を変更するだけで、全ページに反映されるので、とても簡単で、一般的なやり方になります。

【注意】

上記の記述は、「自分で更新できる最短ホームページテンプレート」 の、CSSファイル（style.css）に書かれている記述です。

■ 一部のリンクのアンダーラインを消す方法

手順：アンダーラインを消したいリンクを、下記のように変更する。

<a href="index.html">リンクはこちら</a>
　　↓　↓　↓　↓　↓
<a href="index.html" style="text-decoration:none;">リンクはこちら</a>

上記のように、「a」タグの中に、style="text-decoration:none;" の記述を入れることで、そのリンクだけ、アンダーラインを消すことができます。

ちなみに、この方法は、「コンテンツバー」の個所でよく使います。

たとえば、下記のサイトは、「コンテンツバー」の個所だけ、リンクにアンダーラインがありませんよね？

「コンテンツバー」の個所は、ボタンのようになっているため、人は「これはリンクだ」ということが分かり、特に、アンダーラインを表示する必要がないからです。

一部のリンクのアンダーラインを消すには、「a」タグの中に、style="text-decoration:none;" の記述を入れることで、アンダーラインを消すことができるので、覚えておいてくださいね。

■ ブラウザによって、アンダーラインの色が異なる場合がある

使用するブラウザによって、リンクのアンダーラインの色が異なる場合があります。

たとえば、CSSファイル（style.css）で、リンクの色を「青色」に指定していて、個別ページの中で、リンクの色を「白色」にしている場合は、リンクのアンダーラインだけが「青色」になる場合があります。

もし、これが気になるようでしたら、下記のように変更してみてください。

<a href="index.html">リンクはこちら</a>
　　↓　↓　↓　↓　↓
<a href="index.html" style="color:white;">リンクはこちら</a>

上記のように、「a」タグの中に、style="color:white;" の記述を入れることで、リンクの色とアンダーラインの両方を、「白色」にすることができます。

ブラウザによって、ちょっと表示が異なるのですが、上記のようにすることで、どのブラウザでも同じように表示されるので、良かったら参考にしてくださいね。