いいページをつくりましょう

ページづくりは、とても簡単になりました。主なワープロソフトには、HTML 形式で保存する機能が付き、ページの中身とちょっとしたセンスがあれば、誰でも Web に自分のページが開ける時代です。高校のページも毎月50校くらいのペースで増えています。
でも、手軽だからこそ、いいページをつくりましょう。

1 誰もが見られるページを目指すなら

1-1 HTML をチェックする

1-1-1 複数の UA (ブラウザ)で見てみよう

UA を指定したページの場合は別ですが、最低でも現行の Netscape Navigator と Internet Explorer でページを確認しましょう。表示のしかたは UA によって異なりますが、正しい HTML ならどんな UA でも読めます。
Netscape Navigator3.01 には 表示(V) → 文書のソース(S) でソース表示にすると、誤ったタグを青の点滅で示す機能があって便利です (NN4.X をインストールするとこの機能は効かなくなります)。誤っていても UA で表示できることがありますが、これは余計なサービスでしょう。

さらにいろいろな UA を手に入れて、拡張タグに対応していない UA でも表示させてみると良いでしょう。NN や MSIE の以前のヴァージョンや、 frame, table, center などをサポートしていない UA を使っている人は、意外にいます。

1-1-2 HTML チェッカーでチェックする

Another HTML-lint などを使って HTML の厳密なチェックができます。最善を尽くしたいというならこの方法はきわめて有効です。またこうしたサイトには HTML に関するリソースやリンクがたくさんあります。HTML についての良い窓口でもあります。

1-1-3 わかるタイトルをつける

HTML に自動的に変換するソフトなどでページをつくると、とんでもないタイトルがつくことがあります。そのままで公開すると「HTML 文書」とか「タイトル」といった名前のページが、誰かの「ブックマーク」や「お気に入り」に並びます。
また、「運動部」とか「ホームページ」のような、他の人にわからないタイトルも困ります。検索エンジンに拾ってもらえませんよ。

1-2 画像には alt オプションをつける

1-2-1 画像がなくてもわかるようにする

画像には alt オプションをつけ、画像が表示されなくてもページの意味がわかるようにしましょう。最新の UA を使っていても巨大な画像の読み込みをじっと待つ人はあまりいません。みんな忙しいのです。
また、alt オプションが入っていれば、視覚障害者でもテキストの読みとり機であなたのページを開くことができます。

1-2-2 画像を表示しない UA での見え方

Netscape Navigator や Internet Explorer の場合「画像の読み込みをしない」設定にすると画像を表示しない UA (テキストブラウザ) での見え方がある程度予測できます。また MSIE の場合、altの内容を、画像にマウスポインタを重ねることで見ることができます。NN もそうならないかなあ、と書いていたら、NN4.01 からできるようになりました。

1-2-3 画像は本当に必要ですか

画像でなくても済む情報はできるだけテキストにしましょう。印刷物をスキャナで読み込んでもページはできますが、安易につくったページには二度とアクセスしてもらえません。

1-3 すべてのページにつけましょう

1-3-1 トップページへのリンク

Web では、いつでもページの表紙から順番に見てもらえるわけではありません。世界高等学校総合文化祭のように、ページの中身へのリンクガイドもあります。「トップページにアクセスカウンタをつけてるんだから勝手に途中から見るなよ」といっても、書籍とは構造が違うのです。だからこそ、どのページからでもトップページに行けるようにして、ページを見に来た人が迷子にならないようにしましょう。

ついでに、メールなどにページのアドレスを書くときは、省略せずに正しく書きましょう。http://www.michinoku.ne.jp/~tanohata のように最後の / を省略したりすると、余計な通信が必要になり、ページの表示も遅くなります。最近の Netscape のページで、最後の / を省略したリンクを多用しているのは困ったことです。 Microsoft のマネをして半角カナまで使ってるし。あと、全角英文字でアドレスを書いても、まったく役に立ちません。

もう一つついでに、トップページのことをホームページと呼ぶのは本当は間違いです。ページなら何でもホームページというのは完全に違ってます。 HP という表記はヒューレットパッカード社を指します。

1-3-2 メールアドレス

どこまでページを繰っても、メールアドレスのないサイトは困ります。良いページには反応が返ってくるもの。いつでも、どのページからでもメールが送れるように、アドレスをつけましょう。アドレスのあるページは責任を持った内容に見え、好感が持てます。

また、HEAD の中に、
<link rev="made" href="mailto:tz@michinoku.ne.jp">
と書くのも、マニアックな方法です。これは UA には表示されませんが「お、HTML を勉強してるな」と Lynx の方に好評です。

こういうタグの例示などを、NN でもドラッグ一発でコピーできるようにならないかなあ。MSIE のように。と書いておいたら、NN4.X からこれもできるようになりました。

