毎週金曜日配信 What's New 2003/1/10
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
初心者のためのホームページ作り
http://www.scollabo.com/banban/
<第34号>
banban@scollabo.com
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
明けましておめでとうございます。本年もよろしくご愛読ください。
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座では HTML4.01 及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めます。
今週の課題 ■ HTML基本 その1(HTMLの歴史)
■ XHTML講座 第1回 -- XHTMLとは
■ HTML タグの解説 --- html要素
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆はじめに
昨年5月より本講座の配信を始め、かなりのスピードでHTML4.01を学んできま
した。そのために、それぞれのテーマの解説には端折った部分が目立ち、乱暴な
説明に終始したことを、改めて紙面上からお詫び申し上げます。
読者の方から、「初心者向けなのだから、もう少し深く掘り下げてじっくりと
説明して欲しい」との「お叱り」も受けました。
試しに、私の家族に読ませてみると同様の意見が返ってきました。例えば、い
ろいろな決まり事や規則について、「何故そうなのか?」「その理由は?」との
疑問点を提起しました。
それらの点を踏まえて、今回の講座よりもう一度原点に戻って Webページ作成
のために進めていきたいと考えています。第1号からの重複もありますが、その
点につきましては、復習とお考えいただいてご容赦願います。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML基本 その1
テキストエディタで記述するHTMLに関する規則や約束事について簡単に述べます。
■タグとは?
head、bodyなどの各要素は、必ず < と > の半角鍵形括弧で囲まれます。これ
らは、開始区切子 < と、終了区切子 > で区別されます。
一般に「タグ」と呼ばれるのは、<head>、<body>、<p> などのように、マー
クアップにつかう記号を「タグ」と呼びます。
タグの集合体を「タグセット」と呼び、タグセットを用いて書かれた文書を
HTML文書(HTML Document)と呼ばれ、その拡張子は「html」または「htm」と
されています。
○Tips
その昔、SGMLの前身である GMLが開発されたとき、マークアップに用いる開始
区切子の記号には、様々なものが考えられていました。
例えば、=body= とか、?body?、!body!、&body& などじつに多くが考えられ
たようです。何故、<body> になったかは不明です。(SGMLについては後述)
■要素、属性、値
<a href="index.html">Back to Home</a>
この中の aというものがタグに当たり、hrefは属性(ぞくせい)と呼ばれます。
index.html は属性の値(あたい)に当たり、通常は引用符で囲まれます。
これらすべてを要素(Element)と言われることが多く、a要素と呼びます。
要素(ようそ)については、単にタグを指す場合もあります。
HTMLでは、属性値は引用符で囲むよう求められていますが、値が数字やアルフ
ァベットだけのものは、特に引用符を使わなくても有効です。
値の中に記号(ピリオドやアンダーバーなど)が存在する場合には、必ず引
用符で囲まなければなりません。
例:引用符が不要な場合
<table class=samp cellspacing=0 cellpadding=0 width=500 border=1>
例:引用符が必要な場合
<table class=samp cellspacing=0 cellpadding=0 width="70%" border=1>
 ̄ ̄
