『 ２７ 構造編（１）Bトップページの作成-CSS編⑤マウスが重なったリンクに動きをつける 』

• <<前の記事へ
• 次の記事へ>>

ﾄｯﾌﾟﾍﾟｰｼﾞ
• ●記事トップ
• 
• 『　２７　』
  
• 2008年12月
• 
• ２０日

• ※[ ６ ] ＨＴＭＬ-構造編(1)B トップページの作成-CSS編
  
• HTMLファイルにCSSファイルを反映させる～⑤マウスが重なったリンクに動きをつける

---

●CSSによるリンク設定→a:hover（必要によって後述のa:action）のみの設定がおすすめ

動的なＨＰにするため、マウスが重なったときのリンクに動きをつけます。

マウスが重なったときの一般リンクの設定

好みの問題ですが、マウスが重ならないときは以下の設定で下線ナシとします。

a ｛ text-decoration: none; ｝

「マウスが重な
るとき→下線を
つける設定」に
するので、「一
般設定→下線ナ
シ」にします。

■■■■■■■

仲間だいすけ(ＤＡＩ)のＨＰ制作過程

■■■■■■■
【マウス重なるとき→「オレンジ色+下線付き+くぼみｱﾘ」の設定】

プロパティ、値
は以下のように
入力します。

a:hover ｛
color: #FF8C00;
position: relative; top; 1px left: 2px;
border-bottom: 1px solid #FF8C00; ｝

なお、色の変化のみの設定もできます。マウスの重なりに対応するリンクの動きは、見やすいページ作りに必須と考えている仲間でした(^^)

応用

以下の設定により、動きのあるボタン（図/写真）等の作成ができます（HTML本文に書き込む）。

＜a href="リンク先URL"＞
＜img src="マウス重ならない状態" alt="（非表示時の）図・写真の説明" border="0" onmouseover="this.src='マウス重なる状態'"　onmouseout="this.src='マウス重ならない状態'"＞
＜/a＞
#重なる/重ならない状態の図・写真の大きさをそろえるのがポイント！！

なお、下記のように未訪問リンク・訪問済リンクのCSS設定も可能です。

ただし、その場合以下の順序でプロパティ設定をしないとCSSが反映されない
ⅰa:link,ⅱa:visited,ⅲa:hover
＃未訪問・訪問済リンクの設定は変えないのが一般

このページ『　２７　』のトップ

まとめ

●マウスが重なる/重ならない状態のボタン→例はこちら

このページ『　２７　』のトップ

• <<前の記事へ
• 次の記事へ>>