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

                  毎週金曜日配信 What's New 2002/10/18
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第23号>

             banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのHPを作ることが出来ます。

 時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら、ご遠慮なくメールください。

 当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。

 今週の課題 ■ アンカーについて・・JavaScript vs CSS

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆今回は、アンカーの表示についてスタイルシートを使った表現と、スクリプト
を使った表現の違いについて詳しく説明します。
 なお、外部スクリプトとそれに使う画像を使用します。これらのファイルは、
当サイトにて教材として提供していますので、お手数ですがダウンロードして入
手してください。

■ファイルのダウンロード(教材の提供)
 本誌サイトに今回の講座で使用する JavaScriptや画像ファイルなどを一括でダ
ウンロードできるようにしました。ダウンロードファイルには今後使用する画像
なども含まれています。講座を進める上で、是非あなたのパソコンにファイルを
ダウンロードしておいてください。
 なお、ファイルは圧縮されておりますが、多くがダブルクリックすることによ
り解凍されます。圧縮ファイルは各プラットフォーム別に用意しましたので、あ
なたの環境にあったファイルをお選びください。
 各ファイルは非常に小さい容量ですので、数秒でダウンロード可能なものとな
っています。

 パス(オブジェクトを指定する URL)の関係がありますので、あなたがいつも
この講座で使用しているフォルダのなかに、「images」という名のフォルダを作
って移動しておいてください。
 すでにそのフォルダがある場合は、単純に移動だけしておいてください。

ダウンロード先URL http://www.scollabo.com/banban/daf/material.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆アンカーを画像とスクリプトで組み合わせる
他の文書へリンクするアンカーについては、本誌第9号で詳しく説明しています
ので参照してください。
 画像を用いてアンカーを記述する手法は、多くのサイトでも取り入られており
ます。今回はスクリプトとの組み合わせを使って、ユーザがマウスを操作によっ
て画像を入れ替える手法をお伝えします。

 画像を入れ替えるイベントハンドラに、onMousover、onMousout属性があります。
例えば、下記のHTMLでは画像にマウスが触れたときに異なる画像を表示させるも
のです。

   <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="サンプル"> <!-- 1行で記述します -->

 このイベントハンドラを使い、かつ画像をあらかじめHTMLに読み込むスクリプ
トを用いてアンカーの画像に触れたときに、画像が変化する表現をつけます。

◆スタイルシートによるアンカーの表現
 スタイルシートだけで同様の効果を表現する方法を用います。要素の相関関係
でスタイルが変化する手法を用います。

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

 これは、p要素内のみで a要素をスタイル付けする記述法で、他の a要素には
影響を及ぼしません。アンカーは擬似クラス要素で、未訪問、訪問済み、そして
アンカーにマウスを触れるときの表現を持つものです。

 今回はスクリプトを外部に置く方法を採用します。必ず、教材を入手してくだ
さい。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

さっそくHTMLを作ります。テキストエディタ(SimpleText、メモ帳など)を起動
して下記のHTMLをタイプしてください。かなりの長文ですのでじっくりと入力し
てください。
 スタイルシートを使いますので、コロン「:」、セミコロン「;」を間違わず
に入力してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Script vs CSS</title>
<script type="text/javascript" src="images/banban.js"></script>
<style type="text/css">
<!--
div   { margin: 10px 50px; 
        color: #009; 
        font-weight: bold; 
        font-size: large }

h1    { color: #800080 }

table { margin-bottom: 1em }

td.cs { text-align: center }

img   { border-style: none }

p     { margin: 0px }

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 }
-->
</style>
</head>

<body onLoad="preloadImages();">
<div>
<h1>JavaScript vs CSS</h1>
JavaScript

<table cellspacing="0" cellpadding="0" summary="JavaScriptによるリンク">
<tr><td><a href="#" 
onmouseover=
"changeImages('nav_final_01', 'images/nav_final_01-02.gif');return true;" 
onmouseout=
"changeImages('nav_final_01', 'images/nav_final_01.gif'); return true;" >
<img src="images/nav_final_01.gif" width="121" height="39" alt="Home" 
name="nav_final_01"></a></td>

