マウスをのせるとリンク文字の色を変化させる

それでは、StyleSheetを使ったサンプルを見ていただきます。

ここにマウスをのせてください。

どうでしょう？何となく彩りがありますよね？
この使い方は非常に簡単です。
構えられている方は、思わず拍子抜けします。
という事で、ソースを見てください。

ソース

<style type="text/css">
<!--
a {text-decoration:none;background-color:#ffffff;}
a:hover {background-color:#6666ff;text-decoration:underline;color:#ffffff;}
-->
</style>

どうでしょうか？拍子抜けされました？
解説をするのも、おこがましいですが敢えてやります。

最初の a {設定} がマウスをのせる前の設定です。

次の a:hover {設定} がマウスをのせた時の設定です。

設定値の内容は、StyleSheetの設定の仕方と同じです。
という事で、終了ですがちょっと寂しいので、実際のスタイルシートの設定内容を少し解説させてください。

■text-decoration：文字の装飾です。
  none：装飾なし（デフォルト）
  overline：上線
  underline：下線
  line-through：取り消し線
  blink：点滅（注意！InternetExplorerには対応してません）

■background-color：背景色です。

■color：文字色です。

もちろん、他にもfont-sizeなど色々なプロパティを組み合わせて、もっと派手にする事も出来ますよ。

さて、面倒くさい方はそのままソースをコピーしてご自分のホームページの<HEAD>タグ内に貼り付けましょう。
私は当然ですが、使いまわしています。

色を変えるのも面倒くさいので、そのまま使ってます。
↑
これは内緒ですよ。て言っちゃいました・・・。忘れてください・・・

▲BACK

IT SOHO CLUB