| 変化するリンク文字編 |
最近良く見かける「リンクにマウスを置くと○○になる」を、スタイルシートで作って見ましょう。
サンプル ここにマウスを置いてみてください。 マウスを上に乗せてみてください。文字色が変化し、下線が出てきます。
| ■ HEADに基本を記述 |
個別にリンクの指定もできますが、今回はページ全体のリンクを変化させてみましょう。まずはヘッダー<HEAD>内にスタイルシートの基本を記述しましょう。
<html>
<head>
<title>スタイルシートを作ろう</title>
<STYLE TYPE="text/css">
<!--
-->
</STYLE>
</head>
<body>
</body>
</html>
スタイルシート未対応のブラウザのために<!-- -->も必ず記述してください。
| ■ リンクを設定を記述 |
リンクの色、リンクにマウスを置いたとき、と分けるためにリンクのタグを記述します。
説明 A ←リンク A:active ←アクセス中 A:visited ←アクセス済み（訪問済み） A:hover ←マウスで触れたとき
ソースはこのようになります
<html>
<head>
<title>スタイルシートを作ろう</title>
<STYLE TYPE="text/css">
<!--
A
A:active
A:visited
A:hover
-->
</STYLE>
</head>
<body>
</body>
</html>
A:link,A:active,A:visited,A:hoverは全て記述しなくても良いです。これは自分の好みで記述してくださいね。マウスを置いたときのみなら「A とA:hover」だけでになります。
| ■ それぞれをスタイルシートで定義する（色） |
それぞれのリンク色をスタイルシート定義してください。
定義例
{ color:#0000ff }={ 色:赤 }
<STYLE TYPE="text/css">
<!--
A{ color:#0000ff; }
A:active{ color:#ff0000; }
A:visited{ color:#800080; }
A:hover{ color:#008000; }
-->
</STYLE>
これで、A:link（青）,A:active（赤）,A:visited（紫）,A:hover（緑）に指定できました。
| ■ それぞれをスタイルシートで定義する（装備飾り） |
それぞれの装備飾りを定義します。
装備飾りのタグは「text-decoration:装備の設定」です。
上記の文字の色と結び、複数定義になるので構文はこうなります。
{ text-decoration:装備の設定 ; color:#0000ff ; }={ 文字飾り : 飾の設定 ; 色 : 赤 ; }
装備の設定表 none ←標準 underline ←下線をつける overline ←上線をつける（Netscape未対応） line-through ←取り消し線 blink ←点滅させる（Explorer未対応）
マウスを置く前（A:link）と、置いた時（A:hover）を変えるので、ソースはこのようになります。
<STYLE TYPE="text/css">
<!--
A{ text-decoration:none;color:#0000ff; }
A:active{ color:#ff0000; }
A:visited{ color:#800080; }
A:hover{ text-decoration:underline;color:#008000; }
-->
</STYLE>
これでソースは完成です。この出来上がったソースはヘッダー<HEAD>内に、そしてリンクタグを<BODY>内に記述してブラウザ確認してください。
BODYタグ例
<body>
<A href="AAA.html">サンプル</A>
</body>
うまく出来ていればこのようになっています。→サンプル
| ■ 応用編 |
文字のサイズを変更したい場合はこのようにします。（赤字が文字の大きさ）
{ text-decoration:underline;font-size:20px;color:#008000; }
背景に色をつける場合はこのようにします。（赤字が背景色）
{ text-decoration:underline;color:#008000;background-color:#c0c0c0; }
[HOME]