ついでに、主なタグや URI を単語登録しておくと、メモ帳などのエディターを使って、スピーディーに HTML が書けるようになります。秀丸だと、マクロも使えるのでもっと便利ですね。

1-4 フレーム・テーブルに気をつける

1-4-1 フレーム (frame)

フレームは、コンピュータのスペックによって表示する速度が決まります。 4つも5つもフレームを使うと、メモリーの負担が大きくなり、フリーズの原因にもなります。
また、フレームをサポートしていない UA のために、必ず noframes オプションを付けるか、フレームレスのページを別に用意して、きちんと内容が伝わるようにしましょう。なお、noframes に「最新の UA をダウンロードしてからご覧ください」と書いて済ませているページがありますが、田野畑村では、ISDN がなかったこともあって、NN や MSIE をダウンロードするのに 3～4時間かかりました。その後もう一度アクセスする気にはなりませんでした。「プラグイン」にも、同じ思いをします。

1-4-2 テーブル (table)

ページ全体をテーブルにすると、 UA によっては、全体を読み込むまで表示されません。また、 UA によって実際の表示が大きく異なります。さらに、テーブルをサポートしていない UA では、表示が全く異なります。ぜひ、いろいろな UA で表示させてチェックしましょう。

2 最新のタグを駆使したクールなページを目指すなら

2-1 拡張タグを使ったページ

「Internet Explorer 3.02 以上」とか「Netscape Navigator 3.01 以上でご覧下さい」というようなページがあります。 UA が新しいタグ (いわゆる MSIE 拡張や Netscape 拡張など) に対応するたび新たな表現方法を追いかけて、実験的なページに改良したくなります。こうした方向も、Web の将来の姿の一つでしょうから、やるからには徹底して新しいタグを追い続け、指定以外の UA には表示すらさせないくらいのページにしましょう。

でも、例えば MSIE でアクセスしたページに、NN で出直せと言われると、ちょっとカチンときませんか? もっとスマートにやりましょう。
なお、拡張タグをひとつも使っていないようなページに「MSIE 専用」とか「NN 専用」と書いてはいけません。あなた自身が疑われます。

2-2 JavaScript で専用ページに誘導する

JavaScript に対応していない UA には効きませんが、そのような UA は、この際無視して良いでしょう。

Internet Explorer 専用ページに誘導する JavaScript (body に記述)

Netscape Navigator 専用ページに誘導する JavaScript (body に記述)

3 田野畑高校ページのテンプレート

3-1 ページ作成のテンプレート

3-2 田野畑高校のホームページ

サンプルのついでに、田野畑高校メディアセンター(情報処理教室)のマシンで UA を起こしたときに現れるページ (これが本当の意味のホームページ) もどうぞ。ただし、あなたのマシンとはリンクの設定などが違いますので「戻る」で帰ってきて下さい。

4 このページの趣旨～田野畑高校の反省～

あなたは、このページをどんな UA で見ていますか? Netscape Navigator でしょうか、Internet Exolorer でしょうか。どんな接続形態ですか? バリバリの専用回線でしょうか。それとも田野畑高校のような、アナログのダイアルアップ接続でしょうか。

田野畑高校が最初にページを開いたのは、1996年の7月でした。MS Word で作ってあった生徒会誌を Internet Assistant for Word (今は MS Word に標準装備されています) で HTML に変換し、いくつかの画像を張り付けただけのものでした。 UA も雑誌の付録 CD-ROM に入っていた Internet Explorer 2.0 しか持っておらず、そこでの表示が世界中の人たちが見るものと同じだと思い込んでいました。ローカルディスクからの表示だけで読み込みのスピードを判断し、もちろん HTML についての知識など全くなく、これで世界にデビューできたと素朴に喜んでいたのです。自分の環境しか知らないので、「Internet Explorer 2.0　800×600　フォントサイズ小でどうぞ」などと書いて (今も似たようなことを書いていますが) これでよし、と安心していました。ページを開いた頃の状況については、生徒の書いたものと、顧問 (菊地達哉) の書いたものがありますが、ページの内容はともかく、 HTML や Web のことを何も知らずに、勝手なことを考えていたものです。

ページを開いて半年後、コンクールの会場で、別の UA で、別のマシンで自分たちのページを見たとき、表示の違いに驚きました。え、何でこんなふうに表示されてるの、文字列がずれている、フォントが違う、文字が画像に重なっている…。ほかにもどこかで読み込めない UA があるのではないか、不快に感じている人があるのではないか、不安になってきました。

田野畑高校は、拡張タグの誘惑に負けながらも (けっこう負けてます)、失敗を通して「誰もが見られるページ」に近づきたいと考えるようになりました。ぜひアドバイスをお願いいたします。