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

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

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

この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。

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

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

 今週の課題 ■ 初心者が犯すミスとタブー

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

◆XHTML〜XMLへの道
現在のHTMLのバージョンは、4.01です。次期バージョンは不明ですが、既に W3C
では、XHTML、および XMLが勧告されリリースされています。

 もし、読者の皆さんの中で、将来(あるいは現在) Web制作の道を歩むとする
のなら、必ず XMLにたどり着くはずです。これからのビジネスにおいては、重要
なキーワードです。
 現在のインターネットを支える大きなポイントは、ビジネスにあります。マー
ケットプレイスの発展で、企業にとってインターネットは仕事場でもあります。
 企業同士の取引や決済、企画・設計段階での打ち合わせや進行状況など、ネッ
トビジネスは日毎に増大しています。もしかしたら、皆さんの中には、知らずし
て XMLに遭遇したかもしれません。とくに大手のオンラインショッピングでは必
須のマークアップ言語になっています。

 今、皆さんが学んでいるHTMLは決して無駄ではありません。正しく記述された
HTMLは XHTMLにすぐにでも移行できますし、XHTMLはXMLへの架け橋になります。
(実際、XHTMLは XML文書として分類されています。)
 そのような意味でも、しっかりと現在のHTML4.01を習得することは、決して無
駄ではありません。

 今回はその観点から、初心者がつい犯してしまうミスなどを取り上げて、何故
ダメなのか、どうしたらよいのかを解説します。

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

◆インラインレベル要素の扱い

 <body>
  <img src="images.hana.png" width="250" height="150" alt="花の絵">
  <br>花の絵を掲載しました。
 </body>

  このHTMLには間違いがあります。お分かりになりますか?

テキストや画像などを直接 body要素内に記述することが出来ません。
 これらインラインレベル要素は必ずブロックレベル要素内に記述することが望
まれています。下段にインラインレベル要素とブロックレベル要素の一覧があり
ますので、参考までにご覧ください。

 正しくは、
 <body>
 <div>
  <img src="images.hana.png" width="250" height="150" alt="花の絵">
  <br>花の絵を掲載しました。
  </div>
 </body>

 最も多い誤りは強制改行を、直接 body要素に記述してしまうことです。

  <body>
  <table border="1" cellpadding="3" cellspacing="0" summary="Sample1">
  <tr><td>     テーブルの記述 その1  </td></tr>
 </table>

  <br><br>

  <table border="1" cellpadding="3" cellspacing="0" summary="Sample2">
  <tr><td>     テーブルの記述 その2  </td></tr>
 </table>
 <br><br>
  </body>

 2つのテーブルの間に強制改行を入れていますが、これも誤りです。br要素は
 インラインレベル要素なので、直接、body要素内には記述できません。
 テーブル間に空白を持たせたくて書く場合が多いようですが、スタイルシート
 で設定することが望まれます。

  例: table { margin-bottom: 1em }
 テーブルの下側に1文字分の空白を持たせる CSS構文です。

 HTMLは文書構造を示すマークアップ言語です。構造とは、ここが見出し、ここ
は段落、ここでは表組、そしてここはリスト、という具合に全体の文書の骨組み
(組版)を構成するためにあります。
 ブロックレベル要素とは、まさに見出しや段落、表組やリストなどを構成する
ためにあります。そのために、いきなりインラインレベル要素を記述するのは、
文書構造の意味から、文法違反となります。
 つまり、インラインレベル要素では、構造上それが何であるのかが理解できま
