HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座

|  Home  |  ホームページ作成の知識  |  HTML 講座  |  HTML TABLE 講座  |  スタイルシート(CSS) 講座  |  携帯サイト 作成 講座  |
[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさら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に変更して下さい。

(C) いまさらHTML CSS講座 2002-2008 All right reserved