リンクの色を変えてみよう（ホームページは難しくない）

ホームページは難しくない　　ちょこっとHTML　　Lesson6

<a href="○">　～　</a>

<body　～　のあとに　テキストの色や　リンクの色を指定すると　ページ全体に
その色が反映されるというのは　ご理解いただけたと思います。

では　左側メニュー　右側コンテンツという2分割のページがあって　例えば
左側メニューの背景は　青　右側コンテンツの背景は白　だとどうでしょうか？

リンクの色はどうする？　その１

デフォルトの設定の場合だと　リンクの色は　青　訪問済みリンクの色は　紫です。
右側コンテンツの場合は　背景が白ですからこのままでもいいですが、
左側メニューの場合は　背景が青ですので　リンクの色が見えづらくなりますね。

リンクの色はどうする？　その２

じゃあ　左側メニューの背景にあわせて　文字の色を設定したらどうでしょうか？
今度は逆に　メニュー側はよく見えるようになりましたが、
右側のコンテンツの方のリンクが見えにくくなってしまいました。
これでもダメですね。

リンクの色はどうする？　その３

そこで　今度は　設定はデフォルトのままで　メニュー側のリンクの色を
font color　で設定してみました。
これは　通常のリンクの設定で　テキストの色をfont color　で変えているだけです。
ただ　この設定を使うと　たとえそのリンクを訪問しても　色が変わることはありません。
つまり　未訪問のページと　訪問済みのページの区別ができなくなります。

<a href="移動先のURL">　テキスト　</a>

例えば　メニューの「トップページ」　の部分だと、こんな感じです。

<a href="top.html">トップページ</a>

リンクの色はどうする？　その４

リンクの未訪問　及び　訪問済みはわからなくなりましたが、　
今　どこのページを見ているのかを知らせる手段はあります。

右側コンテンツのところに　きちんとページタイトルを入れておけば
ページが変わったことは解るんですが　もう一工夫してみましょう。

上のサンプルは　左側メニューの　項目の先頭に　それぞれ　●　を付けて
なおかつ　今見ているページの項目だけ色をつけています。

他にも　今見ているページのメニュー項目のテキストだけ　色を変えるとか
項目のテキスト横に　画像を表示させるとか　
テキストのサイズを大きくしてみる　とか　
方法はいろいろとあります。

ちょっとしたことですが、こういった工夫が　ホームページの使いやすさを
向上させます。　ひとつの方法として　覚えておいてください。