<A>タグのスタイルシート


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

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

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

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

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

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

もうお解かりのことと思いますが、 そのページの同じタグは{ }の中に書かかれたスタイルになるのです。
そして<A>タグなら a を頭につけ、 <A>タグにマウスを載せた状態は a:hover を頭につけるのです。
各状態の記述を、従来の<BODY>内記述と対比すると次の通りです。
クリック前マウスを載せらクリック時クリック後
<BODY>オプションlinkalinkvlink
スタイルシートa又はa:linka:hovera:activea:visited

{ }内には 属性(プロパティ):値 と指定し、複数の指定をするときは ; で区切って連記します。
文字に関する主なものは
 属性(プロパティ)
文字の大きさfont-size:  10 / 14 / 20 / 32
文字の色color:  #000000 / #ff0000 / #00ff00 / #0000ff
文字の背景色background:  #000000 / #ff0000 / #00ff00 / #0000ff
文字の太さfont-weight100900
文章の飾り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/">
QPONホームページ</a>
QPONホームページ
<a class="demo2" href="http://qpon.quu.cc/">
QPONホームページ</a>
QPONホームページ
<a class="demo3" href="http://qpon.quu.cc/">
QPONホームページ</a>
QPONホームページ
<a class="demo4" href="http://qpon.quu.cc/">
QPONホームページ</a>
QPONホームページ

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


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

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

戻る