■タグなどは必ず半角英文字を使う
例えば、<body> を <body> などと全角で記述するのは間違いで無効に
なります。タグやその属性などは必ず半角英文字で書かないといけません。
また、大文字と小文字の区別がありません。ですが、講座では将来を見据え
て、小文字を採用しています。(XHTML、XMLは小文字で記述)
■htmlとhtm
先ほども述べましたが、HTML文書となる拡張子は、必ず「html」か「htm」で
なければなりません。(拡張子とは、文書の分類を示す識別子)
この、htmlと htmは文書の保存をする場合の拡張子で、それぞれ厳密に区別
されています。
例えば、next.htm という文書を別の文書からリンクする場合、
<a href="next.html">Next</a> では、リンクできません。拡張子が違うか
らです。正確には、<a href="next.htm"> と記述しなければなりません。
htm という拡張子は、主にUNIX系のコンピューターで利用されてきたもので
今でもこの拡張子は有効です。当講座では、すべての拡張子は、htmlを採用し
ています。できるだけこの拡張子は統一して使うほうが、間違いが少なくて済
むでしょう。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTMLの歴史
ホームページ作成には直接関係ない事柄ですが、HTMLの歴史を知る知らないでは
講座の解説の理解度が全然違ってきます。
本来ならもっと早い段階で解説するべきでした。しかし、新たな XHTMLを学ぶ
上で丁度よいタイミングかもしれません。
ここでは、HTMLの推移を簡単に述べます。
■SGML(Standard Generalized Markup Language)
その昔、UNIXで記述したある文書を、MS-DOSパソコンで読めないことから端を発
して、異なったプラットフォームのコンピューターでも文書が同じように読めな
いだろうか、という疑問から米国IBM社の中で開発が始まりました。
それが GMLと呼ばれる一般マークアップ言語の始まりでした。その後に、その
仕組みは、SGMLと呼ぶ標準化一般マークアップ言語となったのです。
1985年、SGMLは、組版という仕組みをマークアップ言語に置き換えることで、
コンピューターのプラットフォームに関わらず、同一の文書を配布、閲覧するこ
とを目的として次のように取り決められました。
1.マークアップは物理的なレイアウトではなく、文書の論理構造を反映したも
のでなければならない。
2.マークアップはコンピューターと人間の両方が理解可能な形式でなければな
らない。
SGMLは1985年に最終的に、ISO(国際標準化機構)によってISO 8879-1986 とし
て規格化され、それ以降広く採用され、米国国防総省の国内税収業務局、全米出
版社協会、ヒューレットパッカード、コダック、その他多くの航空宇宙関連、自
動車メーカー、医療品メーカーの間で、国際的な出版規格となりました。
また、SGMLは CERN(欧州原子力研究機関)にも採用され、後にここで World
Wide Web が開発されることになったのです。
しかしながら、SGMLは複雑で言語的にも難しく Webへのパフォーマンスも悪く
誰もが簡単で自由に作成できるというわけにはいきませんでした。
そこで、1991年当時、まだ W3Cという国際的な規格団体が存在していない折に
欧州原子力研究機関でSGMLをより簡素化して開発されたHTMLが産声を上げ、瞬く
間に世界に広がりました。
○Tips --- CERN(Conseil Europeen pour la Recherche Nucleaire)
欧州原子力研究所の略で、「セルン」と発音します。この研究所に在籍してい
た、ティム・バーナース・リー博士らによって最初のHTMLが生まれました。
同博士は、その後 Webの国際規格を統括管理する W3Cの初代会長に就任して
います。現在、CERNは W3Cの構成メンバーの一員でもあります。
■HTML 1
1991年、ジュネーブのCERN(欧州原子核研究機構)のティム・バーナーズリーら
が開発したのが「HTML 1」(W3Cでは、"The First Version of HTML"と呼ばれて
います)です。
当時のHTMLは、現在のそれと比べると非常に原始的なもので、すべてテキスト
ベースで表現されるものでした。
HTML 1で利用できるタグは非常に限られ、html、head、bodyなどはありません
でした。ある意味では簡単で、誰でもすぐにHTML文書を作成できるシンプルな構
成だったことが想像されます。
1993年、最初のグラフィカルなブラウザ、NCSA Mosaic for XWindows System が
開発される。(UNIXベース)
1994年 W3C(World Wide Web Consortium)が活動を開始。 Webにおける技術的
な規格を国際的に統合、管理する非営利団体として認知されました。
■HTML2.0
1994年以前に一般的に使用されていたHTMLを収集・分類し、定義の明確化や体系
化を図るべく、IETF(Internet Engineering Task Force)の HTMLワーキンググ
ループの仕様書として、ティム・バーナーズリーとダン・コノリーにより1995年
11月に公表されました。
(IETF HTMLワーキンググループは、1996年9月に解組)
HTML 2.0の特徴は,まずHTMLの基礎概念や構造の明確化が図られていることで
す。例えば、インターネットにおけるHTMLのメディアタイプを 「text/html」と
して、明確に定義していることや、HTML文書を文書型宣言 DTDからはじめる、と
いう構造を採用されたことが挙げられ、大変大きな変革がありました。
また、フォント装飾要素が多数定義されており、さらに機能的にも、画像を挿
入するための要素やフォーム関連要素が定義されているのも、HTML 1からの大き
な進歩といってよいでしょう。HTML 1に比べて要素が倍以上定義されています。
ページの背景色や文字色を指定する属性はなく、今日のようなカラフルという
イメージとは隔世の感がありますが、構造面ではすでにその基礎が築かれていま
した。
それまで、国際的な規格を管理していた欧州原子力研究所は、本来の業務に専
念するため、それまでのすべての権限を W3Cに委譲しました。これ以降、HTMLを
含めて、通信に関する技術や規格など W3Cで決定するようになりました。
この当時、日本国内で、インターネットにアクセスする人たちは限られていま
した。何よりも「TCP/IP」の入手が大変困難な時期でもあり、通信速度も FAX並
みの遅さで、コーヒーを飲みながら、タバコを1本吸ってもまだページが表示さ
れないために、当時のインターネット通信費に月額10万円以上支払った経験があ
ります。(使用したパソコンは Macintosh PowerBook の初期型でした。)
○Tips --- TCP/IP
インターネットに接続するためのプロトコル(通信手順)のことでファームウ
ェアのひとつ。通信プロトコルとは、パソコン同士が通信するときの手順や方
法の決まりで、通信されるデータにエラーがないかチェックするための方法や
圧縮の方式などがそれぞれの通信プロトコルで決められています。
当時は、パソコンのOSに搭載されておらず、別途購入する必要がありました。
購入費用は2000円位だったと記憶しています。現在は、ほとんどのパソコンに
標準装備されていますので、別途インストールする必要はありません。
○Tips --- IETF
Internet Engineering Task Force の略で、世界中の技術者が無報酬で参加し
インターネット上の技術的な規格を研究開発しているコンソーシアム。この組
織が発行している有名なドキュメント RFC(Requests For Comment)は、事実
上の標準仕様として知られています。W3Cの主要構成メンバーの一員。
1994年 Mosicの主要メンバーが脱退して Netscap Communicator社を設立。
高度なグラフック機能を持ったブラウザ Netscape Navigator を発表。
■HTML 3.0
1995年9月、HTML 2.0が発表される2ヶ月前に、ワーキングドラフト(作業草案)
が勧告されました。
W3Cでは、IBM社、Netscape社、Sun Microsystems社、Microsoft社、などとと
もに開発を進め、次の HTML3.2が期待されました。この年日本でもインターネッ
トという言葉が初めて出現したことが印象に残っています。
1995年 Windows95の発表
Microsoft社のグラフィカルなインターフェイスを持った Windows95 が
発表され、標準で「TCP/IP」とブラウザを搭載し、あっという間に世界
中に普及しました。
また、一般の多くの人たちがインターネットにアクセスできるための
ネット接続のプロバイダ会社が乱立した時期でもあり、日本国内のイン
ターネットの草明期でもありました。今考えると、日本のインターネッ
トの歴史が意外と浅いことに気づきます。
■HTML3.2
ブラウザの整備が進み、長く待ち焦がれていたグラフィックな要素を盛り込んだ
HTML 3.2が、1997年1月に正式にリリースされ、世界中で Webの爆発的な普及を
もたらした画期的なバージョンでした。
この時期、多くの専門書が出版され、ホームページ作りが一般化した時でもあ
りました。(ただし、間違いだらけの専門書が実に多かった。)
HTML 3.2で盛り込まれた新機能には、表関連要素(table)、Java Applet関連
要素などがあります。また、標準16色を定義したことや配置属性を全面的に導入
したことにより、後に表現豊かな Webが多数登場することになります。
HTML 3.2公表時点ですでに、 W3Cでは、アクセシビリティや国際化、マルチメ
ディアへの対応、スクリプトやスタイルシートとの連携などについて検討が重ね
られていたことから、HTML 3.2の冒頭部分で、HTML 4.0の登場を予告する旨が述
べられているのが印象的です。
つまり、発表されたばかりのHTML 3.2でしたが、多くの矛盾を内包した反省が
あったのだろうと想像されます。後に、この HTML3.2は失敗だったと述べる W3C
の委員がいたことも事実です。
問題のあった仕様は W3Cの構成メンバーでもあるスフトウェアメーカーの独自
仕様などを標準とするような強い圧力に押し切られた感がありました。
■HTML4.0
HTML 3.2が発表されたその年の末(1997年12月)にHTML 4.0が発表されました。
HTML 4.0は、HTML 3.2の冒頭部分で予告されたアクセシビリティや国際化、マ
ルチメディアへの対応、スクリプトやスタイルシートとの連携といったテーマを
具現化し、いわゆる「ダイナミックHTML」という言葉が派生しました。
HTML 4.0では、上述のようなテーマをもとに、HTML 3.2にはない新しい要素や
属性が多数追加されました。例えば、<img> や <applet> などを包含する、マル
チメディアファイルの設定に関する包括的要素 <object> の導入、属性値の整理
統合(多くの要素に共通して使える汎用属性)などが挙げられます。
また、統一的な「構造と見栄えの分離」という目的のもと、主に見栄えをコン
トロールする要素・属性を非推奨とし、代わりにスタイルシートによる設定を要
求しています。同時に、大きく3つの文書型宣言を設定しました。
(HTML4.01の文書型宣言の記述は次回に掲載予定)
■HTML4.01
HTML 4.01は、HTML 4.0の全般的に改訂したものであり、W3Cにより1998年5月に
公表されました。同時に新しい要素が追加されました。
この改訂は、HTML 4.0公表の後、1998年5月にCSS 2が公表されたことにより、
HTMLとスタイルシートとの連携を強調している関係上、全面的な見直しが必要と
されたことが大きな要因だと言われています。
他にも、後方互換性(古い仕様にも互換できること)のために <img> や <for>
などに name属性が追加されたり、例示に細かな修正が加えられたりしました。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XHTMLを学ぶに当たって
既に読者の多くが、それなりに経験を積み、HTMLについてかなりのスキルを持
ちあわせ、ホームページを開設していることと思います。それを前提としてこの
講座を進めていきます。(と言っても、初心者にも分かりやすく説明します。)
XHTML1.1では、従来まで使用が可能だった要素及び属性などが廃棄されており
厳格な文書構造が要求されています。ですが、HTML4.01Strictをマスターした方
には、それほど難しいものではありません。それらについては講座を進める中で
適時解説いたします。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆初めてのXHTML講座 第1回
今回より、定期掲載として新しいマークアップ言語である XHTMLを取り上げ、詳
しく解説します。HTMLを継承しつつ XMLの機能を取り込んだ最新のバージョンで
ある XHTML1.1を中心に、皆さんと共に学んでいきます。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTMLはどこへ行く?
インターネットにおける国際規格を決定する機関 W3Cでは、1998年にHTMLの最新
バージョン 4.01を発表して以来、その後 HTMLに関する動きがまったく見られま
せん。過去の経緯からして極めて長期間、ほったらかしにされています。
(1999年12月に、HTML4.01の最終版が勧告されていますが、特に大きな変化はあ
りません。)
その間、2000年1月、突如 XHTML1.0 をリリースし、その後2001年5月には、
さらに XHTML1.1 を発表しました。これはどうしたことか・・?
XHTML1.0が発表された時、少なくない専門家や批評家が「HTMLは終わった」と
か、「HTML5.0 が発表された」などと専門書や Web上で興味深く論評しています。
現在、世界中の Webサイトは20億を越えています。そのほとんどがHTMLで記述
されています。それなのに何故 XHTMLなのでしょうか?
そして、HTMLはその役目を終えようとしているのでしょうか?
HTMLとは、表現を中心としたマークアップ言語です。一方 XMLは意味を中心と
したマークアップ言語です。その両方の機能を持った XHTMLは拡張性の高い優れ
た言語です。HTMLは、まだまだなくなることはないですが、多くの機能を持った
新しいマークアップ言語に置き換えられることは、そう遠くないでしょう。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTMLの欠点
HTMLの各バージョンの文書型宣言 DTDはすべて W3Cが管理する文書を参照してい
ます。そのために、自由にタグを設計したり、要素の意味を変更することができ
ません。
HTMLでは終了タグを省略することが可能なタグが多数存在しています。これは
厳密に考えると、その構成要素がどこで終わるかということを無視しています。
ブラウザ側でその終了を補完せよという、ある意味では極めて乱暴な規定です。
終了タグがなければ、ブラウザ側で「段落の中に段落を含めてよい」と受け取
られても誰も文句は言えません。こうした矛盾点には W3Cでも気づいていたハズ
でした。
HTMLだけでは、アプリケーションを理解できません。HTMLが表現を中心とした
マークアップ言語なので、当然アプリケーション・データの意味が理解できない
のは仕方がありません。
また、企業の基幹システムとの融合には程遠く、SGMLが求めた文書の同意性か
らかけ離れ、新たに文書を書き起こす必要があります。
例えば、データベースや EDI(企業間取引の通信)などのアプリケーションを
理解することは、HTMLには到底不可能なことです。
こうしたHTMLの限界に対する認識からSGMLを Web上で使えるようにしようとい
う議論が始まったのです。
このような背景の中で誕生したのが XMLでした。
 ̄ ̄
