HTML概説

3rd Edition.


1.スタイルシートで気づく、根本的な誤解



1.1.見栄えの調整はCSSの仕事


1.1.1.スタイルシートの仕事

スタイルシート(CSS)を用いれば、HTML文書の見栄えを根本的に変更できる。各要素ごとに、フォントサイズや行幅や余白などの指定がいろいろ細かく可能なのだ。(注:「要素? タグ? 」については後述。)


1.1.2.スタイルシート活用の一例

たとえば、スタイルシート無しでの標準的な見栄えでは、見出し要素のレベルの違いはフォントサイズの違いで表現される。

図:もと[標準の見栄え]

でも、次のシートを付ければ、表示結果は変更される

- - - - - - - - - - - - - 
H1{ font-size: xx-large;}/*H1をずば抜けて大きく*/
H2, H3{ font-size: large;}/*H2とH3は同じ大きさに*/
H2{ border-bottom: 1pt solid}/*H2の下にボーダーラインを*/
H3{ margin-left: 3em;}/*H3は左に余白を*/
/*「em」は「一文字分」のサイズ*/
- - - - - - - - - - - - - 

図:シート[いじってみました]

たった数行の記述だけで、ここまで変わるのだ。便利でしょ? 


1.1.3.スタイルシートをHTML文書と連携させるには

HTML文書をスタイルシートと連携させるのも、簡単。文書中に、LINK要素を用いて「連携します」と宣言するだけ。WWWブラウザは、UAとしての責任から、HTML文書の読み込みと同時に連携シートを読み込んで、そのデータをもとに表示を決定することになる。

- - - - - - - - - - - - - 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4,0//EN">
<HTML>
<HEAD>
<TITLE>HTML4.0(W3C Recommendation 18-Dec-1997)解説</TITLE>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="normal.css">
<LINK REL="STYLESHEET" TITLE="fancy" TYPE="text/css" HREF="fancy.css">
<LINK REL="ALTERNATE STYLESHEET" TITLE="compact" TYPE="text/css" HREF="small.css">
<LINK REL="ALTERNATE STYLESHEET" TITLE="compact" TYPE="text/css" HREF="mini.css">
</HEAD>
- - - - - - - - - - - - - 

1.1.4.スタイルシートの位置づけ

スタイルシート(CSS)は、HTML文書とは独立したファイルで、HTML文書の各要素の見栄えを指定するも。その仕様はW3Cによって決定され、公開されている。

スタイルシートそのものはテキストファイルなので、記述に「専用ソフト」は必要ない。テキストエディタと「解説書あるいは仕様書」があればOK。

スタイルシートは、HTML文書の拡張ではない。独立した別の仕組み。したがって、HTML文書はHTML文書だけで完結している。スタイルシートをoffにしても、文章はきちんと読める。ということは、CSS非対応UA(MOSIACやmozilla3.x以下など)はスタイルシートを処理できないが、ちいとも困らない。だって、HTML文書は伝達できるんだもの。

Mozilla拡張のBLINK要素やIE拡張のMARQUEE要素なんかは、見栄えのための処理をHTML文書の中で行おうとした。すると、それに対応していないWWWブラウザは、HTML文書そのものを処理できなくなる。これにくらべると、スタイルシートの仕様は、如何にさまざまな点に配慮して作成されたかがわかるだろう。(CSS処理にバグのあるIE3.02やmozilla4.0xを使っているひとには問題ができるけど。そんな馬鹿なUAを使用するのは今すぐ止めましょう。あるいは、スタイルシート機能をoffにしましょう。)


1.2.HTMLの仕事の範疇


1.2.1.では、HTMLの仕事ってなに? 

あれ、すると、みなさんがこれまで信じ込まされてきた「HTMLの仕事」はいったいなんだったんだ? 「Pタグは2行改行します」「H1タグは文字を大きくします」「BLOCKQUOTEタグは余分なマージンを用意します」…これらは、全部間違った説明だ。

もうおわかりだと思うが、改行幅や文字のサイズや余白はスタイルシートで指定するものであって、HTMLで指定するものではない。そもそも、HTMLは文書の見栄えを全く指定しないものなのだ。みなさんが教え込まれてきたのは、ある特定のWWWブラウザにおける標準の表示例に過ぎないのだ。

そもそも、HTMLは文書の見栄えを指定するためのものではない。では、なんのためのものなのか。

