イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.42 - リンク文字の色を制御する(CSS)
|
スタイルシートをつかって、リンク文字にマウスカーソルが触れたら、文字の背景色を変えてみます。 |
| Step テーマ ● <A>タグのスタイルシート設定 |
実行例はじめに Step.1 いきなりJavaScriptを使ってみましょう Step.2 あいさつ文を表示してみましょう Step.3 現在の日付と時間を表示してみましょう Step.4 関数化してHTMLソースリストを整理しましょう |
リスト<head> <style type="text/css"> <!-- A:link { color:#FF1493; text-decoration:none; } A:visited { color:#FF1493; text-decoration:none; } A:active { color:#FF1493; text-decoration:none; } A:hover { color:#FFFFFF; text-decoration:none; background-color:#FF1493; } --> </style> </head> <body> <a href="hajimeni.htm">はじめに</a><br> <a href="step1.htm">Step.1 いきなりJavaScriptを使ってみましょう</a><br> <a href="aisatu.htm">Step.2 あいさつ文を表示してみましょう</a><br> <a href="getdate.htm">Step.3 現在の日付と時間を表示してみましょう</a><br> <a href="function.htm">Step.4 関数化してHTMLソースリストを整理しましょう</a><br> </body> |
| サンプルだけの HTMLは こちらへ |
説明前回同様、JavaScript を忘れてスタイルシートの お話です。 今回のお題は、「リンク文字の上にマウスカーソルがきたら、リンク文字の背景色を変えたいのですが・・・」です。 前回同様、NN4では動きません。NN4 が、A:hover に対応していないためです。NS6から使えるようになりました。 background-color : #色コード が、文字の背景色指定のスタイルシートです。 background-color:#FF1493; 前回 余談で言った、text-decoration:none; を追加して、アンダーラインを消してみました。 A:hover { color:#FFFFFF; text-decoration:none; background-color:#FF1493; } Aタグで使えそうな スタイルシートをまとめます。
|
Q&A[Q] 1つのページで色が変わるところ、変わらないところを設定できますか？ [A] CLASS名を指定して設定します。 <head> <style type="text/css"><!-- A.magenta:link { color:#800080; text-decoration:none; } A.magenta:visited { color:#800080; text-decoration:none; } A.magenta:active { color:#800080; text-decoration:none; } A.magenta:hover { color:#ffffff; text-decoration:none; background-color:#800080; } A.green:link { color:#6b8e23; text-decoration:none;} A.green:visited { color:#6b8e23; text-decoration:none;} A.green:active { color:#6b8e23; text-decoration:none;} A.green:hover { color:#ffffff; text-decoration:none; background-color:#6b8e23; } --></style> </head> <body> <a class="magenta" href="hajimeni.htm">はじめに</a><br> <a class="green" href="step1.htm">Step.1 いきなりJavaScriptを使ってみましょう</a><br> <a class="magenta" href="aisatu.htm">Step.2 あいさつ文を表示してみましょう</a><br> <a class="green" href="getdate.htm">Step.3 現在の日付と時間を表示してみましょう</a><br> <a class="magenta" href="function.htm">Step.4 関数化してHTMLソースリストを整理しましょう</a><br> </body> スタイルシートに任意(自分で思いついた名前)のクラス名をつけて、<A>タグにそのクラス名を指定すれば、そこだけ有効になります。 ↓ はじめに Step.1 いきなりJavaScriptを使ってみましょう Step.2 あいさつ文を表示してみましょう Step.3 現在の日付と時間を表示してみましょう Step.4 関数化してHTMLソースリストを整理しましょう 参考ステップ Step.41 リンク文字の上にマウスがきたら色を変えてみましょう Step.90 リンク先の補足説明窓を表示してみましょう その３ |
 |