<td><a href="#" 
onmouseover=
"changeImages('nav_final_02', 'images/nav_final_02-04.gif');return true;" 
onmouseout=
"changeImages('nav_final_02', 'images/nav_final_02.gif'); return true;" >
<img src="images/nav_final_02.gif" width="121" height="39" alt="目次" 
name="nav_final_02"></a></td>

<td><a href="#" onmouseover=
"changeImages('nav_final_03', 'images/nav_final_03-06.gif');return true;" 
onmouseout=
"changeImages('nav_final_03', 'images/nav_final_03.gif'); return true;" >
<img src="images/nav_final_03.gif" width="121" height="39" alt="Prev" 
name="nav_final_03"></a></td>

<td><a href="#" onmouseover=
"changeImages('nav_final_04', 'images/nav_final_04-08.gif');return true;" 
onmouseout=
"changeImages('nav_final_04', 'images/nav_final_04.gif'); return true;" >
<img src="images/nav_final_04.gif" width="121" height="39" alt="Next" 
name="nav_final_04"></a></td>

<td><a href="#" onmouseover=
"changeImages('nav_final_05', 'images/nav_final_05-10.gif');return true;" 
onmouseout=
"changeImages('nav_final_05', 'images/nav_final_05.gif'); return true;" >
<img src="images/nav_final_05.gif" width="121" height="39" alt="E-Mail" 
name="nav_final_05"></a></td></tr>
</table>

Cascading Style Sheet

<table cellspacing="0" cellpadding="0" summary="CSSによるリンク">
<tr><td class="cs"><p><a href="#">Home</a></p></td>
    <td class="cs"><p><a href="#">Index</a></p></td>
    <td class="cs"><p><a href="#">Back</a></p></td>
    <td class="cs"><p><a href="#">Next</a></p></td>
    <td class="cs"><p><a href="#">Mail</a></p></td></tr>
</table>

<!-- テキストで記述するリンク -->
<a href="#">Home</a> / <a href="#">Index</a> / <a href="#">Back</a> / 
 <a href="#">Next</a> / <a href="#">Mail</a>
</div>

</body>
</html>

入力後、タイプミスやダブルコーテーションの閉じ忘れなどがないか確認してく
ださい。

 入力が終わりましたらHTML文書として保存します。そのためには必ず拡張子を
つけて保存します。ここでは、test_27.html としておきます。「.html」を忘れ
ずに保存してください。なお、保存の際の文書名は任意の名前をつけていただい
ても差し支えありません。

 保存できたら、ブラウザで確認してください。
(外部スクリプトを正しく読み込ませることができない場合は、エラーのダイヤ
ログ・ボックスが表示される場合があります。)

  サンプルHTML実行結果URL
  http://www.scollabo.com/banban/magazine/sample/mmsample_033.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 DTD(文書型宣言)の記述で、ここではHTML4.01Strictを採用しています。
 HTMLを作成する上で、どのバージョンの文法を使用するかを明示的に宣言しな
 ければなりません。
  また、宣言したバージョンの文法を使わなくてはなりません。例えば、上記
 のStrict型を宣言したのに関わらず、非推奨の要素・属性を使うことは許され
 ません。どうしても非推奨要素・属性を使う場合には
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> と記述
  する必要があります。

<script type="text/javascript" src="images/banban_01.js"></script>
 外部スクリプトを読み込ませる記述です。「images」フォルダの中にあるスク
 リプト「banban.js」という JavaScriptを指定してHTMLに読み込みます。
 今回は本誌からの教材を使用しています。

  今までスクリプトの記述には、
 <script language="JavaScript"> と記述していますが、W3Cでは非推奨扱いと
 なっています。(HTML4/4.01の仕様)
  大きな理由として、JavaScript、JavaScript1.1、JavaScript1.2、VBScript
 などのような識別子は標準のものではないとして、HTML4.01の仕様では非推奨
 となっています。
   type="text/javascript" という記述で私の独自の検証では、ほとんどのブ
 ラウザで(MSIE3.0以前、Netscape3.0以前を除いて)動作を確認しましたので
 このような記述法をお奨めします。本誌サイト上の「JavaScript」でもすべて
 この記述を使用しています。

