move page top

ホームページのルール

2007/10/22
仙台入門管理人

閲覧者の人から見てホームページはコンテンツだと思いますが、コンテンツはよくても、使いにくいホームページはたくさん存在していて、その辺は出来るだけ対策していきたいと思います。

今回は、多少愚痴っぽくなると思いますが、ホームページのドキュメントなどが、どんな考え方で作られているかなど、当サイトの課題も含めて考えていきたいと思います。

move page top

ルール

何事もそうですが、ホームページにもルールがあります。

ホームページに、こんなことは書いちゃいけない。というのもありますが、今回は、そのようなドキュメントの内容のことではなく、もう少し技術的な観点から、考えてみたいと思います。

仙台入門では、ホームページを作る場合、htmlという形式のファイルを主に使います。(実際問題として、htmlというファイルそのものを使っているわけではないのですが、)

それ以外にも、Flash等といった。あらかじめPCにインストールされたプログラムを起動して表示する場合もありますが、今回は、このhtmlについて、考えてみます。

move page top

htmlとは

windowsからも、Macからも、それ以外の、コンピュータシステムからも、大抵読み取ることが出来るファイル形式。

誰がどんなコンピュータシステムから、アクセスしてくるかわからない場合には、このファイル形式が、多く使われます。

htmlファイルは、テキストファイルなので、多少手間はかかるけれども、テキストエディタなどで作成が出来る。もちろん専用のエディタもある。

move page top

htmlの困った点

ホームページを閲覧するためのブラウザも、インターネットエクスプローラ以外にもブラウザが存在していて、それぞれ、独自の機能を持っていたり、表示をした時に、独自の癖や欠陥を持っている。

htmlそれ自体は、プログラムとは異なり、厳密な記述を行わなくても自由に記述が出来る。

例えば、タイトルを記述する時に、ヘッダー要素(h1,h2,h3,...)を使わなくても、他のタグを使って、文字を大きくするだけで、閲覧する人にとっては、見出しとして理解できるようになる。(コンピュータは、このような記述を見出しとして理解が出来ない。)

ルールを無視しても、何とか、表示できる ある種の手軽さが、

本来の、記述ルールを軽視させたり、学びにくくする要因にもなっている。

閲覧するためのプログラムが、大体、同じように表示が出来るんだけど、すべてのブラウザで同じ表現が出来るわけでなく、特別な機能をすべてのブラウザで共有することが出来ない。

 結局いろいろなブラウザで正常に表示されているかどうか確認しないと危なっかしい。

 ブラウザにあわせて、レイアウト等を調整する方法は、何種類かあるがそのための作業は徒労感があります。

 仙台入門では、見た目を調整するために、スタイルシートを使っています。あまり細かく調整する必要がないように、記述を考慮していますが、無駄と、重複の多い作業になっています。

 スタイルの指定には、外部スタイルシートと、インラインスタイルを併用しています。

 CSShackはインラインスタイルで編集時に局部的に、使うために利用しています。

実際に、スタイルの指定を行っていくと、時間的には、編集画面で直接スタイルを記述したほうがずっと早く、外部スタイルの場合は、数百行に及ぶスタイルがすべて記憶に残っているわけでもなく、idやクラスを指定するために、スタイルシートを見直しながら記述しなければならない面倒くささが伴います。

 しかし、インラインですべて間に合わせると、同じような記述を何度も繰り返すことになり、一括変更などの場合、非常に手間がかかります。

 このようなことから、本来外部スタイル一本で行こうとしたものが、現在は、併用状態になっています。

 うまく管理するのは、結構難しいというのが実感です。スタイルは、無効な子弟は無視されるので、重複などに気づきに工面があります。

 クラス属性と ID属性を うまく組み合わせて、スタイルの指定を、出来るだけシンプルにしていこうと考えています。

move page top

htmlのトレンド

特定のブラウザでしか実現できないような機能の利用を避けて、汎用的な表現が出来るような記述の仕方をしたり、ブラウザ間の差を意識しなくても、記述が出来るような補助的なプログラムを利用することが多く行われています。

その中で、よく言われるのが、「WEB標準」や「アクセシビリティ」という言葉です。

