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