CSSデザインリンク
- リンク1
- リンク2〔マウスが乗った時リンクに背景色を付ける〕
- リンク3〔リンクの下線を border-bottom プロパティで指定〕
- リストマークを画像にする〔背景プロパティ（background）使用〕
リンク1
2007/8/19
<style type='text/css'>
/* ★IDによるリンクのスタイル指定 */
#link1 a { text-decoration:underline; color:orange; }
#link1 a:hover { text-decoration:underline; color:gray; }
/* ★ID、クラスによるリンクのスタイル指定 */
/* cls1クラス */
#link1 a.cls1 { text-decoration:none; color:skyblue; }
#link1 a.cls1:hover { text-decoration:underline; color:skyblue; }
/* cls2クラス */
#link1 a.cls2 { text-decoration:none; color:blue; }
#link1 a.cls2:hover { text-decoration:overline; color:blue; }
</style>
<div id='link1'>
<a href='#'>リンク</a>
<a href='#' class='cls1'>リンク（cls1）</a>
<a href='#' class='cls2'>リンク（cls2）</a>
</div>
リンク2
マウスが乗った時リンクに背景色を付ける
2007/8/19
<style type='text/css'>
/* 通常時 */
a.link2 { text-decoration:underline; color:blue; padding:0 3px; }
/* マウスが乗った時 */
a.link2:hover { text-decoration:none; color:#fff; background-color:orange; }
</style>
<a href='javascript:void(0)' class="link2">リンク</a>
リンク3
リンクの下線を border-bottom プロパティで指定
2007/8/19
<style type='text/css'>
/* 通常時 */
a.link3 { text-decoration:none; color:blue; border-bottom:1px solid blue; }
/* マウスが乗った時 */
a.link3:hover { text-decoration:none; color:orange; border-bottom:1px solid orange; }
</style>
<a href='javascript:void(0)' class="link3">リンク</a>
リストマークを画像にする
背景プロパティ（background）使用
2007/8/19