これらのルールは、今のホームページ制作を行ううえで普及した考え方になっています。

横道ですが、javaScript ライブラリ等も、ブラウザ間のスクリプトの仕様の違いを吸収してくれるので、よく使われます。

move page top

Web標準とは

WEB標準とは、ブラウザ依存のないホームページドキュメントを実現するための手段です。

W3Cという、htmlの標準化団体があります。この団体では、htmlの汎用的な、文書型の定義をDTDという形で公開しています。

文書型の定義とは、htmlドキュメントの作成ルールです。W3Cの文書型定義は、広く利用されており、日本のJIS htmlも、W3Cの文書型定義に沿っています。

このような文書型ルールに従ってドキュメントを作成し、汎用性を高めるという考え方です。

このようなルールを採用することで、アクセシビリティも向上します。

 

具体的には、例えば画像を表示する時に使う ALTという属性があります。ALT属性の値は、画像が表示されない場合の代替文字列になります。

代替文字列は、画像を表示できない時に、画像の変わりに表示され理解を助けます。

一般にコンピュータは、画像の内容を正確に認識できません。したがって、コンピュータが、この画像の意味を捉える意味でもこの属性が利用されます。

仙台入門では、ALT属性に、形式上は、対応していますが、実際には、意味のないURLを入れているために、実質的には、対応していません。

当サイトの場合は、編集時に使う記法が、未対応なために発生しています。プログラムの改修を検討しています。

move page top

アクセシビリティとは

閲覧者が、操作を簡単に理解できたり、意図しない動作を停止できたり、場合によっては、ハンディキャップのある閲覧者に対しても、閲覧が困難にならないような配慮を行うといった可読性や操作性についての指針の実現度合いや、考え方。

仙台入門では、操作しやすいページを目指しております。

htmlタグなどについても、出来るだけシンプルな使い方にとどめようと考えております。しかし、徹底させますと、実用本位になりますが、あまりにもシンプルになりすぎて、、、。

適度に画像もつけておきたいし、内容も充実したい。

 可読性が向上したり、操作性が向上するためのデザインを考えたいと思いますが、そのようなデザインを考えるためには、自分で何度も閲覧するのが一番のようです。馬鹿みたいでもありますが、、、

 繰り返して閲覧することからしか、必要なものが見えてこないようです。

ただ、現実のテーマは、ページを表示する時間の短縮と、アクセスエラーの減少です。

この点では、多くの皆さんに迷惑がかかっていると思います。対策を急ぎたいと考えています。アクセシブルかどうかの問題以前ですね。付き合っていただいている閲覧者の方に、感謝。

 

参考:ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0

具体的には、閲覧者が、文字の大きさが小さいと感じた時に、ブラウザを操作したり、ページに埋め込まれた機能によって、文字の大きさを変更できたり、

視力障害のある人のアクセスを想定して、背景と前景色のコントラストを高めに保つなどの、ホームページ制作上の配慮等があります。

move page top

htmlに求められていると私が思うもの、

ページのデザインそのものだけでなく、閲覧者にとって「操作がわかりやすく見やすく伝わるドキュメント」が望まれていると考えています。

 作り手の立場になると、どうしても、デザインと配色にばかり重点がいきますが、閲覧する人は、意外と私なんかの手垢の付いたデザインよりは、調べやすさや見易さを重要視しているようです。

 閲覧者が中心に存在できるためには、閲覧者の意思で決定できる事柄、例えば、文字の大きさがコントロールできたり、RSSリーダーなど閲覧者の閲覧スタイルに合うという機能等も必要なのかもしれません。

WEB標準にしろ アクセシビリティにしろ 言われただけのことを適用しているだけでは、だめみたいで、そこからどんな事をやっていくかによって、やっとこのやり方がいいというのが見えてくる気がします。

補足1

仙台入門は、http://www.tenman.info/index.php 等でアクセスできますが、同様に、http://www.tenman.info/index.php?index.txtでもアクセスできます。実際のファイル形式は、htmlではありませんが、閲覧者の方が、アクセスした場合は、htmlドキュメントをサーバから送っています。