＜Ａ＞タグのスタイルシート

従来、リンク用のアンカータグ＜Ａ＞は、文字にアンダーラインが付き、文字色が「クリック前」、「クリック後」 と変化する機能はありました。
この色は<BODY LINK="#008800" VLINK="#880000">のように色指定することもできました。
しかしマウスを載せたときの色はブラウザ（ＩＥ）を閲覧者が設定しなければ変化せず、ホームページ側で作りこむことはできませんでした。
このマウスを載せたときに変化させる機能をスタイルシートを使えばホームページ側で簡単に実現できますので紹介します。
＜ＨＥＡＤ＞〜＜／ＨＥＡＤ＞間に次のようなスタイルシートを書きます。
その結果 <a href="http://www2a.biglobe.ne.jp/~qpon/" >ＱＰＯＮホームページ</a> にマウスを載せたときデモ欄のように変化します。

機能<head>〜</head>内に記述デモ
マウスをのせたら、
文字を赤色にする		 
<style type="text/css">
<!--
a:hover{color:#ff0000;}
-->
</style>
還暦ＱＰＯＮホームページ

地図から飛び出すリンク集
マウスをのせたら、
背景を赤色、
文字を白色にする		 
<style type="text/css">
<!--
a:hover{
background-color:#ff0000;
color:#ffffff;
}
-->
</style>
還暦ＱＰＯＮホームページ

地図から飛び出すリンク集
リンク文字を緑色にし
下線は消し
マウスをのせたら、
文字を赤色にし
上下に線を引く		 
<style type="text/css">
<!--
a{
color:#008800;
text-decoration:none;
}
a:hover{
color:#ff0000;
text-decoration:underline overline;
}
-->
</style>
還暦ＱＰＯＮホームページ

地図から飛び出すリンク集
ボタンのようなリンク 
<style type="text/css">
<!--
a{
color:#000000;
background:#cccccc;
border-style:outset;
}
a:hover{
background:#ffff00;
border-style:inset;
}
-->
</style>
還暦ＱＰＯＮホームページ

地図から飛び出すリンク集

もうお解かりのことと思いますが、 そのページの同じタグは｛ ｝の中に書かかれたスタイルになるのです。
そして＜Ａ＞タグなら　ａ　を頭につけ、 ＜Ａ＞タグにマウスを載せた状態は　ａ：ｈｏｖｅｒ を頭につけるのです。
各状態の記述を、従来の＜ＢＯＤＹ＞内記述と対比すると次の通りです。
クリック前マウスを載せらクリック時クリック後
＜ＢＯＤＹ＞オプションlink−alinkvlink
スタイルシートa又はa:linka:hovera:activea:visited

｛　｝内には　属性（プロパティ）：値 と指定し、複数の指定をするときは　；　で区切って連記します。
文字に関する主なものは
　属性（プロパティ）値
文字の大きさfont-size: 　10 / 14 / 20 / 32
文字の色color: 　#000000 / #ff0000 / #00ff00 / #0000ff
文字の背景色background: 　#000000 / #ff0000 / #00ff00 / #0000ff
文字の太さfont-weight100〜900
文章の飾りtext-decoration:none/ underline / overline / line-through
のようなものがあります。

ところで、解説のデモは、同じページ内なのに、マウスを載せたときの現象が変わっている。
このように、同じタグに複数のスタイルを使い分ける方法は <a class="demo1" href="http://〜のようにクラス名をタグに指定し、a.demo1{ }のようにクラス名をつけたスタイルを指定します。
前例で書くと次のようになります。
<head>〜</head>内に記述リンクの記述・デモ
<style type="text/css">
<!--
a.demo1:hover{color:#ff0000;}

a.demo2:hover{background-color:#ff0000;color:#ffffff;}

a.demo3{color:#008800;text-decoration:none;}
a.demo3:hover{color:#ff0000;text-decoration:underline overline;}

a.demo4{color:#000000;background:#cccccc;border-style:outset;}
a.demo4:hover{background:#ffff00;border-style:inset;}
-->
</style> 		<a class="demo1" href="http://qpon.quu.cc/">
ＱＰＯＮホームページ</a>
ＱＰＯＮホームページ
<a class="demo2" href="http://qpon.quu.cc/">
ＱＰＯＮホームページ</a>
ＱＰＯＮホームページ
<a class="demo3" href="http://qpon.quu.cc/">
ＱＰＯＮホームページ</a>
ＱＰＯＮホームページ
<a class="demo4" href="http://qpon.quu.cc/">
ＱＰＯＮホームページ</a>
ＱＰＯＮホームページ

スタイルシートではありませんが、
ＱＰＯＮホームページ
　　　↑にマウスを載せてみてください。

<a class="demo1" href="http://www2a.biglobe.ne.jp/~qpon/" title="ホームページ作りの裏ワザや有益なフリーのツールが満載。&#13還暦からホームページに取り組んだＱＰＯＮのオリジナル。">ＱＰＯＮホームページ</a>

と書いてあります。 タグ内に、title="コメント"　と書くと、マウスを載せたとき、コメントが表示できます。
なお改行は&#13と書いてください。
戻る