TOP  »  スタイルシート(CSS)  »  リンク

CSSデザイン
リンク

リンク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

このページの先頭へ
Q. このサイトの情報はお役に立ちましたでしょうか?

     

投票する | 投票結果を見る | 管理人に【web拍手】を送る web拍手(1行メッセージも送れます♪)

IT・インターネット・ゲーム業界に精通したキャリアコンサルタントが、求人紹介・書類添削や面接対策、年収・入社日交渉まで何かと大変な転職活動を【無料】でサポートしてくれます。