せん。何故なら、インラインとは、文字列と同格に表わされるもので、構造を示
す要素ではないからです。

 組版と言うのは、例えば新聞を想像してください。必ず見出しがあります。
  場合によって大見出しの次に小見出しがあります。見出しの次には、段落が
 あって、そこに記事が書かれています。テレビ番組表はテーブル(表組)に例
 えられます。
  それぞれが、1つの「枠」でくくられて表現しています。この「枠」がブロ
 ックレベル要素と考えてください。それぞれの枠の中にはコンテンツが記載さ
 れているわけです。

  HTMLは、ブラウザに「枠」を設けます。つまり「組版」を構成します。
 これが文書構造といわれるものです。正しい文書構造で書き上げられたHTMLは
 ブラウザが理解しやすく、また、そのソースコードは人間が見ても理解できる
 ものです。表示速度にも違いがあるのではないかといわれています。
  幸か不幸か、ブラウザは誤った文書構造でも表示してくれますので、作成者
 には誤りと気づかないのも要因となって、文法違反がなくなりません。

  将来の XHTM、XMLを目指すうえでも、必ず文書構造については頭の中に叩き
 込んでおきましょう。

 インラインレベル要素一覧
 a、abbr、acronym、applet、b、basefont、bdo、big、br、button、cite、
 code、dfn、em、font、i、iframe、img、input、kbd、label、map、object、
 q、s、samp、select、small、span、strike、strong、sub、sup、textarea、
 tt、u、var

 ブロックレベル要素一覧
 address、blockquote、center、dir、div、dl、fieldset、frameset、form、
 h1〜h6、hr、isindex、menu、noframes、ol、p、pre、table、ul

 ※ins要素、del要素はブロックレベル、インラインレベルの両方で使えます。

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

◆段落の作法
HTMLで記述する段落は、p要素を使います。
 p要素 ブロックレベル 終了タグは省略可能ですが、なるべく記述します。
     子要素として持てるのは、インラインレベル要素のみ。
     (語源はパラグラフ、段落の意)

 一般の視覚系ブラウザでは、改行されて表示しますが、空行ができる場合が多
いようです。これは空行というより、マージン(要素の外の余白)と考えた方が
いいでしょう。
  (古い参考書には、改行+改行とデタラメが書いてありました。)
 p要素の前後に空白を持って表示するのは、ブラウザがそのように勝手に表示す
るだけで、本来の仕様ではありません。と、いうより前後に空行を持つというこ
とは定義されていません。

 この要素内には、別のブロックレベル要素を記述することができません。
 例えば、

 <p>
  <table>  〜  </table>
  </p>

  段落を意味するブロックレベル要素内に、新たにブロックレベル要素を入れる
こと自体が矛盾です。

 ブロックレベル要素とは、1つのかたまりを意味し、通常は改行されて表示し
ます。ですので、

 <p> 〜 <p> 〜 </p> 〜 </p>  という記述も矛盾です。

 もし、段落要素が終了タグで閉じられていない場合、次のブロックレベル要素
の始まりの際、</p> がブラウザによって自動的に補完されます。HTMLでは、<p>
の終了タグの省略が許されていますが、できることなら、段落の終わりに終了タ
グを書く習慣をつけましょう。
(参考までに XHTMLでは省略が許されていません。)

  なお、汎用ブロックレベル要素 <div>や、テーブル内のデータセル領域には、
他のブロックレベル要素を配置することが可能です。 div要素は入れ子として使
うことも出来ます。
 また、インラインレベル要素の中にはブロックレベル要素は配置できませんの
で、注意してください。

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

◆改行と段落
下記のHTML文を参照してください。

<body>
<div>
文章の区切りを表わす場合、強制終了を連発するのはよくありません。
<br><br>
この場合には p要素を使うようにしましょう。
<br><br>
</div>
</body>

 br要素は、強制的に改行させます。<br><br>というように、2つ連続して記述
すると、改行が2つになり、1つの空行ができます。しかし、これはあくまで改
行であって段落ではありません。見た目には段落のように見えますが、決して段
落ではありません。
 このように記述したがる大きな要因として、段落要素 pを使うと前後に1行分
の空白ができるので、それを避ける意味で使われているケースが多いようです。

  br  強制改行要素 インラインレベル
   属性なし

 ■ p要素をスタイル付けする
 実は私は p要素を好んで <br> よりも多く使っています。
  ページや段落によっては前後の空白をなくしたり、上の部分の空白をなくした
 り、その逆だったりします。

 例として、
 p.samp1 { margin: 0px; text-indent: 1em }
 前後の空白をなくし、1文字分だけ字下げ(インデント)を設定。

 p.samp2 { margin-top: 0px }
 上側に表示される余白をなくす設定。

  p.samp3 { margin-bottom: 0px }
 下に表示される余白をなくす設定。

  p.samp4 { margin: 0px }
 上下の余白を一切なくしてしまう設定。

 これだけあれば、ほとんどの文章を <br> なしで記述することができます。
 いろいろとお試しください。

