リンクのスタイル

訪れていないリンク、すでにサイトを訪れている状態のリンク、マウスカーソルが重ね合わさっているリンク、マウスポインタをクリックしている状態のリンク要素のスタイルを、それぞれ設定できます。

セレクタ/説明
セレクタ	説明
a:link	訪れていないリンク要素
a:visited	すでにサイトを訪れている状態のリンク要素
a:active	マウスポインタをクリックしている状態のリンク要素
a:hover	マウスカーソルが重ね合わさっているリンク要素

サンプル

CSSソース

a:link{
        text-decoration: none;
        color: #c0c0c0;
}
a:visited{
           text-decoration: none;
           color: #ff1493;
}
a:active{
          text-decoration: underline;
          color: #00ff99;
}
a:hover{
         text-decoration: underline;
         color: #33ccff;
         position: relative;
         top: 1px;
         left: 1px;
}

text-decoration

テキストの装飾を指定できます。

値/意味/説明
値	意味	説明
none	装飾なし	デフォルト
underline	下線
overline	上線
line-through	取り消し線

color

テキストの色を指定できます。

値/意味/説明
値	意味	説明
RGB値		#000000～#ffffff
色名		black、red、grayなど

background-color

背景色を指定します。

値/意味/説明
値	意味	説明
transparent	透過	デフォルト
RGB値		#000000～#ffffff
色名		black、red、grayなど

background-image

背景画像を指定します。透過Gifなどを利用して、background-colorプロパティと併記することもできます。

CSSソース

a:active{
background-image: url('../design/img/bg.gif');
}

position

カーソルを乗せたテキストを移動させることができます。必ず始めに「position: relative;」と記述してください。

CSSソース

a:hover{
         position: relative;
         top: 1px;
         left: 1px;
}

値/意味/説明
値	意味	説明
top		上から下へ移動
bottom		下から上へ移動
left		左から右へ移動
right		右から左へ移動

position

リンクにカーソルを乗せた場合のカーソルの形状を変えることができます。

値/サンプル/説明
値	サンプル	説明
pointer	サンプル	デフォルト
crosshair	サンプル
move	サンプル
e-resize	サンプル
ne-resize	サンプル
nw-resize	サンプル
n-resize	サンプル
se-resize	サンプル
sw-resize	サンプル
s-resize	サンプル
w-resize	サンプル
ne-resize	サンプル
wait	サンプル
help	サンプル
all-scroll	サンプル	IE6以降のみ対応
col-resize	サンプル	IE6以降のみ対応
no-drop	サンプル	IE6以降のみ対応
vertical-text	サンプル	IE6以降のみ対応
not-allowed	サンプル	IE6以降のみ対応
progress	サンプル	IE6以降のみ対応
row-resize	サンプル	IE6以降のみ対応
url(画像URL)		IE6以降のみ対応（画像URLは、拡張子「.cur」「.ani」のみ）