リンクのスタイル
リンクのスタイル
訪れていないリンク、すでにサイトを訪れている状態のリンク、 マウスカーソルが重ね合わさっているリンク、マウスポインタをクリックしている状態のリンク要素のスタイルを、 それぞれ設定できます。
セレクタ | 説明 |
---|---|
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;
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');
}
background-image: url('../design/img/bg.gif');
}
position
カーソルを乗せたテキストを移動させることができます。 必ず始めに「position: relative;」と記述してください。
CSSソース
a:hover{
position: relative;
top: 1px;
left: 1px;
}
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」のみ) |