webの基礎

HTML、URI、HTTP

webの基本的な概念は、文書形式であるHTML(HyperText Markup Language)、文書転送プロトコルであるHTTP(Hyper Text Transfer Protocol)、文書の所在(住所)の指定方法であるURI(Uniform Resource Identifier)の3つから成る。
これに、HTMLを(視覚、聴覚分野で)装飾する文書であるCSS(Cascading Style Sheet)が加わったものが、最もスタンダードなものとなる。(JavaやPerlといったスクリプト言語は、あくまでHTMLを補佐するために存在するため、HTML文書と同じ位置づけである)

URIは、一般的なブラウザのアドレスバーに「http://〜」という形で記載される、いわゆる「アドレス」のことであり、以前はURL(Uniform Resourse Locator)と呼ばれていたが、現在は「URN(Uniform Resourse Name)」を含め、URIという用語で使用されている。

HTTPはwebサーバーとクライアント(閲覧者=ブラウザ)がデータを送受信するための転送プロトコルのことである。

つまり、webとはweb上にあるHTML文書のURIをHTTPプロトコルに則って指定することでデータの送受信が行える(ブラウザに表示される)という仕組みになっている。

URIとリンク

「リンク」とは、一言で言うとHTML文書同士の繋がりのことである。
HTML文書内に別の文書へのURIを記載することにより、それぞれの文書間をスムーズに行き来できるシステムがリンクと呼ばれる。

リンクを使用せずとも、その文書がweb上に存在すれば、そのURIをブラウザで直接指定することで閲覧できるが、そもそも他人のサイトにどのような名前のフォルダ、そしてファイルがあるかはわからないため、現実的ではない。

異なる文書間を自由に行き来できるこのシステムは、webの最大の特徴の一つと言える。

尚、URIには通常のHTML文書を閲覧するためのhttp:スキーム、FTPサーバーとデータをやり取りするためのftp:スキーム、eメールアドレスを指定するためのmailto:スキームが一般に使用されている。

絶対URIと相対URI

URIを指定する際には、二つの方法がある。

絶対URIとは、URIをURIスキームからファイル名までを完全に書き出したものであり、web全体から見たURIのことである。(県外の他人に郵便物を送る際に、県名から番地まで記載することを想像していただくとわかりやすいかもしれない)
一般にURIとは、この絶対URIのことを指す。

一方、相対URIとは、あるフォルダやファイルを基点とした場合の、ほかのファイルの所在である。(他人に道を説明する際、「ここから3つ目の信号を右に曲がって〜」などと説明することを想像していただくとわかりやすいかもしれない)

HTML

HTMLとは、Webページを記述するためのマークアップ言語のことである。W3Cが作成している規格で、最新版はHTML 4.01。

HTML文書はツリー構造をしており、HTMLは文書の論理構造を記述するために使用される。

HTML文書はテキスト文書の一種であるため、テキストエディタでHTML文書を開き、編集することが可能である。

XHTML

HTMLをXMLに準拠した仕様になるよう改良した言語がXHTMLである。HTML4.01と同じ要素で構成されているため、過去互換性が高く、ほとんどのブラウザで問題なく表示される。

W3C勧告としてXHTML 1.1が公開されており、現在XHTML 2.0が策定中である。(ただし、XHTML 1.1は完全にサポートしていないブラウザが多いため、現状はXHTML1.0を採用することが殆どである)

本来文書構造を記述するための言語であったにも関わらず、タグの濫用により視覚効果までもを表現するよう発展(混乱)してきたHTMLにXMLの要素を加え、再構築したものがXHTMLである。
その為書式がHTMLに比べて厳格となり、また、安定性も向上している。

CSS

CSSはwebページの視覚(および聴覚)表現を指定する言語であり、スタイルシートとも呼ばれる。
現在W3C勧告による最新バージョンは2.0。CSS 2.1が策定中であり、近々勧告される見通しである。また、CSS 3も現在策定中である。

本来文書構造を記述する言語であったはずのHTMLが、その範疇を超えて視覚表現までをも指定するように拡張(混乱)されてきたことを打開するために勧告された。

(X)HTMLに備わっている視覚表現のコントロールは極めて脆弱(皆無)であるが、CSSを併用することによって、それまでHTMLでは表現しえなかった緻密なデザインが実現できる。

従来は「視覚」のみに固持し、tableと呼ばれる表組みを利用したレイアウトの手法が主流であった。(テーブルレイアウト)
また、テキストや背景を装飾するために、物理マークアップと呼ばれるタグを記述する方法も非常に多く見られた。
勿論、tableタグをレイアウト目的で使用することは、HTMLのマークアップ上正しいことではないし、物理マークアップを使用することも、ソースの肥大化やメンテナンス性の低下と言う点から好ましくない。

CSSの登場により、HTMLは本来の文書構造を示す文書、CSSはその視覚的表現を示す文書というように、文書の分離が出来るようになった。

特にXHTML1.1以上では、視覚表現を示す表記はすべて非推奨とされ、文書構造と視覚表現の完全な分離を強く推奨している。
文書構造と視覚表現を完全に分離するということは、CSSのファイルを書き換えるだけで、そのCSSファイルを参照しているすべてのHTMLファイル(あるいはサイト全体)の「視覚的なリニューアル」が容易になる点が大きな利点である。
(従来のテーブルレイアウトでは、サイトイメージを一新するために、全てのHTMLファイルを書き換える必要があった。)

ブラウザの実装差異

現在世界中で最も普及されているといわれているInternet Explorerの正式版は、6.0が最新である。(現在Internet Explorer 7 β2が公開中。)
かつて第二のシェアを誇ったNetscapeに加え、現在ではMozilla Firefox、Operaなど、閲覧者のブラウジング環境は様々なものとなってきた。

だが、閲覧環境が様々ということは、見え方も様々であるということである。
W3Cは、すべてのブラウザで同じように表示されなければならないとしているが、実際はそうはいかないのが現実である。(テーブルレイアウトは、このような事態にも比較的容易に対応できた。)
特にCSSのサポートはすべてのブラウザで完璧とはいかず、あるブラウザで正常に表示されていたものが、違うブラウザでは正常に表示されないと言うことも十分にありえる話である。(世界で一番シェアがあるはずのInternet Explorerは、その実一番CSSのサポートが遅れている)

同時にW3Cは、webサイト製作者は全ての閲覧者に同じコンテンツを提供しなければならないとしており、それがブラウザの実装差異と相まって製作者を悩ませる要因となっている。

全てのブラウザで同じ表示をさせることは不可能に近い事であり、ある程度ターゲットを絞り込む必要があるが、問題はどこに向けてターゲットを決定すれば良いかということである。
Internet Explorerを主ターゲットにすることは言うまでもないが、現状はInternet ExplorerのCSS解釈がアバウトである点も念頭に置かなければならない。
より厳格なCSS解釈をしているNetscapeやMozilla Firefox、Opera等のブラウザで表示を確認した後、Internet Explorer用に微調整するのがいいだろう。
尚、Internet Explorer 7ではかなり(完璧ではない)改善されているため、ほとんどブラウザの実装差異を意識する必要はなくなるが、ブラウザの過去互換性(必ずしも閲覧者全員が最新のブラウザを使用するとは限らない)を考慮し、調整する必要がある。

Internet Explorer 7で実際にWebサイトの表示テストを行ってみたところ、やはりCSSの解釈に若干の問題があった。この点に関してはそれぞれの項で補足する。