実は、文書の構成を明示するためのものなのだ。


1.2.2.SGMLの思想

スタイル指定に関して、次の問いに答てみよう。

「文字サイズを変えたから、その語句が見出しになったのか? 」

「見出しだと決めたから、文字サイズを変えたのか? 」

もちろん、答えは後者だ。

文章は、「見出し」「引用文」「段落」といったさまざまなパーツによって構成されている。そして、この「パーツ」の違いが文章表現においては重要だ。文書表示においてもこの「違い」をアピールしたいから、普通はパーツごとに見栄えを変更する。「見出し」は「大きな文字で真ん中寄せ」、「強調語句」は「太字」といった具合だ。こうすると、自然に文章表示にめりはりがつき、しかも、文章の構成を理解するのに役立つ。

しかし、見栄えだけで文章内容を把握するのは難しい。たとえば、「見出し」も「強調部分」も「太字」で表示していた場合、文章中に「太字」が出てきた時に、それが「見出し」なのか「強調部分」なのかを判断する絶対の根拠は無い。つまり、見栄えだけではあいまいなのだ。

SGML(Standard Generalized Markup Language)は、その曖昧さを取り除くために、「文章の構成を、直にパーツの名前をもちいて明示する」という手法を提案した。たとえば、見出しならば「<見出し>HTMLについて</見出し>」といった具合だ。これならば、誤解なく文書構成を表現できる。

(専門用語として、「パーツ」を「要素」という。文書は要素による構成物、というわけだ。さらに、記号「<」や「>」で書かれた「そのテキストの意味合いを明示するためのモノ」を「タグ(荷札)」といい、要素の名前を入れ込んで使う。要素の位置を「ここから――ここまで」と指定するのだから、開始タグと終了タグがセットになる。)

そして、SGMLの仕組みは、SGML文書の見栄えに関しては何も規定しない。文書の再生具合は、再生用ソフトウェアに一任されるわけだ。でも、通常は「スタイルシート(一般用語)」と呼ばれるものを併用することになっている。(スタイルシートは見栄え指定の専門家なのだ。)


1.2.3.HTML∈SGML

後に詳しく述べるが、SGMLにおける文書記述には2つの段階がある。1つは、文書の定義を定義する段階(文書型定義とSGML宣言の作成)。1つは、定義された「文書の書き方」(文書型定義)にしたがって個々の文章を書く段階。

でも、「文書の定義」は一度作れば使いまわしが効く。数学の公式だって皆が発明するものではないように、皆がSGMLをゼロから使う必要はない。というわけで、通常は権力者がSGMLの第1工程を済ましてしまって(つまり、文書型定義を作ってしまって)、みなは実際の文書(インスタンスという)だけを書くのが普通だ。このようにつくられた「文書記述体系」を「SGMLアプリケーション」と呼ぶ。

HTMLは、one of SGML applicationである。その文書型定義は定義済みであり、普通の人はその定義にしたがって文書を記述しなければならない。当然ながら、HTMLの目的は文書の構成を明確にすることにあり、見栄えの規定は扱わない。そして、現在のところ、HTML文書の見栄えを規定するためには、スタイルシート(CSS)を併用することになる。


1.3.HTMLの混乱の歴史


1.3.1.スタイルシートの不在

ところで、WWWが誕生したのは1990年、WWWブラウザMOSAICにより爆発的に普及し始めたのは1993年、CSS1が発表されたのは1996年だ。つまり、HTML文書のスタイル指定は6年間(あるいは3年間)放置されていた(注:実際には考慮されていたが、標準化には至らなかった)。驚異的な成長を見せたWWWの発達過程と並べてみれば、“大変長い時間が経った”と感じざるを得ない。


1.3.2.予期せぬデファクト・スタンダード

さらに、史上初の支配者「MOSAIC」は、利用者に「文書の表示結果を調整する手段」を提供しなかった。つまり、標準の見栄えしか許さなかったのだ。それが、「H1は大きな文字、H2は少し小さくなって、順にH6までうんぬん」とか「Pは2行改行する」「BLOCKQUOTEは余分な余白を取る」である。(これを指して、私は「MOSAIC系表示」と呼ぶ。)

さらに、Netscape Navigator(以降、Mozilla)もMicrosoft Internet Explorer(以降、IE)も、利用者に「文書の表示結果を調整する手段」を調整しなかったし、MOSAICが規定した標準の見栄えを完全に受け継いだ。(というか、MozillaはMOSAICの開発者が作ったものだし、IEもMOSAIC互換ソフトSygrassをMSが買収したものだから、当然といえば当然だ。)

