初心者のためのホームページ作り 第23号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第10号
第11号  第12号  第13号  第14号  第15号  第16号  第17号  第18号  第19号  第20号
第21号  第22号  目次

プレーンテキスト版バックナンバー

今週<第23号>マガジンのおさらい

                  毎週金曜日配信 What's New 2002/10/18
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題 ■ アンカーについて・・JavaScript vs CSS

リンクを画像とスクリプトで組み合わせる

ここで言うスクリプトとは JavaScript を指します。画像とイベント属性を使って、アンカーに用意された画像を変化させます。

画像の変化はイベント属性 onMouseOver 及び onMoueOut属性を使って、マウスが画像に触れたら異なる画像を示します。

<img src="images/nav_final_01.gif" 
onMouseover="this.src='images/nav_final_01-02.gif'" 
onMouseout="this.src='images/nav_final_01.gif'" 
width="121" height="39" alt="サンプル">

このスクリプトの実行結果は次の通りです。

サンプル

このスクリプトを改造し、なおかつ画像をあらかじめHTMLに読み込ませてリンクを形成します。画像をあらかじめ読み込ませる方法は、HTMLで body要素に onLoad属性を使います。これはすべての画像が読み込みを完了すると発生するイベント属性です。

CSSで同じ表現を設定する

スタイルシートでもまったく同じ表現が可能です。これはアンカーの擬似クラスを使う表現で、要素との相関関係で記述します。

p a:link { background-color: #063; color: #fff; font-weight: bold; 
           font-size: 28px; text-decoration: none; padding: 5px 30px }

p a:visited { background-color: #063; color: #fff; font-weight: bold; 
              font-size: 28px; text-decoration: none; padding: 5px 30px }

p a:hover  { background-color: #ff0; color: #000; font-weight: bold; 
             font-size: 28px; text-decoration: none; padding: 5px 30px }

これは p要素内のアンカー要素内のみに適用するスタイルシートです。このスタイルシートの実行結果は下記の通りです。実際にトップページにリンクしています。

Home

スクリプトとスタイルシートでまったく同じ表現が可能であるということがお分かりになったと思います。なお、メールマガジンのHTML実行結果はこちらです。

JavaScript vs CSS

JavaScript vs CSS

サンプルを見てお分かりの通り、3つのアンカーが表示されました。JavaScript、CSS、そしてテキスト形式のそれぞれのアンカー(リンク)。

JavaScriptはHTMLに動きを表現する上で大変魅力的なスクリプトです。しかしながら、ユーザ環境を配慮するとスクリプトだけでは、ある意味で危険です。もし、スクリプトが実行されていない環境ではリンクすることができません。非視覚系ブラウザの多くがスクリプトには対応していません。

スクリプトを記述する場合には、代替となるテキストも併記することはユーザ環境を配慮する優しいページとなります。決してスクリプトを否定するわけではありませんが、スクリプトを実行させる環境とマナーを、制作者側で考える必要があります。

一方、スタイルシートでは、ユーザ環境を意識する必要がありません。何故なら、スタイルシートが実行されない環境でも、見栄えの特性は犠牲になりますが、記述内容はちゃんと表示されるからです。

次週では、JavaScript講座を予定していますが、Webページにスクリプトを実行させる意味と意義を制作者側で把握する必要があります。「何故スクリプトなのか?」、単にスクリプトを並べても魅力的なサイトになるわけではありません。スクリプトを使わなくても優れたページはたくさんあります。スクリプトがなければ表現ができないということもありません。

これら点を認識した上で、ページを訪れる利用者に配慮した工夫がなされているのであれば、スクリプトをHTML上で実行させることに、何の異論もありません。アクセシビリティの上でも歓迎されることでしょう。



Copyright(C) 2002-2003 banban@scollabo.com