4-1 リンクに関するレシピ集
<style type="text/css">
<!--
a:link {color:#990066;} /* リンク未訪問 */
a:active {color:#ff9999;} /* クリック時 */
a:visited {color:#cc66ff;} /* 訪問済リンク */
a:hover {color:#ff9999;} /* マウスポイント時 */
-->
</style>
- ＃990066等の部分が色の指定です。
使用される際はお好きな色で設定して下さい。（下記のレシピは基本的に全て上記↑と同じリンク色設定にしております） -
動作は全てWinのIE6.0、NN7.1、OPERA7.5、Firefox1.5.0.1で
確認済みです。 （但し、hoverとactiveはIE4.0、NN6.0以降でないとサポートされておりません）。 ちなみにOPERA7.5とFirefox1.5.0.1では普通に見れております。
[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
4-2 マウスが乗ると背景色が変わる
<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--
a:link {color:#990066;} /* リンク未訪問 */
a:active {color:#ff9999;} /* クリック時 */
a:visited {color:#cc66ff;} /* 訪問済リンク */
a:hover {
color:#ff9999; /* マウスが乗った時の文字色 */
background-color:#ffffcc; /* 〃の背景色 */ }
-->
</style>
見本はこちらをどうぞ。
（クリックするとリンクのページに行きます）
- 素材の一部（ボタン等）が透過されている物のページで設定すると可愛いかも知れません。
4-3 リンクの下線を一括で消す
<head> ～ </head> 内に記述して下さい。
<!--
a:link {color:#990066;} /* リンク未訪問 */
a:active {color:#ff9999;} /* クリック時 */
a:visited {color:#cc66ff;} /* 訪問済リンク */
a:hover {color:#ff9999;} /* マウスポイント時 */
a { text-decoration: none; }
-->
</style>
見本はこちらをどうぞ。
（クリックすると最初の案内ページに戻ります）
- 各項目ごとに設定したい場合は
a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; } として下さい。 - 下線を出したい場合は none を underline にすると線が出ます。
4-4 マウスが乗ると下線が出る
<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--
a { text-decoration: none; } / リンク関連の下線を全て消す */
a:link {color:#990066;} /* リンク未訪問 */
a:active {color:#ff9999;} /* クリック時 */
a:visited {color:#cc66ff;} /* 訪問済リンク */
a:hover {
color:#ff9999; /* マウスが乗った時の文字色 */
text-decoration: underline; /* 下線を出す */
}
-->
</style>
見本はこちらをどうぞ。
（クリックすると最初の案内ページに戻ります）
4-5 マウスが乗ると点線が出る
<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--
a { text-decoration: none; } /* リンク関連の下線を全て消す */
a:link {color:#990066;} /* リンク未訪問 */
a:active {color:#ff9999;} /* クリック時 */
a:visited {color:#cc66ff;} /* 訪問済リンク */
a:hover {
border-bottom-style: dotted; /* 点線 */
border-bottom-color: #ff9999; /* 点線のカラー */
border-bottom-width: 2px; /* 点の大きさ */
color: #ff9999; /* マウスが乗った時の文字色 */
}
-->
</style>
見本はこちらをどうぞ。
（クリックすると最初の案内ページに戻ります）
4-6 マウスが乗るとリンクの周りが点線で囲まれる
<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--
a { text-decoration: none; } /* リンク関連の下線を全て消す */
a:link {color:#990066;} /* リンク未訪問 */
a:active {color:#ff9999;} /* クリック時 */
a:visited {color:#cc66ff;} /* 訪問済リンク */
a:hover {
border-style: dotted; /* 点線 */
border-color: #ff9999; /* 点線のカラー */
border-width: 2px; /* 点の大きさ */
color: #ff9999; /* マウスが乗った時の文字色 */ }
-->
</style>
見本はこちらをどうぞ。
（クリックすると最初の案内ページに戻ります）
4-7 マウスが乗ると上下線が出る
<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--
a { text-decoration: none; } /* リンク関連の下線を全て消す */
a:link {color:#990066;} /* リンク未訪問 */
a:active {color:#ff9999;} /* クリック時 */
a:visited {color:#cc66ff;} /* 訪問済リンク */
a:hover {
color:#ff9999; /* マウスが乗った時の文字色 */
text-decoration: underline overline;
/* 上下線を出す */
}
-->
</style>
見本はこちらをどうぞ。
（クリックすると最初の案内ページに戻ります）
- 但しoverlineはIE3やNN4ではサポートされておりません。
-
OPERA7.5では表示はされますが、上部の線のみ何故か文字に少し掛かっております（汗）
追記：OPERA8.5ではキチンと表示されるようになりました。
4-8 マウスが乗ると取り消し線が出る
<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--
a { text-decoration: none; } /* リンク関連の下線を全て消す */
a:link {color:#990066;} /* リンク未訪問 */
a:active {color:#ff9999;} /* クリック時 */
a:visited {color:#cc66ff;} /* 訪問済リンク */
a:hover {
color:#ff9999; /* マウスが乗った時の文字色 */
text-decoration: line-through; /* 取り消し線 */ }
-->
</style>
見本はこちらをどうぞ。
（クリックすると最初の案内ページに戻ります）
-
IE6.0とNN7.1とFirefox1.5.0.1では取り消し線は文字の真ん中辺りに
出現しますが、OPERA7.5では文字の下部辺りに線が出ます。
追記：OPERA8.5ではキチンと真ん中に取り消し線が出るようになりました。
4-9 マウスが乗るとリンクしたテキストや画像が揺れる
<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--
a { text-decoration: none; } /* リンク関連の下線を全て消す */
a:link {color:#990066;} /* リンク未訪問 */
a:active {color:#ff9999;} /* クリック時 */
a:visited {color:#cc66ff;} /* 訪問済リンク */
a:hover {
color:#ff9999; /* マウスが乗った時の文字色 */
position: relative;top:1px; left:1px; /* 揺れ */ }
-->
</style>
見本はこちらをどうぞ。
（クリックすると最初の案内ページに戻ります）
-
NN7.1では何故か画像にリンクを貼った場合のみ、
マウスがその画像に触れると下五分の一程を残して上部の画像が消えます。（テキストリンクの場合は問題ありません）
4-10 マウスが乗ると太字になる
<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--
a { text-decoration: none; } /* リンク関連の下線を全て消す */
a:link {color:#990066;} /* リンク未訪問 */
a:active {color:#ff9999;} /* クリック時 */
a:visited {color:#cc66ff;} /* 訪問済リンク */
a:hover {
color:#ff9999; /* マウスが乗った時の文字色 */
font-weight: bold; /* 太字 */ }
-->
</style>
見本はこちらをどうぞ。
（クリックすると最初の案内ページに戻ります）