このようにして、予期せぬデファクト・スタンダード「MOSAIC系表示」が誕生した。その結果、MOSAIC独自の見栄え表現に過ぎなかったアレらが、あたかも「HTMLが規定する見栄え」であるかのように受け止められた。

(その誤解に基づいて本がたくさん出版され、皆さんは「MOSAIC系表示」がHTMLの定義だと信じ込まされてきた。以降ずっと混乱は続いている。)


1.3.3.見栄えを直接指定する独自要素の導入

ところが、Mozillaの開発者自身がHTMLの思想を理解していなかった(と思われる)。彼らはHTMLを「文書の見栄えをタグで指示するもの」だと考え、そのようにソフトウェアを肥大化させていった。すなわち、BLINK効果、FRAME効果、LAYOR効果などの導入である。これらは「タグ」で指示を出すのだが、どう考えてもタグが文書構成要素を意味していない。同様に、MSもMARQUEE効果を導入した。

これだけベンダが宣伝すれば、一般人がHTMLについて誤解するのも無理はない。

いまや、「文字のサイズを変更するには、H1〜H6タグを用います」「表示に大きなマージンをとるには、BLOCKQUOTEタグを用います」と書いてある市販の本を探すことすら難しくない。これでは、あまりにも本末転倒だ。


注。Netscape社の名誉のために一言追加。

彼らがHTMLを理解していないのは事実だが、実は最初のWWW(もともとはソフトの名前だったのだよ)を作ったTim Berners-Lee(現W3Cディレクター)だって似たようなものだった。いや、HTMLを発案したのは彼なのだが、彼が発案した最初のHTMLはSGMLアプリケーションではなく、もっとデタラメなものであったらしい。例の「お尻P」は彼の勘案だ。

HTMLがれっきとしたSGMLアプリケーションになったのは、HTML2.0制定時、1995年12月だ。おや、win95よりも若いんだね。もちろん、MOSAICよりもHTML2.0のほうが若いんだ。したがって、MOSAICがお尻Pなのは致し方ないことだ。

でもね、Netscape社は、HTML2.0がRFCになったあともその思想を取り入れなかった。これは罪だよ。



1.3.4.怪しいテクニック

そのような誤解の中で、マークアップを流用して見栄えを調整する「テクニック」が数多く生み出された。以下に、代表的な“テクニック”とその問題点を紹介する。

◆ 特定のソフトウェアの表示結果に依存(マークアップの無意味化)

この“テクニック”にしたがっていると、HTMLマークアップの本来の目的である「見出しの明示」などが全うできない。「見出しとして指定されているのが見出しだ」という単純なはずのルールが守られていないのならば、文書の読み手はどのようにして見出しを探せばよいのか? 

◆ 拡張マークアップの多用(一般性の崩壊)

(注:独自拡張が後にW3Cに採用されるケースもあります。たとえば、FONT・CENTER・TABLEはもともとはNetscape社の独自拡張要素でしたが、HTML3.2で採用されました。FRAMEはHTML4.0で採用されました。)

◆ すべてを画像として表現

一般に、影付き文字や会社のロゴマークのような特殊な装飾つきの文字は、テキストではなく画像としてHTML文書に入れ込る。これが極端にこうじたのか、文章全体を画像にして公開しているケースに遭遇することがある。つまり、独自のDTPソフトウェアなどを用いて整形した結果のスクリーンショットをもちいているのだ。他にも、「全部Java」「全部plug-in」というケースがある。

馬鹿げている。費用対効果を無視している。スケーラビリティって考えたことあるのだろうか? 

おそろしいことに、富士通さんは「文書の文字を全部ビットマップにして、HTML文書を画像に自動変換するソフト」を販売している。

「従来は、再生がわが同じフォントを持っていないと、こちらの意図した見栄えを再現でいませんでした。このソフトによって、そんな問題はなくなります」

ク、クレイジーだ!

◆ すべてをTABLEとして表現

TABLEは「表」であって、レイアウトの道具ではない。でも、そのセルをレイアウト目的で使用する人は多い。あげくに、単に上下左右のマージンや、語句どうしの位置関係を調整する効果を狙ったものがほとんどなのだ。そんなのは、スタイルシート1〜2行で苦もなく実現できるのに。

