リンクの表示をなんとかする


http://sennbei.mond.jp/HP/

通常は、上記のような表示になるのですが、
スタイルシートを使うと異なる表示にすることができます。


まずはアンダーラインを消してみます。

まずは何もしない状態です。

<a href="http://sennbei.mond.jp/HP/" target="_blank">
http://sennbei.mond.jp/HP/</a>


で、 text-decoration:none; を使います。

<a href="http://sennbei.mond.jp/HP/" target="_blank"
style="text-decoration:none;">
http://sennbei.mond.jp/HP/</a>

　　↓

http://sennbei.mond.jp/HP/



今度は、普段は下線がない状態で、
マウスのカーソルを乗せると下線が表示されるものを作ります。

この場合、タグごとに指定することはできないようです。
<head> 〜 </head>で指定するか、CSSファイルで指定します。


<html>
<head>
<title>リンク</title>
<style type="text/css">
<!--
a{
 text-decoration:none;
}

a:hover{
 text-decoration:underline;
}
-->
</style>
</head>
<body>

<a href="http://sennbei.mond.jp/HP/" target="_blank">
http://sennbei.mond.jp/HP/</a>

</body>
</html>

　　↓　　出来上がり

http://sennbei.mond.jp/HP/


このように、
<style type="text/css">
<!--

-->
</style>
　：
　：
</head>
の間で a:hover を使うと、
ハイパーリンクにマウスのカーソルを乗せたときの
スタイルを指定することができます。


もちろん、下線を消したり出したりするだけでなく、
文字の色を変えたり、大きさを変えたりすることもできます。
また、背景色を変えたり枠線を表示したりすることもできます。

それらは いままで解説してきたものを使えばいいだけなので、
自分でいろいろ工夫してみてください。


以下のようなものも作ることができます。
まあ、ちょっとセンス悪いですけどね。

http://sennbei.mond.jp/HP/



<style type="text/css">
<
!--
a:hover{
 text-decoration:underline;
 position:relative;
 top:1px;
 left:2px;
}
-->
</style>

また、上記のように、
position:relative;
top:--px;
left:--px;
を使うことで、リンクの上にマウスのカーソルが重なったときに
指定した数値分だけ文字が動くようにすることもできます。

ただ、あまり大きく動かすのはどうかと思います。
せめて3pxくらいにしておいてください。

http://sennbei.mond.jp/HP/



次は　フィルターを使う　です。

メニューに戻ります。