リンクの部分にマウスオーバーしたときに、文字の上や下に線を出します。
線を出す方法は、text-decorationプロパティを使う方法と、borderプロパティを使う方法があります。
borderプロパティのほうが、線の種類や太さなどを色々と変えることができます。
マウスがリンク部分に乗ったとき(＝マウスオーバーのとき)は、スタイルシート中の「a:hover」で指定します。
text-decorationプロパティの場合は、上線・下線・取り消し線が設定できます。
borderプロパティは、border-styleで線の種類(9種類)を設定し、border-widthで線の太さを設定します。
組み合わせ次第で色んな出し方ができるので、色々と試してみてくださいね。
→
text-decorationの詳しい説明
→
border-styleの詳しい説明
→
border-widthの詳しい説明
 |
 |
 |
 |
<STYLE type="text/css">
<!--
A {COLOR: #3e4755; TEXT-DECORATION: none; BORDER-BOTTOM: #91a4e3 1px dotted;}
A:visited {COLOR: #3e4755; TEXT-DECORATION: none; BORDER-BOTTOM: #e87c89
1px dotted;}
A:hover {COLOR: #91a4e3; TEXT-DECORATION: none; BORDER-BOTTOM: #91a4e3
1px dotted;}
a:hover.link01 { text-decoration:underline; BORDER-BOTTOM: #ffffff 1px solid;}
a:hover.link02 { text-decoration:overline; BORDER-BOTTOM: #ffffff 1px solid;}
a:hover.link11 { border-style:solid none solid none; border-width:1px; }
a:hover.link12 { border-style:dotted none dotted none; border-width:1px; }
a:hover.link13 { border-style:double none double none; border-width:3px; }
-->
</STYLE>
※ text-decorationを使った場合<BR>
<A href="#" class="link01">リンク部分です (下線)</A><BR>
<A href="#" class="link02">リンク部分です (上線)</A><BR>
<BR>
※borderを使った場合<BR>
<A href="#" class="link11">リンク部分です (線の種類：solid)</A><BR>
<A href="#" class="link12">リンク部分です (線の種類：dotted)</A><BR>
<A href="#" class="link13">リンク部分です (線の種類：double)</A>
|
 |
 |
 |
 |