(ときに段組を行う人もいる。でも、段組ってのは「ページメディア」(すなわち、紙など、紙面に固定サイズがあるもの)のための概念であって、「スクロール可能なコンピュータ画面」のためのものではないんだよ。CSSのようにメディアごとに再生形態を指示できるならともかく、どうしてコンピュータ画面向けに段組をしたがるのかなあ。)


1.4.混乱から抜け出すために


1.4.1.意識の転換

「どうしてマージンをとるためにBLOCKQUOTE(引用ブロック)なんていう名前の要素を使うのだろう。どうしてちょっと余白を取りたいだけなのに、テーブルだのセルだのを考えなければならないのだろう。HTMLって難しい。これじゃあ、“気軽にWWWで文書公開”なんて無理だなあ。」

こう考えてしまうのはもっともかもしれない。しかし、それは「本来HTMLにはできないこと」を無理やりHTMLで行おうとしていたのがまずかったのだ。

HTMLでスタイルを調整しようとするのを止めよう。HTML文書を本来の文書構成を明示するためのものに戻そう。このように「出発点と到達点」を定めると、(HTMLの設計思想とマッチするためか)HTMLはにわかに簡単で単純なものになる。


1.4.2.スタイルシートを併用しよう

ところで、HTML文書といえども出版物だから、文書作成者がその見栄えを支配したがるのは当然。だから、ぜひスタイルシートを使って欲しい。いまのところWWWで「スタイルシートの入門」を書く予定はないが、拙書が出版されているので、それを読んで欲しい。


1.5.スタイルシートを使う利点

先に紹介した怪しいテクニックを用いる場合とは異なり、スタイルシートを用いた見栄え調整には以下のような利点がある。このことを逆に捕らえれば、HTMLで見栄えを指定することがいかに「無理のある仕事」であったのかを実感できるでしょ? 


1.5.1.シートの記述しやすさ

◆ テキストファイル

CSS1仕様のスタイルシートはテキストファイルとして記述されるため、スタイルシート作成のために特別なソフトウェアを用意する必要はありません。

◆ 直感的なキーワード指定

簡単なキーワードを記述するだけで、文字サイズや色・マージン・インデント・行幅などを自在に設定できます。マージンならば[margin: 3cm]、フォントサイズならば[font-size: 13pt]など、直感的な英単語を利用するため学習も容易です。また、画面サイズなどに合わせた相対指定も可能です。

◆ 指定効果の汎用性の確保

指定の効果は仕様書に明示されているため、どのソフトウェアに対しても同様の効果を期待できます。

◆ データサイズの軽量化

“継承(inheritance)”という仕組みを上手に活用すれば、少しの指定でも全体のスタイルを調整できます。


1.5.2.HTML文書との相性の良さ

◆ HTML文書とスタイル指定の分離

HTML文書から独立した仕組みでスタイルを指定するため、HTML文書がすっきりとわかりやすいものになります。

◆ スタイルシートの再利用

ひとつのスタイルシートを複数のHTML文書から利用することが可能です。また、スタイルシートの中に別の既存のスタイルシートを取り入れる(import)ことも可能です。

◆ 非対応ソフトウェアへの考慮

スタイル指定がHTML文書から分離しているため、対応していないWWWブラウザは、「スタイルシートとHTML文書」を受け取ったとしても、単にHTML文書だけを処理できます。したがって、スタイルシートを用いた場合でも、非対応ソフトウェアを用いている人にも支障なく文書内容を伝達できます。

◆ 読者の都合にあわせたスタイル調整

カスケーディングという仕組みによって、読者独自のスタイルシートを持ち込み、表示を調整することも可能です。そもそも、読者はスタイルシート機能をオフにもできます。このように、スタイルシートを用いたHTML文書は、読み手の都合にあわせて柔軟に変化させられます。

◆ スタイルシートの選択肢の提供

HTML文書そのものを書き直さなくても、別のスタイルシートに付け替えるだけで、見栄えを大きく変更できます。また、一つのHTML文書にあらかじめ複数のシートを指定しておき、読者に好みのシートを選択してもらうようなプレゼンテーションも可能です(


1章の付録


CSS1プロパティの概要

以下に示す属性(プロパティ)すべてについて、各要素ごとに自由に設定可能。






ご意見ご要望及び苦情はE-MAILにて

e-mail to : jy3k-sm#!#!asahi-net.or.jp