◆センタリングと強制改行
テキスト(文字列)をセンタリングさせる場合には、バランスの注意が必要です。
例えば、強制改行を用いてセンタリングさせる場合、ユーザの環境によっては、
おかしな表示になったりします。

 コンテンツをセンタリングさせる記述
 HTML: <center> (非推奨)
     <div align="center"> (非推奨)
 CSS : div { text-align: center }

  <div align="center">
  テキストをセンタリングさせる場合の注意として、<br>
  全体のバランスが必要です。
  </div>

  これを表示すると、

         テキストをセンタリングさせる場合の注意として、
               全体のバランスが必要です。

 このように、テキストすべてがセンタリングされ、文字が、何となく読みづら
いものです。また、強制改行を入れなくても、自動改行されたテキストが、やは
り、センタリングされておかしな具合になります。
 テキストは、重要な情報を持っているかも知れません。その大切な情報をわざ
と読みづらくする必要はありません。

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

◆ホットリンクの扱い
アンカーの記述にテキストではなく画像を用いる場合には、必ず alt属性を使っ
て代替のテキストを用意しましょう。

 <a href="index.html"><img src="home.gif" width="100" height="50"></a>

 この場合、視覚障害者が利用する非視覚系ブラウザでは、画像を見ることがで
きず、リンクすることができません。代替のテキストがあれば、音声ブラウザが
発声できます。アクセシビリティを確保する上でも、代替テキストは必須です。

 <img src="home.gif" width="100" height="50" alt="ホームへ戻ります。">

 また、よく見られるホットリンクにこのような記述があります。

 ご注文は <a href="order.html">こちら</a> です。

 リンクのテキストに、「ここ」とか、「こちら」、「クリック」などでは、そ
れがどのような趣旨のページなのかよく分かりません。できる限り簡潔にまとめ
たタイトルなどを書き込むよう心がけましょう。

  ご注文は <a href="order.html">ご注文受付フォームのページ</a> で承って
 おります。

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

◆blockquote要素について

 blockquote ブロックレベル要素(引用の内容を表わす)終了タグ必須

 この要素を字下げした段落という誤った使い方が目につきます。見栄えのよさ
だけで利用するのは、文法的に間違いです。
 この要素は、引用した文章の内容を記述する場合にのみ使い、非視覚系ブラウ
ザは、この要素に囲まれたテキストが、引用されたものであることを伝えます。
 なお、引用先として、cite属性を用います。

 例:
 <blockquote cite="http://www.scollabo.com/banban/lectur/color.html">
  Web Safe Colorを用いることにより、どのような環境にも同じ色を表示させる
 ことが期待できます。できるだけ、216色のセーフカラーを使いましょう。
 </blockquote>

 一般的な視覚系ブラウザでは、左右に余白があり、全体が字下げされて表示さ
れます。
 もし、段落としてこのような表示を望む場合には、 div要素をスタイルシート
で設定すれば同じように表示させることは、造作のないことです。

 例:
 div { margin-left: 3em; margin-right: 3em }
  左右に3文字分の余白を設定し、まるで blockquoteを使ったように見えます。
 ただし、このように見せる必然性があるかどうかは、別問題ですが・・

 短い引用文として、q 要素を用います。ブラウザによっては、引用符がつけら
れる場合もあるようです。

 q要素 インラインレベル要素(短い引用に利用)終了タグ必須

 例、
 <div>
 実体参照一覧は、W3Cの <q>W3C Character entity references in HTML 4</q>
 を参考に作成しました。
  </div>

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

◆タグはウェルフォームドにする
「well-formed」とは、開始タグと終了タグの対応を正しくすると言うことです。

 間違った記述
 <p><em>入れ子</p>は、<span>正しく書きます</em></span>

  正しい記述
 <p><em>入れ子</em>は、<span>正しく書きます</span></p>

 長文になると忘れがちです。必ず開始タグと終了タグの対応を適切に書かなけ
ればなりません。特に、入れ子(ネスティング)が続く場合には、十分に注意が
必要です。

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

◆スペースはタブキーを使う
講座では、HTML文にスペースや改行を多用して読者の皆さんに読みやすくするよ
うにしています。また、本来、ブラウザではスペースを無視しなければならない
のですが、対応が遅れています。
 例えば、

