|
今回は スタイルシートを使って リンクを設定してみます。
前回の <body・・・ のあとにリンクの設定をしたときは、
通常のリンク、訪問済みリンクと あと リンクをクリックしたときの色を
設定できましたね。
今回は新たに マウスのカーソルをリンクにもっていったときに色が変わる
という要素も設定できるようになります。
まずは サンプルを見てください。
スタイルシートを使ったリンクのサンプル
上記のHTMLソースは こんな感じになっています。
<html>
<
head>
<
title>スタイルシートを使ったリンクのサンプル</title>
<
style type="text/css">
<
!--
a:link {
color: #3333CC;
text-decoration: none;
}
a:visited {
color: #990066;
text-decoration: none;
}
a:hover {
color: #FF6600;
text-decoration: underline;
background-color: #FFFFCC;
}
a:active {
color: #FF0000;
text-decoration: underline;
background-color: #FFFF66;
}
-->
<
/style>
<
/head>
<
body>
：
：
：
<
/body>
<
/html> |
【解説】
サンプルをご覧になってわかると思いますが、
通常のリンク 訪問済みリンク カーソルをリンクにあわせたとき
そして リンクをクリックしたとき それぞれ個別に設定してある
というのがわかりますね。
リンクで気を付けることは 通常の場合でも スタイルシートを
使ったときもやはり同じです。
基本的には どこがリンクになっていて どこが訪問済みリンク
なのか ぱっとみてわかる配慮が必要です。
リンクの下線が出ない設定の場合は マウスをもっていかないと
リンクであると理解できないというのでは やっぱり扱いづらい
ものになります。ページの構成や テキストの色も十分考えて
その部分が明らかにリンクであると解って貰える配慮をしましょう。
ホームページビルダーでも出来ますか？
実をいうと このリンクの設定はホームページビルダーでも出来
るんですか？ というお問い合わせがとても多いです。
もちろん ホームページビルダーでも 設定は可能です。
ただし 色の設定の部分で ソフト上では決まった色しか指定で
きないようで
こだわってやりたいのであれば やはり自分で
HTMLソースをいじる必要があるようです。
このやり方は ホームページビルダーグレート初心者講座の
リンクにマウスがのったときの表示をいろいろ変えてみる で
詳しく書かれています。是非 参考にしてみてください。
|
