リンクの下線を消す（ホームページは難しくない）

ホームページは難しくない　　ちょこっとHTML　　Lesson6

通常　リンクの部分は　下線が引かれていて　その部分がリンクであるというのが
わかるようになっています。

ホームページは難しくない

ところが　スタイルシートを使うと　このリンクの下線を消すことができます。

ホームページは難しくない

では　HTMLソースを見比べてみましょう。
まずは　通常のリンクで　新しいウィンドウを開くようにしてあります。

<a href="http://www6.plala.or.jp/mamoho/" target="_blank">ホームページは難しくない </a>

今度は　下線を消した場合です。

<a href="http://www6.plala.or.jp/mamoho/" style="text-decoration:none" target="_blank">ホームページは難しくない </a>

style="text-decoration:none"　という設定です。
通常のリンクにこの設定を付け足すと　そのリンクの下線を消すことができます。
スタイルシートを利用して　テキストの下線を消す　という命令文になっています。

●　ページ全体のリンクの下線を消す。

先ほどの指定は　１つのリンクに対して　下線を消す方法でした。
今度は　ページ全体のリンクの下線を消す方法についてお話しします。

ページ全体に反映させる場合は　HTML文章の　<head>　～　</head>の
部分に　次のような設定を入れます。

<html>
<head>
　<title>　ページ全体の下線を消す　</title>
　<style type="text/css>
　< !--
　a{ text-decoration:none;}
　-->
　</style>
</head>
<body>
　　　　：
　　　　：
</body>
</html>

すると　こんな感じになります。
ちょっとサンプルページを見てください。

ページ全体のリンクの下線を消したページ

●　注意してほしいこと

最近では　上のサンプルのように　リンクの下線を消したページが
多く見られるようになりました。

リンクの下線を消すと　なんだか高度なテクニックを使ったようで
満足感はありますが、ユーザビリティを考えると　やはりマイナス
になってしまいます。

それは　通常のテキストと　リンクが判別しづらくなるからです。
今回の場合だと　背景は白　テキストは黒　リンクは青　になって
いますので解りやすいですが　いつもいつもそうとは限りません。

基本的には　テキストとリンクは　ぱっとみてはっきり見分けが
できるようにしておきましょう。どうしても下線を消したいという
のでなければ　消さないほうが無難だと思います。