_<table cellpadding="0" cellspacing="0" summary="Sample">
↑に全角の空白スペースがあります。するとブラウザはテキストと判断してしま
います。半角スペースでさえ、テキストと判断する場合もあります。
 テーブルの場合には、このスペースがレイアウトを大きく崩してしまうことも
あります。
 スペースを入れたい場合には、タブキーを使うようにしましょう。

◆改行位置でのレイアウト(ブラウザが起こす問題点)
下記のHTMLを参照してください。テーブルの構文です。

 <tr>
  <td>
 これはサンプルです。
 </td>

  <td>
 これもサンプルです。
  </td>

  次のHTML文も参照してください。

 <tr><td>これはサンプルです。</td>
      <td>これもサンプルです。</td></tr>

 2つともまったく同じ構文ですが、改行位置が違います。前者の場合、データ
セル間に不用意なスペースを発生する場合があります。タブキーを使っても改行
の位置をずらすだけで違う表示になってしまうのはブラウザに問題がありますが
できることなら、下段の構文を利用しましょう。

 もう1つ、HTML文を参照してください。

 <a href="index.html">
  ホームへ戻る
 </a>

 <a href="index.html">ホームへ戻る</a>

  リンクを表示させるアンカーの構文ですが、改行して記述すると、ブラウザに
よっては、- という変な記号が表示される場合があります。これもブラウザのバ
グですが、防止するために改行なしで記述することをお奨めします。
 特にNetscapeに注意を。その昔、私はこれでずいぶん悩んだことがあります。
これは決して初心者のミスではありません、念のため。

 ただし、
 <a 
  href="index.html">ホームへ戻る</a>

 この場合の改行は、タグが閉じられていないので、問題がないようです。

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

◆要素と属性間にはスペースを
「スペースを入れるな」と言っても要素と属性の間には必ずスペースで区切らな
ければなりません。

 <ahref="index.html">ホームへ戻る</a>

  これでは、ブラウザが困惑します。要素のない属性の扱いになってしまいます。
また、ahref という属性は当然存在しません。

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

◆ダブルコート(引用符)の閉じ忘れ
読者の質問で一番多かったのが、「要素が表示されない」というものでした。

 <img src="images/hana.png width="200" height="150" alt="花の絵>

 上記HTMLには2つのダブルコートの閉じ忘れがあります。すると何も表示され
ません。理由はもうお分かりでしょう。
 正しくは、
 <img src="images/hana.png" width="200" height="150" alt="花の絵">

 どのような構文であっても、引用符が閉じられていない場合には、致命的なエ
ラーとなりますので、十分に注意を払ってください。
 サーバのログには、「Not found document」というエラータが付与されます。

 属性値に引用符が省略できる場合の条件は、数字(0〜9)英字(a〜z、A〜Z)
に限られています。アンダーバーや、テキスト、%などを用いる場合には、必ず
引用符で囲まなければなりません。意外と忘れがちです。

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

◆画像の扱い
ページを彩る意味でも画像は欠かせないかもしれません。ちりばめた画像とその
説明文などは、訪れるユーザを楽しませてくれます。
 ですが、画像はとても重いのです。重いとは、容量が大きいという意味で、ダ
ウンロードするまでに時間がたくさん必要です。「動画」になると、もっと重く
なってしまいます。

 例えば1つのページに画像を5枚用意した場合、1枚の画像の容量が10KBだと
仮定した時には、既に50KBにもなってしまいます。ブロードバンド環境であれば
問題のない容量でも、ダイヤルアップでは少々辛いものがあります。

 今から8年位前、当時のインターネット環境は今と比較すれば劣悪な状況でし
た。まだ、ISDNも特殊な通信手段で、個人が加入することが稀だったものです。
当時は、ブラウザの設定で、画像を表示しない方法が一般的でした。なにしろ、
通信速度は FAX並みの14.4Kbpsだったのです。50KBとなるとダウンロードが完了
するまで1分を超えていたのです。
 さすがに現在では、14.4Kbpsはなくなったようですが、28.8Kbpsは依然として
利用されています。画像の容量の大きさには十分な注意が必要です。

 ローカル(自分のパソコン)で、自分のホームページを作って閲覧する場合に