<style type="text/css"> 〜 </style>
 スタイルシートをヘッダに書き込む場合には必ず記述します。また、実際にス
 タイルシートを記述する前にコメントタグ、<!-- と、コメントアウトと --> 
 も併記します。これは、スタイルシートに対応していないブラウザへの安全策
 となります。

div { margin: 10px 50px; color: #009; font-weight: bold; 
       font-size: large }
 div要素は段落などに使われる汎用ブロックレベル要素です。この中にすべての
 コンテンツを配しました。
 上下の余白に10ピクセル、左右の余白に50ピクセル設け、この中で記述され
 るテキストを largeサイズにして、文字色を濃い青色にしました。

h1 { color: #800080 }
 第1見出し要素の文字色を紫色にしました。

table { margin-bottom: 1em }
 テーブル全体の下側に1文字分の余白を設定しました。

td.cs { text-align: center }
 データセルのクラス属性 cs ではテキストの位置揃えをセル内の中央に配しま
 した。この属性を持ったセル内に適用されます。

img { border-style: none }
 画像をリンクとしますので、リンクで用いられる枠線を非表示としました。
 この設定がないと、画像に不意な青色などの枠線が表示されます。

p { margin: 0px }
 段落に使われる要素のすべての余白を非表示としました。

p a:link { background-color: #063; color: #fff; font-weight: bold; 
           font-size: 28px; text-decoration: none; padding: 5px 30px }
  ( p と a の間は半角のスペースです。)
  要素の相関関係で設定したスタイルシートです。これは p要素内の a要素のみ
 に適用されます。他の a要素には設定されません。
  リンクの訪問前の背景色を濃い緑色、文字色を白色で強調し、大きさは28ピ
 クセルに設定しました。また、文字には下線を非表示にし、あわせてデータ内
 の余白を上下に5ピクセル、左右に30ピクセル取りました。

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 }
 これも要素の相関関係で反映するスタイルシートです。リンクにマウスが移動
 した時に背景色が黄色、文字色が黒色に変化するもので、その他は上記とまっ
 たく同じです。

<body onLoad="preloadImages();">
 スクリプトに記載されている画像のすべてが読み込みが完了した時に発生する
 イベントハンドラ属性をbody要素に記述しました。ここでは読み込みが完了し
 てからすべてのコンテンツが表示されます。

<table cellspacing="0" cellpadding="0" summary="JavaScriptによるリンク">
 テーブルのセル内の余白を一切排除する記述です。 summary属性は、本誌13号
 で解説した、非視覚系ブラウザへの配慮となります。

<tr><td><a href="#" 
onmouseover=
"changeImages('nav_final_01', 'images/nav_final_01-02.gif');return true;" 
onmouseout=
"changeImages('nav_final_01', 'images/nav_final_01.gif'); return true;" >
<img src="images/nav_final_01.gif" width="121" height="39" alt="Home" 
name="nav_final_01"></td>
 テーブルのセル内にイベントハンドラを持たせました。マウスがこの画像の上
 を通過した時に、新たな画像が表示されるスクリプトから構成されています。
  なお、リンク <a href="#"> としたのは、リンクするページを設定していな
  いので、あえてこのように表記しましたが、他のページにリンクさせる場合は
 そのパス(URL)を記述し使用してください。ここではクリックしてもどこに
 もリンクしません。
 (もし、表示が上手くいかないようでしたら、1行で記述してください。)

<td class="cs"><p><a href="#">Home</a></p></td>
 データセルに、スタイルシートのクラス名、csを呼び出しています。また、リ
 ンクは要素の相関関係で設定したスタイルシートを呼び出しています。面白い
 ことにスタイルシートでも上記のスクリプトと同じような表現になります。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆スクリプトとスタイルシートの対比
上記HTMLを実行してお分かりの通り、スクリプトを使わなくてもスタイルシート
だけ同じような表現が可能になっています。
 今回採用したスクリプトでは、外部スクリプトが 0.8KB、使用画像が10枚で、
計3.99KB、合計約4KB余りと非常に小さいものを利用しました。
 しかしながら、スタイルシートではその半分もありません。無理にスクリプト
を作らなくても簡単に同じような表現になるのなら、スタイルシートの方がはる
かに作りやすいものですし、ユーザのリソースを無駄にすることもありません。

 また、ユーザの環境でスクリプトが実行できない場合でもスタイルシートは安
