今週のおさらい/第23号/初心者のためのホームページ作り

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

今週のおさらいバックナンバーはこちらから
第１号   第２号   第３号   第４号   第５号   第６号   第７号   第８号   第９号   第10号
 第11号   第12号   第13号   第14号   第15号   第16号   第17号   第18号   第19号   第20号
 第21号   第22号   目次

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

今週＜第23号＞マガジンのおさらい

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

ここで言うスクリプトとは 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

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

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

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

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

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

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

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

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