は、表示速度はあまり意識することがありません。ハードディスクのスピードは
通信環境よりも早いので、すばやく表示してくれます。
 しかし、サーバにアップロードしたら、画像の表示が遅くなってしまう場合が
あります。それほど画像とは重いものなのです。あまり意味のない画像は遠慮し
たいものです。

 画像の形式にも注意しましょう。写真画像を GIF形式で保存すると容量が飛躍
的に増えてしまいます。
 例えば、本誌が教材として提供している「桜」の画像は JPEG形式(約8KB)で
すが、これを 256色の GIF形式に変換すると40KBに跳ね上がります。24ビットの
PNG形式ならば何と90KBまで増えてしまいます。写真画像は、必ず JPEG形式を選
びましょう。

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

◆ブラウザ独自仕様の利用
HTML2.0 の時代に、ソフトメーカーは魅力的な仕様をブラウザに搭載し、競争に
打ち勝つ戦略に出ました。W3Cが混乱していた時代でもありました。
 制作者たちは、その魅力的な要素や属性に飛びつき、一気に Webは華やかにな
りました。

 しかし、独自仕様とは、同じ環境でないと再現されないのです。例えば、MSIE
の代表的な独自タグとして、「marquee マーキー」という文字を左右に動かすも
のがあり、他のブラウザでは一切無視されます。
 同じように Netscape Navigator で搭載された「blink ブリンク」という文字
を点滅させるものは、やはり他のブラウザでは一切無視されます。時には、独自
仕様のタグで囲まれたコンテンツそのものが表示されないケースもあり得ます。
  ある意味で、ブラウザの独自仕様とは、特定のメーカーが勝手に拡張したタグ
であるということです。

 これらは、HTML規格外とされているもので、アクセシビリティの点からも疑問
視されており、いずれ廃止されるだろうと観測されています。
 (実際、Netscapeでは Version 6.0より独自仕様は一切廃止になりました。)

 ホームページは世界に向けて発信できるメディアであり、私たちが唯一持つこ
とのできる情報発信の手段です。そこには、本当に不特定多数がいるわけで、様
々な環境があるということを知っておくべきでしょう。
 独自仕様とは、そういった不特定多数のユーザの方を困らせる結果を生む場合
が多々あります。できるだけ独自仕様を使わないページ設計を心がけましょう。

 参考URL:HTML規格外仕様
 http://www.scollabo.com/banban/dep/dep_03.html

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

◆スクリプトの扱い
代表的なスクリプトに、JavaScriptがあることは広く知られています。本誌でも
不定期ながら、JavaScript講座を解説しています。

 ただし、JavaScriptが利用できない環境があります。非視覚系ブラウザでは、
ほとんどスクリプトが実行できません。また、視覚系ブラウザでもスクリプトを
オフにしている方も少なくありません。

 JavaScriptは、ページに動きを与え、時にはインタラクティブ(双方向)に動
作します。昨今のページ作成には欠かせないくらいまで普及しています。そのこ
とには何の異論もありません。

 ただし、サイトのトップページで、いきなりスクリプトを動かすのは少々危険
です。トップページ(index.html)は、サイトの顔です。ある意味では、トップ
ページこそサイトの印象や性格を与える極めて大切なページです。
 JavaScriptを貼り付けたトップページに、その環境にないユーザが訪れた場合
ユーザは残念な思いで他のページに移動してしまいます。
 もし、そのページがそうしたユーザにとって有益な情報を提供していたとした
ら、それこそ悲劇というものでしょう。実際に視覚障害者への情報を提供してい
るサイトのトップページでJavaScriptが貼り付けられていたのは驚愕でした。

 何度も申しますように、JavaScriptそのものは悪者ではありません。大切なこ
とは使い方です。素晴らしいスクリプトの世界を別のページで表示させることを
強くお奨めします。そのページにはスクリプトが使われていることを予告するこ
とも情報として大切なことでしょう。これは Flashムービーのあつかいについて
も同様のことがいえます。大切なのは、スクリプトを利用する必然性です。

 スクリプトを使ったページには、スクリプトが実行できない環境のユーザのこ
