カーソルを重ねたときのリンクの色を指定するため「a:hover{ }」を追加します。
色は「#43adb3」として{ }の中に「color:#d6d620」を追加します。
リンク先をロードしているときのリンク色を指定するため「a:active{ }」を追加します
色は「#d6202e」として{ }の中に「color:#d6202e」を追加します。
|
<html> <head> <title>色探しの旅</title> <style type="text/css"><!-- body{color:#666666;background-color:#f0f8ff} h1{font-size:25px; font-family:'Comic Sans MS';color:royalblue} span.iro{color:olive;font-weight:bold} span.sora{color:navy} p{width:360px;text-align:left;background-color:#dbe9dd;padding:20px;border-style:dotted;border-width:6px;border-color:#377c5f} div.copy{background-color:#377c5f;color:#ffffff;font-size:smaller;padding:2px;width:30%;margin-top:20px} a:link{color:#287c72} a:visited{color:#e4b6d4} a:hover{color:#d6d620} a:active{color:#d6202e} --></style> </head> <body> <div align="center"> <h1>色探しの旅『Sky&Water』</h1> <p>日本の四季には色が満ちています。<span class="sora">空</span>そして<span class="sora">水</span>の色<span class="iro">『色探しの旅』</span>に出かけませんか</p> <div class="menu"> <a href="contents-h.htm">春の色</a>* <a href="contents-n.htm">夏の色</a>* <a href="contents-a.htm">秋の色</a>* <a href="contents-f.htm">冬の色</a> </div> <div class="copy">copyright(c)sora<br> E-MAIL：<a href="mailto:sora@free.japandesign.ne.jp">sora@free.japandesign.ne.jp</a></div> </div> </body> </html> |
リンクのデザインは、リンクの状態別に設定することが出来ます
※リンクのデザイン設定を書く場所
| a:link | 標準のリンク |
| a:visited | アクセス済みのリンク |
| a:hover | カーソルを重ねたときのリンク |
| a:active | ロード中のリンク |
※背景色をアレンジ
a:hover{～}にbackground-colorを追加し、背景色を指定します
a:hover{color:#d6d620;background-color:aabbe3}
【参考】
※文字の大きさをアレンジ
a:hover{～}にfont-size設定しし、文字の大きさを変えることが出来ます
a:hover{color:#d6d620;background-color:aabbe3;font-size:20px}
【参考】
しかし文字の大きさが変わることでまわりのレイアウトが動きます
※リンク状態別に同じデザインを指定する
font-size:20pxを全てのリンク状態に書き加えることで同じ字の大きさになります
しかし同じ設定を４カ所に書くのは面倒です。変更も大変です
※そこでリンクの状態に関係無くデザインを指定する方法もあります
a{～}で設定したデザインはリンクの状態に関係なく<a>～</a>で囲んだ部分に適用されます
a{font-size:20px}を追加します
【参考】