 |
| ||||||||||||||||
| 初心者による初心者の為のスタイルシート・リファレンス！ 基礎から応用までの解説とサンプルを是非あなたのホームページ作りに生かして下さい！ | |||||||||||||||||
| ■小技集＞a:hover |  トップページ |
a:hoverの小技
さてここではa:hoverの利用方法を紹介します。
a:hoverは拡張クラスで、「カーソルがリンクと重なった時」の動作を設定します。
スタイルシートを用いると、単なるリンクでは無く様々な動きを持たせられるのが面白いですね。
擬似クラスのページも参考に。
■太字にする
カーソルを重ねると太字になります
■文字サイズを変える
カーソルを重ねるとサイズが大きくなります
サイズを変えると周囲のデザインや配置に影響が出るので注意しましょう。
■線を出現させる
カーソルを重ねると線が出てきます
borderを使って、ちょっと装飾してみます。
■マーカーをかける
カーソルを重ねると背景が黄色になります
■アイコンを変更
カーソルを重ねるとアイコンが変わります
この場合、a:hoverだけでなくaに対しても予めスタイルを指定します。
そして両者には異なるアイコンを指定します。なおa:hoverの設定値でaと同じものは省略出来ます（paddingなど）。
■文字がへこむような効果
カーソルを重ねると文字がへこむように見えます
position及びtop, bottomやright,leftを指定する事で、カーソルが重なった時の文字の位置をずらします。
これは画像にも有効です。
■ハイライト
カーソルを重ねると背景が白くなる
カーソルを重ねると背景色と文字色を入れ替える
以下の様に設定しリンクを並ると、上記の様な効果を出せます。
widthを設定し幅を一律にする事でボタンの様な効果にします。
※aのスタイル設定で継承されるもの（widthやpaddingなど）はa:hoverで改めて設定する必要はありません。ただしtext-decorationは必要です。
.ahover08 a:hover {background:#fff;color:#f90;text-decoration:none;}
■立体ボタン１
カーソルが重なると領域が凹んだように見える、立体ボタンの効果です。
横に並べても、縦に並べても利用しやすいです。
具体的には以下の設定で立体的な効果を作ります。
.ahover09 a:hover {background:#00c;color:#ccc;border-color:#333 #fff #fff #333;position:relative;bottom:1;right:1;text-decoration:none;}
<br><br>
<a href="kowaza.html">ボタン１</a><br>
<a href="kowaza.html">ボタン２</a><br>
<a href="kowaza.html">ボタン３</a><br>
</span>
■立体ボタン２
立体ボタン１がカーソルが重なった時点で凹むのに対し
クリックした瞬間に凹む動作のボタンです。
こちらの方がよりボタンの動きに近いですね。
立体ボタン１でa:hoverで設定したスタイルを、そのままa:activeとするだけでOKです。
※a:activeはクリックした時のスタイル設定です。
ついでに、カーソルが重なった時点で、若干のハイライトもつけておきました。
.active a:hover {background:#36f; color:#fff; text-decoration:none;}
.active a:active {background:#00c; color:#ccc; border-color:#333 #fff #fff #333; position:relative; bottom:1; right:1; text-decoration:none;}
a:hoverは拡張クラスで、「カーソルがリンクと重なった時」の動作を設定します。
スタイルシートを用いると、単なるリンクでは無く様々な動きを持たせられるのが面白いですね。
擬似クラスのページも参考に。
TIPS：head内部でaやa:hoverの設定をすると、そのページ全てのリンクにスタイルが適用されてしまいます。一部分のリンクにだけa:hoverの設定をしたい場合は、適用したいaの外側にあるタグへクラスを設定し、その前後関係でスタイルを適用する形にするとよいでしょう。具体的には以下のような形式です。
ページ先頭head内：
<style type="text/css">
.link1 a:hover {設定内容}
</style>
リンク部分：
<span class="link1"><a href="...">リンク</a></span>
なお当ページのサンプルで示すソースは、このHead内に設定するスタイルの書式で表しています。
ページ先頭head内：
<style type="text/css">
.link1 a:hover {設定内容}
</style>
リンク部分：
<span class="link1"><a href="...">リンク</a></span>
なお当ページのサンプルで示すソースは、このHead内に設定するスタイルの書式で表しています。
サンプル
■太字にする
カーソルを重ねると太字になります
a:hover {font-weight:bold;}
■文字サイズを変える
カーソルを重ねるとサイズが大きくなります
サイズを変えると周囲のデザインや配置に影響が出るので注意しましょう。
a:hover {font-size:20;}
■線を出現させる
カーソルを重ねると線が出てきます
borderを使って、ちょっと装飾してみます。
a {text-decoration:none}
a:hover {border:dashed red;border-width:1 0;text-decoration:none}
a:hover {border:dashed red;border-width:1 0;text-decoration:none}
■マーカーをかける
カーソルを重ねると背景が黄色になります
a:hover {background-color:yellow;}
■アイコンを変更
カーソルを重ねるとアイコンが変わります
この場合、a:hoverだけでなくaに対しても予めスタイルを指定します。
そして両者には異なるアイコンを指定します。なおa:hoverの設定値でaと同じものは省略出来ます（paddingなど）。
a {padding-left:20;background:url(allow1.gif) no-repeat left middle;}
a:hover {background:url(allow2.gif) no-repeat left middle;}
a:hover {background:url(allow2.gif) no-repeat left middle;}
■文字がへこむような効果
カーソルを重ねると文字がへこむように見えます
position及びtop, bottomやright,leftを指定する事で、カーソルが重なった時の文字の位置をずらします。
これは画像にも有効です。
a:hover {position:relative;top:1px;left:1px;color:red;}
■ハイライト
カーソルを重ねると背景が白くなる
a {background:#cff;color:#59f;padding:3;text-decoration:none}
a:hover {background:#fff;color:#69f;text-decoration:none}
a:hover {background:#fff;color:#69f;text-decoration:none}
カーソルを重ねると背景色と文字色を入れ替える
a {background:#f90;color:#ff0;padding:3;text-decoration:none;}
a:hover {background:#ff0;color:#f90;text-decoration:none;}
a:hover {background:#ff0;color:#f90;text-decoration:none;}
以下の様に設定しリンクを並ると、上記の様な効果を出せます。
widthを設定し幅を一律にする事でボタンの様な効果にします。
※aのスタイル設定で継承されるもの（widthやpaddingなど）はa:hoverで改めて設定する必要はありません。ただしtext-decorationは必要です。
ページ先頭部分のスタイル設定
.ahover08 a {width:150;font-weight:bold;background:#f90;color:#fff;padding:3;text-decoration:none;border:#f63 1 solid}.ahover08 a:hover {background:#fff;color:#f90;text-decoration:none;}
リンクの設定部分
<span class="ahover08"><a href="kowaza.html">メニュー１</a><a href="kowaza.html">メニュー２</a><a href="kowaza.html">メニュー３</a></span>
■立体ボタン１
カーソルが重なると領域が凹んだように見える、立体ボタンの効果です。
横に並べても、縦に並べても利用しやすいです。
具体的には以下の設定で立体的な効果を作ります。
border： 枠線の明暗で凹凸を表現します
color： 凹んだ時は文字色をやや暗くします
background-color： 凹んだ時はやや暗くします
position： 凹んだ時にずらす事で、凹みを表現します
color： 凹んだ時は文字色をやや暗くします
background-color： 凹んだ時はやや暗くします
position： 凹んだ時にずらす事で、凹みを表現します
ページ先頭部分のスタイル設定
.ahover09 a {width:150;font-size:20;padding:2;color:#fff;background:#30f;border:1 solid;border-color:#fff #333 #333 #fff;text-decoration:none;}.ahover09 a:hover {background:#00c;color:#ccc;border-color:#333 #fff #fff #333;position:relative;bottom:1;right:1;text-decoration:none;}
リンクの設定部分
<span class="ahover09"><a href="kowaza.html">ボタン１</a><a href="kowaza.html">ボタン２</a><a href="kowaza.html">ボタン３</a><br><br>
<a href="kowaza.html">ボタン１</a><br>
<a href="kowaza.html">ボタン２</a><br>
<a href="kowaza.html">ボタン３</a><br>
</span>
■立体ボタン２
立体ボタン１がカーソルが重なった時点で凹むのに対し
クリックした瞬間に凹む動作のボタンです。
こちらの方がよりボタンの動きに近いですね。
立体ボタン１でa:hoverで設定したスタイルを、そのままa:activeとするだけでOKです。
※a:activeはクリックした時のスタイル設定です。
ついでに、カーソルが重なった時点で、若干のハイライトもつけておきました。
ページ先頭部分のスタイル設定
.active a {width:150; font-size:20; background:#30f; color:#fff; padding:2; border:1 solid; border-color:#fff #333 #333 #fff; text-decoration:none;}.active a:hover {background:#36f; color:#fff; text-decoration:none;}
.active a:active {background:#00c; color:#ccc; border-color:#333 #fff #fff #333; position:relative; bottom:1; right:1; text-decoration:none;}
リンクの設定部分
<span class="active"><a href="kowaza.html">ボタン７</a><a href="kowaza.html">ボタン８</a></span>