変化するリンク文字編

HOME > スタイルシート > 変化する文字編


最近良く見かける「リンクにマウスを置くと○○になる」を、スタイルシートで作って見ましょう。

サンプル
ここにマウスを置いてみてください。

マウスを上に乗せてみてください。文字色が変化し、下線が出てきます。

■ 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]