製作 よしとも
このサイトのメインです。おそらく、かなりの人がここに書かれていることを知らずにHTMLを書いていると思います。
2000/07/10現在、某テレビ局のサイトでは真っ白い壁紙を使っています。そのため、 パワーのない私のパソコンでは壁紙が表示されていくのがよくわかります。ソースを見てみると、 背景色の指定はあります。それも壁紙と同じ色で。
既にこのサイトで紹介したように、背景色を壁紙に近い色にすることは悪いことではありません。しかし、むやみに壁紙を使うのもどうかと思います。HTML で背景色を指定する場合、半角文字11文字ですみます。UNICODE などの特殊な場合を除き、これは11バイトです。壁紙を使う場合はどう考えてももっと多くの情報量になってしまいます。現在の通信環境はまだまだ充分とは言えません。少しでもデータは軽くするべきなのですから、のっぺりした壁紙を使うよりは、背景色を指定するだけにするべきでしょう。
リンクを開いたとき、いきなり新しくウィンドウが開いた経験のある方は多いと思います。ほとんどの場合は A エレメントの target 属性を使用していると思いますが、場合によってはスクリプトを使用していることもあるでしょう。どちらにしても、そのような処理をするときにはあらかじめ断っておくべきでしょう。新しいウィンドウを開くことを嫌う人もいるのです。
まず前提です。最初に開いているウィンドウを A としましょう。このウィンドウが開いているページには別ウィンドウで開くようになっているリンクがあります。このリンクによって開かれるウィンドウを B とします。
さて、B で表示されているページに A で開くリンクがついていることがあります。これがただのリンクであった場合、明らかにこれは不自然です。その理由を説明しましょう。
通常、target 属性なしのリンクの場合、そのまま同じウィンドウに読み込まれます。ということは、すでに開いているページを、わざわざ別のウィンドウで開くことになります。このウィンドウを C としましょう。そのままでは、A、または B が無駄になってしまいます。また、target 属性により、Aで開くようにしてあったとしましょう。その場合は、C は無駄になってしまいます。もちろん、さらに新しく開くなどというのは、ほとんど無駄以外の何者でもないでしょう（まさかと思う方もいると思いますが、実際にあるから困るのです）。
このように、新しいウィンドウで開いた場合は、元に戻るリンクは必要ありません。見終わったなら閉じてしまえばいいのです。せいぜい、そのウィンドウを閉じる命令を埋め込んでおくくらいにするようにしましょう。
最近では背景に壁紙として画像ファイルを使用することは当たり前になってきました。しかし、逆に背景色に注意することがなく、デフォルトのままになっているページを多く見かけます。
画像ファイルはサイズが大きいため、すでにページの読み込みが始まっているときでもまだ壁紙が表示されていないことが多々あります。すると、当然のように背景の色はデフォルトが使われます。暗い色の壁紙を使用していて、テキストの色を明るく白っぽい色にしてあったとしましょう。とくに指定していない場合、デフォルトでは背景色には主に白や灰色が使われます。このとき壁紙が読みこまれるまでは、テキストを読むことは決して楽なことではないはずです。環境によっては、選択されたテキストは反転表示されるため、全て選択して読んだ経験があるのではないでしょうか。
では、背景色を暗い色に設定してあったらどうでしょうか。今度はきちんと読むことが出来るはずです。
今度はテキストが暗い色である場合を考えてみましょう。先ほどの場合で考えれば問題ないように思えます。ところが、デフォルトの背景色は多くの場合変更が可能です。もしかすると黒を設定してあるのかもしれません。
このことから、背景色をデフォルトのままにしておくことはよくないと言えます。同時に、背景・テキスト・リンク・訪問済みリンク・選択状態のリンクの中で、どれか一つでも設定をした場合は残りのすべても設定することが必要なこともわかるはずです。
最近は HTML の解説書、特に入門レベルのものが大量に出回っていますが、その多くは H1 エレメントを"文字を大きくするタグ"と説明しているでしょう。その次に大きくするのは H2、さらに H3・H4 と続き、一番小さいのが H6 と言うのがほとんどです。場合によってはなぜか H7 があったりもします。
これは大きな間違いで、このエレメントは物理的なものではありません。本当は見出しとそのレベルをあらわす論理的なエレメントです。実際の表示はブラウザに任されているため、文字を大きくするために使用するのはとんでもない間違いと言えます。
HTML にバージョンがあることはどれぐらいの人が知っているでしょうか。先ほどの H1 に比べればかなり多いと思います。HTML の本のいくつかには"HTML3.2" といった単語が書かれていると思います。この数字の部分がバージョンです。
では、今使用されているバージョン（使用できるバージョン）がわかっているという人はどうでしょうか。3.2 があるのだから 1.0 や 2.0 があると思うかもしれません。2.0 は確かにあります。しかし、1.0 はありません。すでに破棄されてしまったため存在しないバージョンとなっています。2001年6月30日現在の最新バージョンは4.01です。と言うことは 3.0 もあるという話しになりますが、3.0 は 3.2 に置きかえられたため存在しません。同じく、4.0 も 4.01 に置き換わりました。
ここまでの話をまとめると今のところ使用できる HTML のバージョンは 2.0・3.2・4.01 の3つと言うことになります。
4.01 の場合はさらに 3つのバージョンにわかれます。
まずは 4.01 Strict。これは 4.01 の本当の姿とでも言えるもので、今までのバージョンとの互換性を保とうなどとは考えられてはいない、厳格（strict）なバージョンです。物理的エレメントはそのほとんどがスタイルシートによって表現することが定められ、規格からは排除されています。
そして 4.01 Transitional。これは過去の規格との互換性を維持したままの 4.01 で、物理的エレメントの使用が許可されています。
最後に 4.01 Frameset。これは先ほどの Transitional にフレームの定義を追加したものです。フレーム部分を構成するファイルはこのバージョンでなければなりません。
ちなみに、このページのファイルは 4.01 Strict です。
なお、手元の資料によるとそれぞれのバージョンの交付された時期は次のようになっています。
バージョンの話はここまでにして、DOCTYPE の解説に入ります。
DOCTYPE はファイルの一行目に記述し、自分自身が HTML であることとそのバージョンをあらわします。この部分がなかった場合、そのファイルがどう言う SGML アプリケーションなのか。また、どのバージョンなのか判断することは出来ません。たとえ出来たとしてもかなり不便でしょう。このような理由から、DOCTYPE は必須項目として指定されています。
それぞれのバージョンの DOCTYPE は次のようになります。
2.0 は 2000年6月に廃止となりました。また、SGML ベースのものは 4.01 が最後となり、名称が XHTML となり、バージョンナンバーも 1.0 にリセットされました。1.0 は HTML 4.01 を再定義したもので、ほとんど変わりません。3つに分かれている点も同じです。1.1 は定義内容のモジュール化が行われ、将来廃止するとされたものが実際に廃止されました。最も基本的なモジュールだけで構成された、XHTML Basic というものもあります。
それぞれの DOCTYPE は次のようになります。
世の中にはさまざまな文字コードが使用されています。よって、HTML ファイルもさまざまな文字コードで書かれることになります。ということは、ブラウザは多くの文字コードに対応する必要性があります。
最近のブラウザは自動的に文字コードを判断することが出来るようになっていますが、100％正しく判断できるとは言えません。誤って判断してしまうと、いわゆる文字化けをおこします。文字化けを起こした場合は、ユーザが正しい文字コードを指定しなければなりません。これでは不便ですし、すべてのユーザが文字コードを判断できるとも限りません。
そこで、HTML では META エレメントによって文字コードを指定しておく仕組みがあります。これは、本来サーバが送るべき文字コードの情報を補うためのものです。サーバから情報が送られるのが正しい処理なのですが、ほとんどの場合行っていません。よって、これは非常用の手段です。
日本語表示ができる主な文字コードは JIS・Shift-JIS・EUC の3つです。それぞれの指定の仕方は次の通りです。
この記述は HEAD エレメントの中でなければならなく、この記述の前には ASCII コードとして見とめられる範囲の文字（半角の英数といくつかの記号）しか書くことが出来ません。よって、TITLE エレメントよりも前、出来れば（出来ないことはないと思いますが）HEAD エレメントの中でも一番最初に記述することをお勧めします。
なお、そのほかの文字コードの表記に付いては次のページを参照してください。
http://www.iana.org/assignments/character-sets
最後に、文字コードに関して、実際に私が体験したトラブルを紹介しましょう。
最近、タイトルがつけられていないページを多く見かけます。検索サイトの検索結果でも"タイトルなし"と表示されていることも多くなりました。タイトルはただの飾りではありません。検索対照のデータであり、閲覧する側にとっては自分の位置を認識する手段でもあります。重要な項目であり、HTML の必須項目です。DOCTYPE も必須項目ですが、これはエレメントではありません。これに対して、TITLE エレメントは唯一の必須エレメントです。それほど重要なものなのです。
フレームで使用するファイルにもタイトルは必要です。最近では検索エンジンなどから簡単に単独のページとしてアクセスできます。このような場合、タイトルがないページではどこのサイトに所属しているのかわかりません。勝手に誰かがリンクを張った場合でも、タイトルから他のサイトだと判断できるでしょう。
画像ファイルの表示に使用する IMG エレメントには、代替テキストを指定する alt 属性があります。これは、エラーなどで画像ファイルが表示されなかった場合や、画像の表示が出来ないブラウザでの表示で、代用テキストとして使用されるものです。ファイルの説明として使用されていることがありますが、これは間違った使い方です。自分のサイトで正しく使用されているかどうか確かめるには、画像を表示させないようにしてみればわかります。その状態ですべてのページの表示の意味がわかれば問題ないと考えていいでしょう。まったく先に勧めないようだったら、あなたのサイトは画像ファイルが読みこめなければ困るということです。
読めないことなんてありえないとか、画像が表示できないブラウザなんかあるわけないと思ったらそれは間違いです。サーバ側の設定ミスで、画像ファイルのアクセスが出来なくなることはありえないことではありません。表示が遅くなるからと言う理由で、あえて画像ファイルの表示をしないようにしている人もいます。また、Lynx と言うブラウザは画像ファイルを表示せず、すべてテキストによる表示になります。そして、私自身は使用したことはありませんが、視覚障害者のための音声で読み上げるものや、点字による表示を行うといったブラウザは、当然画像ファイルの表示は出来ません。これは、言いきれることではありませんが、恐らく代替テキストを使用するでしょう。
ここまで読んで、早速修正しようと思った方、そのときには代用として間違っていないか注意してください。代用と言うことはいっしょに表示するのではなく、置き換えて表示されるのです。タイトルロゴの代替テキストに間違っても alt="ロゴマーク" などと指定してはいけません。 その場合あなたのページにはロゴの変わりに "ロゴマーク" と格好悪く表示されるのです。ここはページのタイトルを指定しておいたほうが格好いいはずですよね。
画像の説明を表示したい場合は title 属性を使います。alt 属性もある場合は、title 属性のほうが優先されます。
もうひとつ IMG エレメントに関することをお話しましょう。
IMG エレメントには表示する画像ファイルの幅を指定する width、同じく高さを指定する height と言う属性がありますが、この2つを使って縮小表示や拡大表示をしているページがあります。前者の場合はイラスト系のサイトでサムネイルとして使用していることが多いようです。重要なことは、縮小したからと言って表示が速くなるわけではありません。結局読み込まなければならないデータの量は変わらないのです。見た目から言えば、逆に表示が遅くなったように見えるでしょう。こんなに小さいのに、どうしてこんなに時間がかかるんだろう。表示されるのを待っている人は、恐らくそう思うはずです。無理やり拡大縮小をするため、表示も決して綺麗とは言えません。
この属性の本当の使い方は、あらかじめ表示する部分を予約しておいて、早い段階でレイアウトを決めておくことだと私は思います。このことによって表示が速く感じられ、見る側にとっては不快感の軽減になるはずです。最近の HTML エディタは自動でこの属性を指定してくれるので、指定してないページは減りました。しかし、中には手作業で書いているのか指定してないページや、最初に話した拡大縮小を行っているページがあります。
指定するサイズは正しいサイズにして、サムネイルはグラフィックソフトできちんと作りましょう。見る側にやさしくなることで、もしかするとアクセスが増えるかもしれませんよ。
ほとんどのサイトのトップページには次のような記述があります。
このページは○○以上でご覧ください
HTML の出来た理由を考えるとこれは大間違いです。本来 HTML は出来るだけ多くの環境で論文などを見ることが出来るようにと出来たものです。限定などしてはいけないのです。近年多くの企業によって拡張されてしまった HTML では、製作者の想定した表示が出来る環境が限定されてしまうのは仕方のないことでしょう。しかし、HTML はデザインのための言語ではないのですから、限定しなくてもいいとは思いませんか？"限定"ではなく、"推薦"なら構わないと私は考えています。作ったからにはちゃんと見てもらいたいと思うのは、多分誰だって同じです。私だってそう思います。でも、さらに思うのはその内容を読んで欲しいと言うことです。背景の色が違っていたっていい。自分の環境よりも大きいフォントで表示されたって構わない。でも、内容は読んで欲しい。あなたはそう思いませんか？このページのデザインがシンプルなのはデザインが面倒だからではありません。出来るだけ多くのクリエーターに読んで欲しいからなのです。
HTML は、まず最初に内容なのです。
HTML の入門書を見ると、時々 NOFRAME と言うエレメントが紹介されていることがあります。実は、これはあるエレメントを間違えて紹介してしまっているのです。そのエレメントは NOFRAMES です。最後の"S"が抜けていたのです。間違っている上にブラウザがちゃんとしたエレメントとして認識してしまうため、間違っていることに気がつかずに使ってしまうっている人が以外と多いようです。
あなたのウェブサイトはどうですか？
リンクを張るときにディレクトリを指定するとき、一番最後はスラッシュにしなければならないことをご存知ですか？ディレクトリなのにスラッシュをつけないと、サーバはそれがファイルだと判断して探します。普通は見つからないでしょう。すると、ファイルではなくディレクトリかもしれないと推測し、今度はその名前のディレクトリを探します。今度は見つかるでしょう。
ここまで読んで、指定しなくても見つかるじゃないかと思うかもしれません。でも、ここでよく考えてみてください。きちんと指定しておけばやらなくて済むことをやっています。最初に行うファイルを探すことは無駄なことなのです。無駄どころか、サーバの負荷を高めることになってしまいます。
この負荷はサーバ全体から見ればわずかかもしれません。でも、短時間でも多くのアクセスを処理しなければならないサーバにとっては、かなり大きな負荷になってしまいます。1秒間にこのようなことが50回あるかもしれません。もしかしたら100回あるかもしれません。そうなったらわずかな負荷などとは言っていられなくなります。そうなれば、あなたのサイトは表示の遅い（重い）サイトになってしまうでしょう。まさに自業自得です。それどころか、同じサーバにあるほかの人のサイトも重くなってしまうのですから、他人を巻き込むことになってしまいます。
負荷を減らすためにも、ディレクトリの最後はスラッシュで終わることを忘れないようにお願いします。
これから話すことは、恐らくほとんどの方は実感がないかもしれません。でも、一部の方にとってはとても重要なことだとわかるでしょう。
世の中には HTML ファイルのヘッダ部分にある LINK エレメントの情報から、作者当ての電子メールを出せるブラウザがあります。私が確認した限りでは、複数の OS で使用できる Lynx はこの機能を持っています。このブラウザは UNIX 系統の OS で多く使われているようです。Windows 版がありましたので興味半分で使用してみたのですが、確かにそのような機能がありました。特定のキーを押すことで機能が呼び出されます。
このブラウザはマウスではなく、すべてキーボードからの入力で操作します。そのため、ページ内の mailto リンクからよりも、LINKエレメントの情報を元にしたほうが便利なのです。では、記述の仕方を説明しましょう。
ヘッダ部分に次のように指定します。
<LINK rev="made" href="mailto:メールアドレス">
たったこれだけのことです。そんなに難しいことではないでしょう？ファイル数が多くて大変と言うなら、テキストの置換を行うプログラムを使用するといいでしょう。ヘッダエレメントの終了タグである </HEAD> を次のような文字列に置換すれば簡単です。
<LINK rev="made" href="mailto:メールアドレス"> </HEAD>
当然ながら、指定するメールアドレスは管理（メンテナンス）をしている人にするべきでしょう。全然関わっていない人のアドレスでは、受け取ったほうも対応の使用がありません。と言っても、ページの感想なども同じアドレスに送られてしまうので、ケースバイケースかもしれません。
イメージマップがどのようなものかはご存知でしょう。簡単に言えば、画像ファイルに複数のリンクを設定する技術ですが、これには大きな欠点があります。それは、画像ファイルが表示されないと身動きが取れないことです。リンク自体は使用できても、その先に何があるのかわからなくては困ってしまいます。恐らく、あなたもファイルが読みこまれるのを仕方なく待っていたことがあるでしょう。時間があるときはそれでもいいでしょう。しかし、急いでいるときなどに遭遇するといらいらしてしまいますね。回線速度が遅い環境では特にそうでしょう。
この問題はちょっとした努力で解決できます。通常の、テキストによるリンクを併用するのです。これによって、画像ファイルがまったく読み込まれていない状態でも、先ほど紹介した Lynx のようなブラウザでも問題なく先に進むことが出来ます。
以外と間違って覚えているのがコメントの入れ方です。SGML におけるコメントは次のようなものを言います。
"<!" と ">"の間で、"--" と "--"で挟まれた範囲
この定義から考えると、-- で挟まれていない部分はコメントではないことになります。ただし、HTML ではコメントには--を含むことは出来ません。
ある個人サイトで、-- がないコメントを見かけました。ブラウザはコメントとして扱っていましたが、他のブラウザではしっかりと見えているかもしれません。
コメントが見えてしまっては、何のためのコメントなのかわかりませんね。
SGML では、これを注釈宣言と言うそうです。
開始タグのほとんどには属性をつけることが出来ます（一部必須）。この属性の値は、ほとんどの場合ダブルクォーテーションで囲まなければなりません。HTML 3.2 までは次の条件を満たせば囲む必要はありません。
HTML 4.0からは、アンダースコア（"_"）とコロン(":")も使用可能になっています。
XHTML からは XML ベースとなったため、無条件に括らなくてはならなくなりました。括らないとエラーになります。
文字参照と言うのは、SGML における特殊な文字をあらわす方法です。< を意味する < や、> を意味する > はご存知でしょう。このほかにも、& を意味する & や、ダブルクォーテーションを意味する " があります。これらはすべて大文字小文字を区別され、最後のセミコロンも含みます。ブラウザでは表示されるからと言って、間違った記述をするべきではありません。
ここで紹介した4つ以外にも文字参照はあります。しかし、対応状況が一定でないため、余り使わないほうがよいでしょう。その代わり、この4つに関しては問題なく使えますので、基本的にはきちんと置き換えてください。URL として使用するときも同様です。
基本的にと言ったのは、使用している個所が明らかに特殊な意味が発生するとは思えない場所であった場合、普通に文字として解釈されるからです。例えば、開始タグの中でダブルクォーテーションを使用すると、それは属性値を囲んでいると考えられます。しかし、タグの外、つまりエレメントとして使用された場合、それは属性値とは無関係であり、ただの文字として扱われます。ただし、< と > をこの順番で使用する場合は、いつでも文字参照を使用するべきでしょう。囲まれた部分を含む全体を未定義のエレメントとして扱われ、
無視されてしまいまうかもしれません。とは言うものの、用心して常に文字参照にすると安全です。
<P> は段落の区切りを意味するタグと言う解説が多いですが、
省略が可能なだけで P エレメントの終了タグである "</P>" は存在します。本当は "<P>" で段落が始まって、"</P>" で終わります。
この P エレメントなど、多くの場合前後に空行が入るエレメントはブロックレベルと呼ばれ、このエレメントを P エレメントに含むことは出来ません。よって、終了タグを省略した場合、その段落はブロックレベルのエレメントが現れた時点で終了します。このことを知らずに、段落の中に水平線を表す HR エレメントなどを書いてしまっているページをよく見かけます。
一度、自分のサイトの HTML ファイルをチェックしてみては？恐らく多くの方は間違いがあることに気がつくと思います。
NOFRAMES エレメントはフレームに対応していないブラウザのための内容を書くための場所です。ここになにも書かないままにしておくと、古いブラウザで訪れた方にはただの空白のページしか表示されてしまうため、ほとんどの場合は先に進むことが出来ません。フレーム表示の内容を丸ごと書く必要はありません。最低でもフレームページであることを、出来ればフレームなしでも見れるように作り、そちらのページへのリンクを用意しましょう。
なお、NOFRAMES エレメントは FRAMESET エレメント、及び NOFRAMES エレメント以外のブロックレベルのエレメントに書くことが可能で、BODY エレメントのみを含むことが出来ます。
製作 よしとも