リンクのアンダーラインを消す方法をお伝えします。
元々、ホームページのリンクは、「青色＋アンダーライン」が一般的でした。
でも、現在は、多くの人がホームページを見ることに慣れているため、リンクからアンダーラインを消すサイトも増えてきました。
そこで、ホームページのリンクから、アンダーラインを消す方法をお伝えします。
なお、ここでは、「全ページのリンクのアンダーラインを消す方法」と「一部のリンクのアンダーラインを消す方法」の、２つの方法をお伝えしますので、参考にしてくださいね。
■ 全ページのリンクのアンダーラインを消す方法
手順：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;" の記述を入れることで、リンクの色とアンダーラインの両方を、「白色」にすることができます。
ブラウザによって、ちょっと表示が異なるのですが、上記のようにすることで、どのブラウザでも同じように表示されるので、良かったら参考にしてくださいね。
【よく読まれている関連記事】
