ウェブページ作成のちょっとしたテクニック

ウェブページ作成のちょっとしたテクニック

• ホームページ作成ソフト 以前は、Frontpage Expressを使っていました。Internet Explorerに付属していて、見た目や操作がWordに近いということもあって、使っている人が多いようです。ただ、無駄にインデントしたり、エディタで書き加えたものや修正したものを壊してしまうのが難点。現在は、ホームページビルダーを使っています。

• シンプルなページを 内容が濃いページほど、ページの構成はシンプルで、ページの移動などのアクセスもしやすい傾向にあります。 しかし、逆にトップページなどにこっているサイトも多く、表示までに時間がかかります。ダイアルアップだと分単位で待たされるページもあります。ホームページビルダーであれば、「どこでも配置モード」は使用してはいけません。 テクニックの披露をしたいのでしょうが、それはトップではない別の場所でおこなってほしいものです。フラッシュなどを使用するとか、「入り口」のページがあるとか(アクセス制限のあるページは除く)、いきなり音楽が鳴りだすページとかは、特に印象が悪いです。それだけで訪問者は一瞬で逃げてしまうことに気付かないのでしょうか。

• 正常に表示されるようにする いわゆる「文字化け」です。

  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

  などというのをヘッダにしっかり記述すること。 ShiftJISは、Shift_JIS、JISコードは iso-2022-jp、EUCコードは EUC-jp となります。

• リンクが正常が調べる よく見かけるのが、リンクがローカルのままだったりして、表示されないというもの。ページを開こうとするとフロッピードライブにアクセスしようとしたり、大文字小文字が間違っていたり・・・。孤島発見器 (http://hp.vector.co.jp/authors/VA014575/chicchi/) でリンク切れや、使われていないファイルを調べるといいでしょう。

• 色について 印刷されて活用したくなるほどの情報が含まれているときは、黒バックで白文字のページは困ってしまいます。黒文字で、バックは薄い色 (できればバックは白) がいいと思います。黒バックで白文字のページは、印刷しておく価値がないと制作者が言っているようなものです。 バックの画像が濃いものも読みづらいです。 サイト全体の色を統一し、濃さでメリハリをつけるのが美しいとされています。そうすると特に目立たせたい部分に違う系統の色を使うだけで、目立たせることができます。 あるいは、淡い色で統一し、目立たせる部分を濃くするというのも見やすいでしょう。

• HTMLの文法が正しいかチェックしよう http://validator.w3.org/ でHTMLが正しいかをチェックすることができます。英語のサイトですが、自分のWebページのURLを入れてチェックさせればいいだけです。 ホームページビルダーでも、HTML構文チェックの機能がありますが、デフォルトではかなり甘いので、設定を変えてから実行するといいでしょう。 「IEでご覧ください」なんて、ナンセンスなことを書かないで、どのブラウザでも表示できるようにしましょう。

• HTMLの表示時間を予想する ローカルで表示させたり、ADSLだったりすると、重たいページを作っても気付かないことがあります。そこで、HTML体重計 (http://www.geocities.co.jp/SiliconValley/5314/) を使って表示時間を測定させましょう。

• JAVAやJAVAScript、VBScriptは使用しない これらのものは、機能をオフにすることができます。そうするとJAVAScriptでページの移動をおこなうように記述すると、他のページへアクセスすることができなくなります。 なお、CGIはサーバー側でHTMLを作ってから、読み手に送られるので、特に問題はありません。ただし、文字コードや文法チェックの必要はあります。

• 検索ロボットを操る 検索ロボットがWebサーバーのルートにあるrobots.txtをアクセスしに来ます。これは、このrobots.txtをみて、許可されていないディレクトリなどを判断するようです。 robots.txtを検索すると詳しい説明を探すことができます。次のURLは、その一つです。 http://tohoho.wakusei.ne.jp/wwwxx079.htm 自分のページ内では、

  <meta name="keywords" content="ここにキーワードをカンマで区切って記述する">
  <meta name="description" content="ページの簡単な説明を記述する">

  と入れておくと検索ロボットが拾っていってくれるらしいです。 逆に

  <meta name="robots" content="NOINDEX,NOFOLLOW">

  と記述すると検索ロボットは、無視するようになります。私の別のページで、もう何年もアクセスの多いサイトなのに検索されないようにできているページがあるので、きちんと機能しているようです。

• favicon.ico Internet Expolorerのお気に入りに登録すると、そのページのオリジナルのアイコンになるものがあります。こうするには、HTMLのヘッダ部分に次のようなものを書きます。

  <LINK REL="SHORTCUT ICON" HREF="http://xxx.com/favicon.ico">

  マイクロソフトに詳しい説明があります。 http://www.microsoft.com/japan/msdn/web/ie/ie50/icpie5.asp なお、MozillaやNetscape7では、常時、設定したアイコンが表示されます。これもおもしろいですね。

• Nutscrape/1.x (CP/M; 8-bit)って何? アクセス解析をしていると「Nutscrape/1.x (CP/M; 8-bit)」っていうブラウザでアクセスしてくる人がいます。Netscapeではないし、CP/M 8ビットって随分昔のコンピュータかな? と思ったら、Linuxで家庭内LANなどを構築している場合、Squidというプロクシ兼キャッシュサーバーでこれらの情報を自由に設定できるようです。そのデフォルトが「Nutscrape/1.x (CP/M; 8-bit)」のようです。ときどき、IternetExplorerのありもしないバージョンとか、Windowsのありもしないバージョンでアクセスするのも、きっとこれなのでしょう。

• <small>と<a href>のネスト マックのInternet Explorer 5では、<small>タグが<a href>の内側にあると表示がおかしくなることがありました。スタイルシートで、a:hover で背景色を指定している場合は、気をつけましょう。