とも考慮して、noscript要素を使い代替のテキストや代替ページに誘導すること
も大切なことです。アクセシビリティとは、訪れる利用者に「使いやすい」環境
を提供することです。

 <noscript>
  <p>残念ながらあなたの環境では、スクリプトが実行できません。
  こちらのページへお進みください。
  <a href="another.html">代替テキストページ</a></p>
  </noscript>

 スクリプトが実行できるブラウザでは、この noscript で囲まれた範囲は表示
されることはありません。

 また、MSIEで利用される JScript(JavaScriptの亜種)では、非常に分かりに
くく、一見すると JScriptだとは思えません。しかし、他のブラウザで表示させ
ると動作が止まってしまうばかりか、エラー・メッセージが大量に出ることもあ
り、最悪の場合、ブラウザがコケてしまい、強制終了させられるハメに陥ります。
そのようなページには、二度と訪れることはないでしょう。
 そのためにも、制作者側で複数のブラウザを所有し、それぞれの動作確認をす
ることは義務でもありますし、重要なことです。

 ステータスバーにメッセージを流すスクリプトはやめましょう。うざったいだ
けです。環境によっては非常に重くなったりして、迷惑です。メッセージはテキ
ストエリアで表示させるのがネチケットです。
 ブラウザのステータスバーは通信状況やファイル名などの情報を表示します。

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

◆音声や音楽の扱い
トップページでいきなり音楽や音声が出てきたら、訪れた人は一様に困惑します。
会社で、こっそりインターネットにアクセスしている時に、突然音楽が鳴り出し
たら本当に困ってしまいます。事実、それで解雇された人もいるのです。
 特に最近はMIDIデータを扱うページが増えており、自分で作曲したものを掲載
する傾向が高まっています。

 音楽や音声を用いることは一向に構わないのですが、やはりユーザの操作によ
って再生や停止できるようにすべきでしょう。いきなりはパニックに陥ります。
せっかく一生懸命作った楽曲でも聴いてくれないと寂しいものですが、メニュー
形式にして、クリックしたら演奏するような、スマートな方法もあります。

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

◆文書やファイルの整理
1つのフォルダ(ディレクトリ)の中に、HTML文書や画像ファイル、あるいは外
部スタイルシートなどを一緒に保存していると、なかなか整理できません。

    (整理前) / はディレクトリ(フォルダ)を表わしています。
  /homepage
      ┗━━━━   index.html、next.html、sample.html、prev.html
                   sub.index.html、test.css、hana.png、title.gif

 フォルダの中にフォルダを作って、それぞれカテゴリ別に分けておくと後々便
利です。特に修正や更新などの作業時には、使っていくうちに重宝するはずです。
 HTML文書同士のリンク切れや、画像の表示のトラブルなどに、素早く対応でき
ます。
 ただし、リンクを張る場合や画像やスタイルシートを参照する場合に、パスの
記述に注意してください。(パスについては、第9号をお読みください。)

  (整理後)
     /Homepage
      ┣━━━━  index.html(Top Page)
      ┃
      ┣━━━━  /sample(カテゴリ1)
      ┃            ┃
      ┃            ┗━━ sample.html
      ┃
      ┣━━━━  /next(カテゴリ2)
      ┃            ┃
      ┃            ┗━━ next.html、prev.html、sub.html
      ┃
      ┣━━━━  /image(画像)
      ┃            ┃
      ┃            ┗━━ hana.png、title.gif
      ┃
      ┗━━━━  /css(スタイルシート)
                    ┃
                    ┗━━ test.css

 修正や更新作業する前には、必ずバックアップしておきましょう。大切なファ
イルを誤って削除してしまったり、間違えて編集した場合には、バックアップし
てあるとあわてずにすみます。また、不幸にしてハードディスクが壊れてしまっ
た場合にも、他もメディアにバックアップしておくと助かります。
(私に経験から、ハードディスクは必ず壊れるものと確信しています。)

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

◆無料レンタルサーバーの落とし穴
ホームページを公開するためには Webサーバが必要なことはこの講座でも解説し
ました。プロバイダのホームページ・サービスを利用する場合には、あまり問題
ありませんが、無料で利用できるレンタルサーバの場合には、気をつけなければ
ならないことが多々あります。
(プロバイダによっては、広告を表示するところもあります。)

 サーバの CGIが吐き出すHTMLには、誤った記述が見受けられます。非推奨とさ
