|
| いまさらHTML,CSS講座トップ > HTMLテンプレート インデックスページ > リンクを目立たせる HTMLテンプレート |
|
|
本稿では、リンクが指定してあるテキストにマウスカーソルを合わせた時に起きる変化のテンプレートページです。
|
| ■ リンク マウスオーバー 装飾テンプレート |
|
| マウスをリンクが指定してあるテキストにあわせると、背景色がつきます。 |
 表 示 |
|
|
 ソース 例 |
|
| ■スタイルシート(head要素に記述) |
<style type="text/css">
<!--
a.change:hover{
text-decoration: none;
color: #ffffff;
background: #464646;
}
-->
</style>
|
- ページ全体の指定以外で使う場合は、クラス(class)名を指定します。(例は、changeと指定)
- マウスをリンクにあわせた時の背景色を目立たせる為に、text-decoration: none; を指定し、下線を表示しない指定にします。※全体指定で最初から指定が無い場合は必要ありません。
- 指定する背景色が濃い色の場合、フォント色を、colorプロパティで逆の色に変更すると効果的です。
|
|
| 本文(body要素に記述) |
<ul>
<li><a href="#" class="change">メニュー1</a></li>
<li><a href="#" class="change">メニュー2</a></li>
<li><a href="#" class="change">メニュー3</a></li>
</ul>
|
|
| #をリンク先のファイル名又は、URLに変更して下さい。 |
|
|
|
|
|
|
|
