その１

リンク状態で文字色を変える

ま、今までのもそうなんぢゃが、htmlでも変更は可能ぢゃ。
では、どうしてわざわざ英字でこまごま指定するかというか、やっぱりそこは、スタイルシート１枚で複数のページの表示スタイルを揃えられるというところぢゃな。

ということで、ちゃっちゃといくぞい（笑

まずは、リンクを配置しようかのぉ？
今まで作成したtestファイルがあると思う。
そこにリンクさせるぞい。test1.html　と　test6.htmlでいくかいの？
もっと増やしてもいいぞい。それから何か作成済みのwebページがあったら、そこでもいいぞ。

Webページ作成ソフトでもいいから、［その２]の下に小見出しで［リンク］と書いて、その下にリンク先のタイトルを書いてリンクさせてくだされ。

小見出し部分は、htmlモードで入って<h2></h2>で挟むことを忘れずにの。

一応htmlを表示しておこうかの？前回最後のページに下の赤い部分が、追加したものぢゃ。

<html>

<head>
<title>ページ見本１</title>
<link rel="stylesheet" type="text/css" href="style6.css">
</head>

<body>

<h1>創作絵本／うさぎさんと少女</h1>
<br>
<br>

<h2>［その１］出会い</h2>
<p><img border="0" src="ikkenya2.jpg" width="300" height="500">ある日、近くの森を散歩していたアンジーは、道に迷ってしまい、森の奥へと入ってしまいました。<br>
小川のほとりに見つけた小さなお家。そこで洋服を着て人間のように歩いているウサギに出会いました。<br>
<br>
「お嬢さんの名前は？」<br>
「アンジー。でもみんなは私のことをアンって呼んでるわ。」<br>
「アン・・・気に入った。その名前をもらおう。」<br>
「え？もらうって？」<br>
「でも、私は男だから、そうだな、アンドリューを正式名としようか。通称アン。」<br></p>

<h2>［その２］レースは始まった</h2>
<p><img border="0" src="ikkenya3.jpg" width="300" height="200">
ウサギと一緒にその夜は、その家で泊まったアン。<br>?
翌朝、ウサギはアンの寝ている間に出かけてしまいました。<br>
「大変だよ！名前を返してもらわないとお家に帰れないよ。だって、今頃みんな君の事など忘れてるよ。」<br>
「ええっ？それってママもパパも？」<br>
「そうだよ。早く返してもらわないと、あのウサギが君ん家の子供になっちゃうよ。」<br>
「そ、そんなの困るわ。」<br>
<br>
ウサギが向かった次の家の場所を聞き、女の子はウサギを追いかけ始めました。<br></p>

<h2>［リンク］</h2>
<a href="test1.html">●テスト１</a><br>
<a href="test6.html">●テスト６</a><br>

</body>

</html>

テストページ１，６の内容は、わしのと同じでなくてもかまわん。
きちんとリンクしているかどうかだけ確認しておいてくだされ。
一応こんな感じになっておると思うが。

では、リンク文字の色を変えていくぞい。
スタイルシートの出番ぢゃ。
前回最後のスタイルシートにまたまた追記していくぞい。

body {
background-color: white;
color: black;
margin-left: 5em;
margin-right: 5em;
}

h1 {
text-align: center;
color: white;
background-color: green;
font-size: x-large;
font-family: "HG明朝E";

}

h2 {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
color: blue;
font-size: large;
clear: both;
}

p {
line-height: 1.5em;
}

img {
float: left;
margin-right: 1em;
margin-bottom: 1em;
}

a:link {
color: green;
}

a:visited {
color: red;
}

a:link { color: green; }	…	未訪問のページのリンク文字ぢゃ。
a:visited { color: red; }	…	訪問済みのページのリンク文字ぢゃ。

開いたことのないページぢゃと、この場合は緑で、開いたことのあるページぢゃと、赤で表示されるんぢゃ。
色は変えてテストしてみてくだされ。

でも、一度開いたページは、色の指定を変えても、訪問済みになってるので、未訪問の文字色の確認ができませんよー。

おお！そうぢゃな。
そういうときは、ブラウザの上の「ツール」→「インターネットオプション」→「履歴のクリア」をしてから、ページの再読込（リロード）をしてみてくれ。

にこにこ顔の助手
な～るほど。

ま、他のページへの訪問もクリアされてしまうがの。（笑汗

その２

・リンク文字の下線を消す

ま、百聞は一見にしかず、と言う。
下の赤い部分をcssファイルに追加してみたくだされ。

a:link {
color: green;
text-decoration: none;
}

a:visited {
color: red;
}

こうなったかのぉ？
未訪問のリンク文字の下線が消えたぢゃろ？
訪問済みも消したかったら、赤い部分を　a:visited　の{　}内に書いてくだされ。

その３

・マウスポインタをリンク文字に合わせたときの文字デザインの変更（１）

リンク文字にマウスを当てたとき、文字色が変わって、背景に色がつくようにしてみるぞい。
ま、今回も百聞は一見にしかず、ぢゃ。
下の赤い部分をまたまたcssファイルに追加してみたくだされ。

a:hover {
color: blue;
background-color: yellow;
}

こうなったかのぉ？
マウスを当てると、文字色が青色になって、文字の背景色が黄色になったぢゃろ？

その４

・マウスポインタをリンク文字に合わせたときの文字デザインの変更（２）

リンク文字の上下を線で囲んでみるぞ。
またしても百聞は一見にしかず、ぢゃ。
下の青い部分をまたまたcssファイルに追加してみたくだされ。

a:hover {
color: blue;
background-color: yellow;
text-decoration:UNDERLINE OVERLINE;
}

こうなったかの？

どっちかでいいときは、UNDERLINE OVERLINE　のどちらかを書けばよいのぢゃ。
リンク文字の変更は、未訪問の場合、訪問済みの場合、マウスを当てた場合として説明したが、どれをどの時のリンク文字にしていしてもかまわんのぢゃ。
最初はアンダーラインがあって、マウスを当てるとなくなるとか、テストして、いろいろなバリエーションを楽しんでみてくだされ。

まー、こういうようにいろいろできるわけぢゃが、リンク文字の装飾のサンプルとしては一応こんなところでいいかいのぉ。

ここまでやってくると、スタイルシートのリファレンスを見ても、分かるぢゃろう。
自分のやりたいデザインを調べて指定してみるのもいいかもしれん。