其の46
Javascriptの扱い方は慎重に
JavaScriptを利用しているWebサイトは多く存在する。よく使われているのが、ナビゲーションの上にカーソルを当てると変化するロールオーバーなどだ。
このロールオーバーはオーサリングソフトなどで簡単に設定できるが、ソース量が膨大になってしまったり、JavaScriptを使用していることでユーザーの環境によっては見られないこともある【1】。
【1】オーサリングソフトでロールオーバーの設定をしたソース。ものすごい量だということがわかる
CSSでも、このロールオーバーの設定ができる。JavaScriptと違い、ソースもシンプルでユーザーの環境も選ばない【2】。
もちろん、JavaScriptもWebデザインに欠かせない技術だ。だがその前に、その技術が本当に必要なのかを、ユーザの視点に立って考える必要がある。その上で、ブラウザなどの環境ごとにページを振り分けるなど、使い方を考えれば非常に便利なものである。
また、HTML内に記述するのではなく、別途JSファイルを作ってHTMLからリンクすることも忘れないようにしたい。
【2】CSSを用いたロールオーバーのサンプルとソース例（下）。Javascriptに比べるとソースもシンプルで、ユーザーの環境も選ばない
.menu div {
float: left;
margin: 0 1px 0 0;
}
.menu a {
display: block;
width: 88px;
height: 61px;
padding: 15px 0px 0px 0px;
background-image: url(img/01.gif);
background-repeat: no-repeat;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-align: center;
}
.menu a:link {
color: #D180C5;
}
.menu a:visited {
color: #D180C5;
}
.menu a:hover {
background-image: url(img/02.gif);
color: #8280D1;
}
お作法一覧へ
