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行メッセージも送れます♪)

1契約で容量を気にせず複数サイトを運営するなら、ヘテムルがおすすめ!

ヘテムル」は、国内最大級の個人向けホスティングサービス『ロリポップ!レンタルサーバー』を運営する株式会社paperboy&co.の提供する大容量・高機能のレンタルサーバー。

独自ドメイン50個、データベース10個までを、追加費用無料で設定できます。
しかも、サーバー容量は余裕の10GB

動画配信・音源配信・ポッドキャスティングなど、Flash、音楽、動画ファイル等をふんだんに使って、自由にWEBサイトを表現することが可能です。 また、マルチドメイン、マルチデータベース、共有SSLなどサイト運営に大変便利な機能や、FlashMediaServer、ColdFusionなど他にはないユニークな機能を搭載。 もちろん、MovableTypeやWordPress、Xoopsといった各種webアプリケーション、CGI、 Perl、PHP4、PHP5、Rubyなどの各種開発言語にも対応しています。

実際にファイルをアップしたりできる15日間のお試し期間があるので、借りてから「サイトを移植してみたらプログラムが動かなかったー(><)」なんてことにはなりません♪