スタイルシートの技

リンク上にカーソルが載った時に下線を消したりする

ハイパーリンク(Hyper Link)とは他のHTMLとをつなぐものでa要素がそれに当たります。 ハイパーリンクの事をみなさんはリンクと呼んでいます。 このリンクは良く見るのは青色の文字に下線が引いてある事が多いですが、 通常は下線を引かずにマウスカーソルがリンクの上に乗った時だけ下線を表示したりするとクールなリンクとなります。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title></title>
   <style type="text/css">
      a:link    { Color: #0000cc; text-decoration: none; }
      a:visited { color: #0000cc; text-decoration: none; }
      a:hover   { color: #ff0000; text-decoration: underline; }
      a:active  { color: #0000cc; text-decoration: none; }
   </style>
</head>
<body>
   <h1>クールなハイパーリンク</h1>
   <p>御用の際には<a href="http://www.w-frontier.com/">Web Frontier</a>
   までお気軽にお越し下さい。</p>
</body>
</html>
クールなハイパーリンク
御用の際にはWeb Frontierまでお気軽にお越し下さい。

このようにリンクの上にカーソルが乗った時の動作は"a:hover"で制御します。 この":hover"はスタイルシートの中でも特殊なもので疑似クラスと呼ばれています。 静的な文書のデザインではなく、動的なものですのでこのような疑似クラスを使う事になります。

:link
通常時のハイパーリンクの設定
:visited
すでに訪問済みのハイパーリンクの設定
:hover
ハイパーリンクにマウスカーソルが乗った時の設定
:active
ハイパーリンクをクリックした時の設定

領域によってハイパーリンクの挙動を変えたい場合には、クラスを作ると良いでしょう。 例えば、左ペインとメインコンテンツでのリンクの挙動を変えるなど、 当サイトのトップページでもそのテクニックを使っています。 色々と変えてみてリンクの挙動を確認してみてください。

top