れる要素や属性が使われるのは我慢できても、文法のミスはいただけません。
 また、非常識と思えるくらいの重い画像を貼り付ける場合もあります。いくら
無料とはいえ、我慢すべきではありません。サーバの管理者に連絡して、改善を
要求しましょう。

 無料レンタルサーバの場合、更新を3ヶ月以上していないと、勝手にページが
削除されてしまうところもあります。いくら何でも3ヶ月はあまりにも短く、す
ぐに時間が経ってしまいます。ホームページの維持は簡単ではありません。

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

◆著作権の問題
ホームページの著作権は、サーバにファイル転送して「公開」した時点で発生し
ます。著作の断り書きがあってもなくても、法律の上では立派に著作物として扱わ
れます。
 問題となるのは、フリーで配布している「素材」などに絡む著作権の有無です。
フリーであると言うことは「無料」であることに他ならないわけで、決して素材
そのものの著作権が放棄されるわけではありません。
 配布されている「素材」をどのように利用できるかは、素材を提供しているサ
イトで、その注意点を必ず読むようにしましょう。
 ホームページに使えるとしたら、その出展先を明記することはネチケットとし
て必要な処置でしょう。

 また、他人が作った「画像」や「文章」をそっくりそのままダウンロードして
自分のページに再利用することは、当然法律に触れることになり、決して後味の
良いものではありません。メールマガジンも然りです。

 素材を改変すると自分の著作物になるか、という側面もあります。昔アメリカ
で、ある有名なロック歌手の曲の1部を(わずか1小節)デジタル録音し、さら
に他の音を加えてミックスした音を Webサイトで公開したところ、法外な著作権
料を請求されたという実話があります。

 素材の1部を使うことであっても、素材そのものには著作権があります。自ら
創造するのではなく、改変するという行為は素材の著作を侵すことになります。
 どこまでが改変でどこまでが創造なのかは、国の法律の判断基準によって、ま
たは裁判官の個別の判断によって大きく分かれることでしょう。

 著作権が適用されない場合とは、教育関係、とりわけ学校などの授業の一環と
して取り上げられる素材には、著作権が及ばない場合があります。ただし、利用
する素材の所有者の承諾が必要なのはいうまでもありません。
 また、ソフトウェアなどをコピーして授業に使うことは、明らかな法律違反で
す。昨今、そのような事件が起き、それなりの賠償金が請求されたことは、周知
の通りです。これは個人でも同じことです。ソフトウェアは必ずお金を出して買
いましょう。
 Webには、優れたフリーソフトがたくさんありますので、それらを利用するの
も方法です。

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

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

(今週のおさらい)
http://www.scollabo.com/banban/magazine/backnm_031.html
  (今週はあまり見るべきものはありません、念のため)

 次回は、背景の応用と、HTMLで使う汎用属性について詳しく解説します。

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

質問・ご意見ははこちらまで→ 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

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

<えでぃた〜ず・るーむ>
話題の東京・大手町にある、新らしい「丸ビル」に行ってきました。先日、新聞
では2002年ヒット商品番付の東の横綱にランクされたと報道していました。
 残念ながら仕事だったので、のんびり見物できなかったのですが、人の多さに
はビックリしました。平日の昼間に何でこんなに人がいっぱいいるのだろうと不
思議でした。

 企業における基幹システムを入れ替えるというプロジェクトには、非常に大き
な労苦があります。各部署のブリーフィングやワークショップ調整など、システ
ムを組み立てる準備だけでも膨大な作業が強いられます。

 部署のエゴはシステム開発者にプレッシャーをかけ、オペレーターからは使い
勝手の図を書かれて、「これでやってくれ」と脅かしてきます。おまけに経営者
からは「コストをかけるな」という至上命令が飛んできます。
 いざ出来上がると「使いにくい!」「めんどくさい!」などと言われる始末。
「冗談じゃねーよ、お前たちの言ったとおりに作ったんだ!」という言葉を飲み
込んで、また改造の作業に入ります。素人に何を言っても始まりません。

 そして、また基幹システムの設計の時期がやってきました。開発グループの残
業時間が飛躍的の伸びる日々がしばらく続きそうです。
 (実際よそから見て、あまりいい商売ではありません、ホント。)

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

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

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



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