| リンクの文字色を指定する(CSS) |
(a:link a:visited a:hover a:active) color: #0000ff; |
color は、全てのタグ（要素）に適用できます。 |
|
color は、文字色を指定するプロパティです。疑似クラスを指定した a要素にこのプロパティを設定すると、リンクの状態毎に文字色を指定できます。 |
|
a:link { color: #0000ff; } a:visited { color: #800080; }
a:hover { color: #ff0000; } a:active { color: #ff8000; } |
| プロパティ名 | 値 | 説 明 |
|---|
| color |
色 | カラーコード or カーラーネームを指定 |
|
※ 色の指定は、カラーコード（ #ffffff, #fff, rgb(255,0,0)）または、カラーネーム（ red, blue）で行います。詳細は、「カラーネーム」のページをご覧下さい。  |
※ 疑似クラスの指定方法のページもご覧下さい。 |
|
【指定方法】 |
次のように、リンクの4つの状態に対して文字色を指定することができます。 |
| 疑似クラスの指定 | 説 明 |
|---|
| a:link { color: #000080; } |
訪問前のリンクボタン |
| a:visited { color: #800080; } |
訪問済みのリンクボタン |
| a:hover { color: #ff0000; } |
ポイント時のリンクボタン |
| a:active { color: #ff8000; } |
選択中のリンクボタン |
|
※ この指定は、link 、visited、hover、active の順に記述して下さい。 |
|
| ★ 使用例とブラウザでの表示 (d1-1)スタイルシートの書き方（基本）は、こちら です。 |
|
設定例 ： a:link { color: #0000ff; } a:visited { color: #880088; }
a:hover { color: #ff0000; } a:active { color: #ff8800; } |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
<title>link color</title>
<style type="text/css"><!--
a:link { color: #0060ff; }
a:visited { color: #906090; }
a:hover { color: #ff4000; }
a:active { color: #ff9040; }
--></style></head>
<body>
<p><a href="example.html">Sample</a></p>
</body></html> |
Sample
「Sample」をクリックするとサンプルページを表示します。 |
|
|
 注意 ※ この使用例のリンクボタンの「文字色指定」はページ全体の指定になるため、サンプルページは新たなブラウザを立ち上げて表示します。 |
|
| 関連するページ |
HTML タグページ  ：リンクボタンを作る
HTML タグページ ：ページの背景色と文字色を指定する |
Utilety Page (参考) ：「カラーネーム と カラーコード」へ
Utilety Page (参考)：「疑似クラスの指定方法」へ |
|
| リンクテキストの下線を消す(CSS) |
text-decoration: none; |
text-decoration は、全てのタグ（要素）に適用できます。 |
|
text-decoration は、文字の装飾（下線、上線、取り消し線、点滅）を指定するプロパティです。 |
<a>タグ（要素）に対してこのプロパティ（値 none）を設定すると、リンク文字の下線を消すことができます。 |
|
a { text-decoration: none; } |
| プロパティ名 | 値 | 説 明 |
|---|
| text-decoration |
none | 文字の装飾なし（下線を消す）。 |
|
 下線を消すと、リンク部分が判別しにくくなります。本文中のリンクなどは、下線を消さない方が良いでしょう。 |
| ★ 使用例とブラウザでの表示 (d1-2)スタイルシートの書き方（基本）は、こちら です。 |
|
設定例 ： a.deco { text-decoration: none; } |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
<title>link text-decoration</title>
<style type="text/css"><!--
a.deco { text-decoration: none; }
--></style></head>
<body>
<p><a href="sample.html" class=deco>Sample</a></p>
</body></html> |
Sample
「Sample」をクリックするとサンプルページを表示します。
(SampleﾍﾟｰｼﾞはDummy) |
|
|
|
| 関連するページ |
CSS スタイルシート ：文字の装飾を指定する
CSS スタイルシート：ポイントした時に下線を表示する
CSS スタイルシート：ポイントした時に下線を消す |
|
| リンクテキストの下線を変更する(CSS) |
border-bottom: 1px dotted; |
border-bottom は、全てのタグ（要素）に適用できます。 |
|
border-bottom は、下の境界線の太さ、色、スタイルをまとめて指定するプロパティです。 |
<a>タグ（要素）にこのプロパティを設定すると、リンク文字の下線のスタイルを変更できます。 |
※ このスタイルを指定する場合は、text-decoration:none; でデフォルトの下線を消しておきます。
（消さなかった場合は、デフォルトのアンダーラインも同時に表示します） |
|
a { border-bottom: 1px dotted; text-decoration: none; } |
| プロパティ名 | 値 | 説 明 |
|---|
| border-bottom |
太さ､色､ｽﾀｲﾙ |
下の境界線の太さ、色、スタイルを指定 |
| text-decoration | none | デフォルトの下線を消す |
|
|
|
| ★ 使用例とブラウザでの表示 (d1-3)スタイルシートの書き方（基本）は、こちら です。 |
|
設定例 ： a.dashed { border-bottom: 1px dashed; text-decoration: none; } /*破線*/
a.dotted { border-bottom: 3px dotted; text-decoration: none; } /*点線*/
a.double { border-bottom: 3px double; text-decoration: none; } /*二重線*/ |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
<title>link text-decoration</title>
<style type="text/css"><!--
a.dashed { 設定例参照 }
a.dotted { 設定例参照 }
a.double { 設定例参照 }
--></style></head>
<body>
<a href="sample1.html" class=dashed>Sample1</a> へ<br>
<a href="sample2.html" class=dotted>Sample2</a> へ<br>
<a href="sample3.html" class=double>Sample3</a> へ<br>
</body></html> |
Sample1 へ
Sample2 へ
Sample3 へ
「Sample1〜3」をクリックするとサンプルページを表示します。
(SampleﾍﾟｰｼﾞはDummy)
|
|
☆ dotted（点線）と double（二重線）の線の太さについて
dotted と double の線の太さは、3px 以上を指定して下さい（2px 以下の場合、dotted は dashed（破線）と
同じになり、double は solid（実線）と同じになります）。 |
|
|
|
| 関連するページ |
| CSS スタイルシート：境界線の太さ・色・スタイルをまとめて指定する |
|