1998年、W3Cは XML1.0 を発表しました。XMLは、多様なデータ処理に対応した
汎用性・拡張性に優れたデータ記述言語が必要とされ始めていた頃、その待望さ
れたマークアップ言語でした。
XMLは、最初のドラフト(草案)は1996年11月に発表され、その後たった2年
で開発された要因は、あらかじめSGMLという規格のベースがあったからだと言わ
れています。
XMLとは Extensible Markup Language:拡張可能なマークアップ言語と呼ばれ
SGMLを受け継ぎ、SGMLのサブセットとして定義されています。HTMLも同様にSGML
のサブセットして定義されている関係で、HTMLと XMLはいわば兄弟のようです。
HTMLは表現を中心としたマークアップ言語であり、一方 XMLは意味を中心とし
たマークアップ言語です。
XMLの特徴
1.アプリケーションが処理できる
2.人が見て理解できる
3.WWWの技術などを適用できる
4.タグを自由に定義できる
5.異なるソフトウェア間のデータ交換、共有を実現する
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XHTMLとは
XHTML(Extensible HyperText Markup Language: 拡張可能なハイパーテキスト
マークアップ言語)の略。
HTMLの問題点が明らかにされ、それを克服するために XMLが作られたとするな
らば、何故 XHTMLを作る必要があるのでしょうか?
例えば、タグを自由に定義する場合、自分で一意(唯一、ユニーク)な DTDを
作らなければなりません。構造化した文書を作ることはできても、初心者がタグ
を定義するなど、決してやさしいことではありません。
一方で、XMLの普及には大きな障害もあります。何よりも古いブラウザではXML
に対応しておらず、HTMLブラウザしか持たない人々は、情報から疎外されてしま
います。
Webの標準化を制定する機関である W3Cでは、こうした難問を解決すべくXHTML
を勧告しました。
XHTMLは、HTMLを継承しつつ、XMLの機能を取り込んだマークアップ言語です。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
XHTMLは、XML文書です。しかし、その作成は XMLよりもはるかに簡単で、誰も
がすぐに理解できる仕組みを持っています。そして何よりも、 XHTMLはそれほど
新しくないブラウザでも表示が可能です。
(ただし、MSIE5.0以降、Netscape6.0以降が推奨されています。)
XHTML対応ブラウザに関してはこちらを参照ください。
http://www.scollabo.com/banban/senior/relation/rel_02.html
XHTMLの拡張子は htmlです。(xhtmlとするとブラウザによって問題がある)
ブラウザはHTMLとしてパース(解釈)されますので、表示には大きな問題はあ
りません。
XHTMLに対するスキルが上がれば、どなたでもXMLのようにタグの設計ができて
XSLT、MashML、SVG、XML Schema などの XMLサブセットも利用することができ
ます。 XHTMLは、大きな可能性を秘めている新しい次世代マークアップ言語と
呼ばれる理由がここにあります。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
(注:XSLT、MashML、SVG、Schemなどに関しては、下記 URLを参考ください。)
XHTML用語集
http://www.scollabo.com/banban/senior/diction/
※ XHTMLを学ぶ上で、XMLは不可欠です。当講座では、XMLに関する解説とサン
プルの掲載を予定しています。
こうした背景の中で、HTMLは XMLへ移行するためのステップとして XHTMLが位
置付けられ、やがて、世界中の Webサイトが XMLに変換していくことを促してい
ます。こう考えると、もしかしたら、HTMLはその役目を果たし、次の新しいイン
ターネット社会の形成を想像しているように見えます。
※ XHTMLは XMLのサブセットとして定義されています。そのため、 XHTML作成
に関する規則や仕様は XMLを踏襲しています。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XHTMLの文書構造(XHTML1.1)
最新の XHTML1.1 では、HTMLで利用できた要素や属性の中に廃棄されているもの
があります。当講座の中で、非推奨とされてきたものはすべて利用できません。
文書の構造に、見栄えを特定する要素は使えなくなり、それらはスタイルシー
トに置き換えられました。(1部をのぞく)
つまり、文書は、あくまで論理構造を示すものに限定されたのです。これは、
ある意味で制作者にとっては「福音」となるでしょう。
もっと分かりやすく言えば、HTMLは「見た目」つまり、表現が中心であるのに
対し、XMLは意味中心です。XHTMLでは両者の機能を取り込んでいますので、文書
の構造は、「見た目」と「意味」が完全に分離しています。これは、タグの記述
に見栄えを特定する属性が一切使えないことを意味しています。
したがって文書全体の構造がシンプルで、非常に分かりやすいものとなります。
すべてのタグには終了タグを用います。そのため、要素の範囲がつかみやすく、
編集や変更が実に楽になりました。これは XMLの記述法です。
HTML4.01Strict(厳格仕様)で書き上げられた文書は、ほんの少しの手直しだ
けで、すぐにでも XHTML1.1 に変換することができます。 XHTMLは決して難しく
ありません。新たなツールやソフトも必要ありません。
当講座で何度も取り上げてきたHTMLの文書構造は、XHTMLもまったく同じです。
文書構造とは、文書の内容が構造的に書かれたもの、つまり、見出し、段落、リ
スト、表組などに分けられた構成そのものです。XML、XHTMLも同様の文書の論理
構造を持っています。
たとえば次の HTML文を見てください。文書の構造化を示したものです。
<body>
<h1>初心者のためのホームページ作り</h1>
<p>初めての <em>XHTML</em> 講座を始めます。</p>
<div>
XHTMLは HTMLと XMLの両方の機能を受け継いだ
新しいマークアップ言語です。
<div>
XHTMLは、決して難しいものではありません。
得られる利点の方がはるかに大きい言語です。
</div>
</div>
</body>
この文書の構造は以下の通りです。
body ━━━━━━ h1
┣━━━ p
┃ ┗━━━━ em
┃
┗━━━ div
┗━━━━ div
body直下には、h1、p、div要素があり、p要素の直下には em要素があります。
また、div要素直下には、もうひとつの div要素があります。
HTMLの要素の並びがツリー構造になっているのがお分かりでしょう。
文書を論理的な構造に記述する基本中の基本フォーマットです。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XHTMLの名前空間(Name Space)
HTMLにはなかった最大の特徴が、「名前空間」の利用です。
「名前空間」・・な、何じゃそりゃ!?
これが XHTMLが XML文書であることの証明であり、それはまさに、拡張された
機能でもあるのです。
名前空間は、タグの意味を定義するためにあります。言い換えれば、独自の
名前空間を作ることによって、任意にタグの意味を定義できるのです。
つまり、名前空間とは、独自に設定したタグの意味が記述してある文書の位
置を示すものです。
基本的な名前空間は W3Cが定義した文書を参照します。
<html xmlns="http://www.w3.org/1999/xhtml"> デフォルトの名前空間
xmlns とは、XML Name Spase(XML名前空間)を指定する属性です。
XMLでは自由に独自のマークアップ言語(タグセット)を設計できます。しか
し Web上で情報を共有するときに、同じ要素名が異なる要素タイプを意味して
衝突してしまう可能性があります。
この問題を解決するために XML名前空間は、それぞれのタグセットに固有の
URIを割り当て、名前を URIで修飾することでお互いを区別します。名前空間
は Web上で「意味」を明確に定義し、相互理解を可能にするために非常に重要
な役割を果たします。
次の例示はよく見られる XMLの構文です。
<title>初心者のためのホームページ作り</title>
<title>ばんばん</title>
この記述は、HTMLでは考えられません。しかし title要素が、ある時は文書の
タイトルであったり、またある時は制作者の名前だったりします。
この要素をそれぞれが違う意味であることを定義することによって、文書中
に記述することができます。
<body xmlns="http://www.scollabo.com/banban/ns/page"
xmlns="http://www.scollabo.com/banban/ns/profile">
<page:title>初心者のためのホームページ作り</page:title>
<profile:tile>ばんばん</profile:title>
"http://www.scollabo.com/banban/ns/page"
この名前空間では、titile要素が文書のタイトルであることを定義し、
"http://www.scollabo.com/banban/ns/profile"
ここでは、文書の作者が定義された名前空間であることが理解できます。
独自の名前空間は、世界中で唯一でなければなりません。他にある同じ名前
空間は使えません。そのために、http:// を使って一意のアドレスを指定しま
す。こうすることで、世界中でたった1つのユニーク(唯一)な名前空間を指
定することができます。
なお、xmlns属性は要素別に複数設定することができます。
この名前空間は、まさに「拡張可能」といわれる1つの証明です。講座では
いずれ名前空間の作り方を解説します。ここでは XHTMLがHTMLとどのように違
うのかを説明しています。
(注:サンプルで使用した名前空間の URIは実存していません、念のため。)
■Tips --- URI
URI とは、Unversal Resource Identifers の略で、Web上の文書やリソースを
参照するための言葉です。
従来、講座では URL(Universal Resource Locator)という言葉で統一して
利用してきましたが、死語になりつつある URLをいつまでも使い続けるわけに
はいきませんので、今回より URIと改めて記述していきます。
なお、URLは URIの中のサブセットとして定義されています。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆再び、何故 XHTMLなのか、
現状のHTMLを凝視してみると、HTMLそのものが翻弄され、もてあそばれています。
ブラウザ側の独自仕様がますます拡張されて、HTML自体が壊されつつあります。
本来、文書を論理的な構造を求めていたものが、HTML3.0/3.2 の頃から、ブラ
ウザ側が独自仕様を搭載し Web制作者に爆発的な人気を博し、いつの間にHTML文
書が物理的な構造に変化していきました。
同時に、HTML3.0/3.2 に勧告された要素には、物理的な要素や属性が多く存在
し、アクセシビリティから程遠いものとなっています。
当時の W3C内では混迷を深め、ソフトウェアメーカーや Web制作者たちから見
栄えの構造を強く要求され、渋々各ブラウザの独自仕様を標準仕様に制定してし
まった経緯があります。
そして、HTMLが障害を持つユーザにとって不便で敷居の高いものが大手を振る
ことになっていく中で、1997年、軌道修正のための HTML4.0が勧告されましたが
ダイナミックHTMLが流行し、更に混乱に拍車をかけました。1998年、矢継ぎ早に
発表されたHTML4.01は、時すでに遅しといった感が否めません。
W3Cはそういった現実に無関心でいられませんでした。Webという世界共通の土
台(インフラ)を特定の企業の都合で「言葉」が勝手に定義されてはならなかっ
たのです。世界のすべてのプラットフォームや環境に共通する「言葉」でなくて
はならなかったのです。
世界中ブラウザのシェア(市場占有率)が、95%を超えるマイクロソフト社の
Internet Explorer では、最新バージョンである 6.0 でも懲りもせずに新たな
独自仕様を追加しています。それは要素・属性にとどまらず、スクリプトやスタ
イルシートにまで触手を伸ばし、更なる拡大を狙っています。
(Netscapeでは、バージョン6.0 より独自仕様をすべて廃止しました。)
私たち制作者の側に、知らず知らずブラウザの独自仕様が、標準仕様だと勘違
いを起こさせているHTMLの現状は、決して良いことではありません。
同時に、Webの標準が独自仕様に蹂躙されてはならなかったのです。XHTMLは、
そうした現状の反省と HTML3.0/3.2の失敗から生まれたのではないのかと、私は
そのように推測しています。(あくまでも個人的主観です)
1999年、アメリカではアクセシビリティに関する法律が施行されて以来、特に
米国政府が運営している Webサイトではすべてバリアフリーなページに衣替えし
ています。そして Webに関するオーサリングにも、強くアクセシビリティを求め
多くのソフトウェア・メーカーはその方向に動いています。
SGMLが作られた本来の目的に帰結するため、W3Cは、XHTMLを作ったのではない
でしょうか。
XHTMLの登場で「HTMLは死んだ」と言う論評があるとすれば、むしろ私に言わ
せると「HTMLは殺された」と言い換えても、それほど的外れではないでしょう。
現在、チラホラと XHTMLで記述されたページが、決して多くはないけど Web上
に現れるようになりました。それらのページは間違いなくどのような環境の、ど
のようなプラットフォームの、そしてどのようなブラウザでも、その情報を正確
に伝えています。少なくとも制作側の意図に反することは絶対ありません。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆物理的な構造のHTML文書のサンプル(誤ったHTMLの記述例)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<title>物理構造のHTML文書</title>
<body bgcolor="#ffffcc" link=darkblue vlink=purple alink=green>
<font size=6 color=red><b>HTMLの物理構造</b></font>
<blockquote><font size=3>
HTMLは、本来<u>論理的な構造</u>をマークアップするためにあります。
決してこのような物理的な記述法をすることは、正しくありません。
</font>
</blockquote>
<table bgcolor=white align=center border=1 bordercolor=blue width=400>
<tr><th colspan=2 bgcolor="#ccffcc">
<font size=5 color=green><b>HTMLの物理要素</b></tr>
<tr><th>要素名<th>機能</tr>
<tr><td align=center>b<td>文字を太字にする要素</tr>
<tr><td align=center>font<td>文字のフォントを設定する要素</tr>
<tr><td align=center>u<td>下線付き文字を設定する要素</tr>
</table>
<br><br><br>
<marquee width=80%>
ホームに戻るのは、<a href="index.html">ここ</a>をクリックしてください。
</marquee>
<br><br>
</html>
実行結果
http://www.scollabo.com/banban/magazine/sample/mmsample_064.html
幸か不幸か(たぶん悲劇的な不幸)ブラウザは、このように誤った物理構造
でも、ちゃんと表示してくれます。そのために、制作者側でその誤りに気が付
かないのです。
もし、あなたがこの文書の物理構造を理解することができるなら、今すぐに
でも XHTMLを作成することができるハズです。XHTMLは難しくありません。
この講座が始まって以来一貫して、非推奨、アクセシビリティ、文書の論理構
造、スタイルシート、小文字の記述、終了タグの必要性などを論じてきた理由
がこの1点にあります。
それは、正しい文法によるHTMLの記述であり、XHTMLへの移行です。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML タグの解説 -- html要素
HTML文書であることを示すタグです。HTML文書の初めに必ず記述しなければなり
ません。そして、文書の終わりに必ず終了タグを記述します。
属性:lang(必須)
属性値:言語コード(ja、en、zhなど)
終了タグ:必須
子要素として持てる要素 : head、body、frameset
記述例
<html lang="ja">
html要素は、すべてのタグを内包するいわばルート要素に当てはめられます。
ルートは、ツリー構造を持ち、html要素はその頂点に位置します。
■ htmlのツリー構造サンプル
html
┏━━━━━━━┻━━━━━━━┓
haed body
┏━━╋━━┓ ┏━━┳━┻━┳━━┓
meta link title h1 div p ul
┏━┻━┓
table div
HTMLの文書構造を論理的に記述するためには、このツリー構造に則った形式が
求められています。すべてのインラインレベル要素は、文書構造を形成するブロ
ックレベル要素中に配置しなければなりません。
また、ブロックレベル要素は、文書構造を形成するために、その作法というも
のがあります。詳しくは、当メールマガジン第31号をお読みください。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
(今週のおさらい)Webページでは、XHTMLの補足的な説明を掲載しています。
http://www.scollabo.com/banban/magazine/review_034.html
次回は、XHTMLの作法について詳しく解説します。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
ただし、平日の昼間は会社勤めなので、返事が遅れることがあります。ご了承
ください。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ (ID 0000090196)
誤字・脱字・変換ミス・表現欠乏などには平にご容赦願います。なお、マガジン
のすべての記述に誤りや重大なスペルミスがある場合、叱咤と罵声と共に私まで
突きつけていただくと幸いに思います。
配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/senior/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆更新情報 --- HTML4.01逆引きリファレンス
目的別にまとめたリファレンスをアップしました。主だった項目に分けてそれぞ
れの方法やアクセシビリティなどの作法を掲載しています。ページ作成に役立て
れば幸いです。
逆引きリファレンス
http://www.scollabo.com/banban/rev/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
<えでぃた〜ず・るーむ>
久しぶりにのんびりとした正月休みを過ごせました。原稿の締め切りもなく落ち
着いて Webページ作りを楽しむことができました。
読者の皆様から多くの年賀メールをいただきました。この場を借りてお礼申し
上げます。家に来た年賀状よりも多かったのには驚きです。本当にありがとうご
ざいました。
今回は、2週間の間隔があったので、じっくりと原稿を書き上げました。その
関係で、かなりボリュームのある内容となっていますが、いかがでしょうか?
難解な部分もありますが、分からない点や疑問点がありましたら、遠慮なくご
質問ください。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002-2003 www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
Copyright(C) 2002-3003 banban@scollabo.com