全ですし、万一ユーザ側でスタイルシートをオフにしてもリンクは表示されます
ので、これまた安全です。

 スクリプトだけでリンクを表示する手法は、そのような理由で大変危険です。
スクリプトを否定するわけではありませんが、万一の場合に備えて、テキストで
リンクを併記するように心がけましょう。スクリプト使用時のマナーです。

◆外部スクリプトを採用した理由
今回のように外部にスクリプトを置いてHTMLに読み込ませた理由には2つありま
す。
 まず第1に、スクリプトの入力が大変なので教材として採用したことです。ス
クリプトはプログラムなので、万が一のトラブルがあっては大変です。また、タ
イプミスを誘発しやすいのもスクリプトの特徴でもあります。

 第2に、スクリプトを参照していただければ分かるともいます。この中には、
実体記号の「&」の文字があります。ブラウザによってはこの記号を実体文字と
判断して表示してしまう危険性があります。また不等号記号「<」や「>」などは
タグに使用されるものでもあるわけで、これも危険です。

 将来の(今も)XHTMLでは、スタイルシート、スクリプトは外部に置くことが
決まっています。
 なお、JavaScriptについては、次号より入門編を予定しています。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆補足・・外部スクリプトは以下のような記述になっています。目的は用意され
ている画像をあらかじめ読み込むものです。

function newImage(arg) {
  if (document.images) {
    rslt=new Image();
    rslt.src=arg;
    return rslt;
  }
}

function changeImages() {
  if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments[i]].src=changeImages.arguments[i+1];
    }
  }
}

var preloadFlag=false;
function preloadImages() {
  if (document.images) {
    nav_final_01002=newImage("images/nav_final_01-02.gif");
    nav_final_02004=newImage("images/nav_final_02-04.gif");
    nav_final_03006=newImage("images/nav_final_03-06.gif");
    nav_final_04008=newImage("images/nav_final_04-08.gif");
    nav_final_05010=newImage("images/nav_final_05-10.gif");
    preloadFlag=true;
   }
}

 このスクリプト内には、コメントタグ、<!-- や //--> はありません。HTML内
で記述する場合には必要になります。なお、このスクリプトを自由に改造して使
用しても問題ありません。ただし、画像はご自分で作ってください。
 このスクリプトは、古いブラウザ(MSIE3.0以前、Netscape3.0以前)での動作
は保障していません。

 スクリプトに関しての詳しい説明は初心者には難しいので、第24号から始まる
「JavaScript講座」を進める中で解説します。
 ここではスクリプトとスタイルシートの対比を見てもらうために、あえてこの
スクリプトを使用しました。


今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
WebページはHTML分の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。

(今週のおさらい)
http://www.scollabo.com/banban/magazine/backnm_023.html

次回は、JavaScript入門としての講座を始めていきます。なお、JavaScript講座
に関しては不定期の掲載となりますので、ご了承ください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
 ただし、平日の昼間は会社勤めなので、返事が遅れることがあります。ご了承
ください。

発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

誤字・脱字・変換ミス・表現欠乏などには平にご容赦願います。なお、マガジン
のすべての記述に誤りや重大なスペルミスがある場合、叱咤と罵声と共に私まで
突きつけていただくと幸いに思います。

バックナンバー こちらで公開しています。
プレーンテキスト  http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい  http://www.scollabo.com/banban/magazine/
アーカイブ    http://www.scollabo.com/banban/daf/archive.html
講座教材     http://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196

配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

<えでぃた〜ず・るーむ>
熱いコーヒーがうまい季節になりました。私にとってコーヒーは Web作成や原稿
を書いているときに、なくてはならない麻薬みたいなもので、つい飲みすぎてし
まう傾向があります。また、コーヒーを飲むときのタバコがまたうまい!これま
た吸い過ぎてしまいます。
 最近の体調の悪さは、そんなことも関係しているのかなと少しだけ反省。そん
なわけで、少しでも体にいいことしようと、自転車通勤を始めました。最初の日
は、ひどく疲れましたが、慣れてくると爽快な気持ちになってきます。やっぱり
人間、健康が一番ですね。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
 なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。

      Copyright(C) 2002  www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■



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