HTML と CSS


簡単に Hyper-Text Markup Language (以後は,HTML と表記)と Cascading Style Sheets (以後は,CSS と表記)の概念を整理してあります. 自分自身の覚え書き.

内容が古いので,すでに参考にならない部分もあります.

目次

[あやしいページの目次に戻る]


HTML の役割

要約すれば,HTML とは論理的な文書構造をマークアップするためのものである. つまり,HTML は体裁(見栄え)は一切規定しないものであり,体裁は HTML を解釈するソフトウェアに依存することになる.

こういった事情にも関らず,Netscape Navigator 3.0以上で…解像度を…フォントサイズを…,などと書くということは,見る側のことを考えない自己満足である. なるべく多くの人に見てもらうには,特定のソフトウェアに依存していたらだめなのでは? それとも,ある特定の機能を使わないと人に伝えることができない情報なのだろうか?

[目次に戻る]


体裁の指定は CSS

体裁の指定をするために,Netscape Navigator (以後,Mozillaと表記)やMicrosoft Internet Explorer (以後,MSIEと表記)は,独自の要素をたくさん作ってしまった. それらの一部はHTML 3.2で取り入れられたが,本来の HTML の役割が失われるという側面を持っている. そこで,HTML 4.01 では体裁の指定を取り去る[注]ことにした. 体裁を指定するための機能は,CSS で行われることになった.

別に CSS だけがスタイルシートではありません. 他のものを用いても良いのです.

[目次に戻る]


CSS のメリット

HTML から体裁の指定を分離し,CSS で行うことのメリットは以下の通り.

HTML の役割が明確

HTML は文書の論理的な構造の記述に徹することができる. これは,検索エンジンなどが HTML を解釈しやすくなることを意味する. 例えば,見出しを集めることで目次の作成などが容易に行える. 独自の拡張を行っていた場合には,そのようなことは極めて困難になる.

ソフトウェアに依存しない

WWW をソフトウェアに依存せずに利用できるということは重要である. ソフトウェアに依存しなければ誰でも利用できるからだ. CSS を解釈できないソフトウェアは,従来の HTML と同じように表示するから何も問題は発生しない. CSS を解釈できるソフトウェアならば,自分の意図したような体裁で相手に見せることができる.

体裁の変更と統一が容易

HTML で無理矢理体裁を作った場合,体裁の変更をするには全てのファイルを書き換えねばならない. CSS を別のファイルとして用意すると,そのファイルを別のファイルから呼び出して使うことができるようになる. だから,一つのファイルの内容を変更するだけで体裁を変えることができる. また,体裁の統一を図ることも簡単になる. それにすべてを指定しなくても前の指定を継承(だからCSSという名前)してくれる.

[目次に戻る]


ソフトウェアの対応状況

ここでは,Mozilla と MSIE のみを取り上げる.

Mozilla

Mozilla 4.0x はスタイルシート対応を謳っていはいるものの,実際の対応状況はひどいと言わざるをえない.

これが実際に呆れ返るほどひどい. いかにひどいのかは,すみけんリソースを参照していただければよい.

MSIE

MSIE 3.0x でも対応をしていることになっているが,CSS の解釈に致命的なバグがある. スタイルシート対応というのは問題あり.

MSIE 4.0x ではかなりよく対応している. 今のところ,まともに解釈できるのは MSIE 4.0x くらいであろう.

[目次に戻る]


CSS のレベルについて

CSS にはレベル1(CSS1)とレベル2(CSS2)がある. CSS2 では,CSS1 よりも豊かな表現が可能. ただし,現状において CSS2 に対応しているソフトウェアがどの程度あるのかはよく分からない.

[目次に戻る]


HTML 4.01 について

HTML 4.01 の大きな特徴をまとめると以下のようになる.

論理構造と体裁の分離

ほとんどの人が,要素(elements)とタグ(tags)の区別が出来ていないような気がする. これが HTML に対する大きな誤解を生んでいるような… 以下の文章を読むと参考になるはず.

Elements are not tags. Some people refer to elements as tags (e.g., "the P tag"). Remember that the element is one thing, and the tag (be it start or end tag) is another. For instance, the HEAD element is always present, even though both start and end HEAD tags may be missing in the markup.

私の拙い日本語訳

要素はタグではない. ある人々は要素をタグとして参照している (すなわち,“P タグ”など). 要素とタグ(開始タグと終了タグ)は別のものであることを忘れるな. 例えば,HEAD の開始タグと終了タグの両方がマークアップされてなくても,HEAD 要素は常に存在する.

つまり,開始タグと終了タグがなくても,見出しは見出し,段落は段落として文書中に存在する. 考えてみれば文書中に段落や見出しがあることは当たり前ではないか. 見出しだから目立たせる,段落だから分かるように表示をしたい…,というのがまっとうな考え方であって,マークアップしたから見出しになるのではないのだ! で,例えば目立つように表示するには色々な方法がある (字を大きくする,色を付ける,アンダーラインを引く,…) 訳だから,表示を規定する必要はない訳だ.

すみけんたろうさんの「スタイルシートWebデザイン」(技術評論社)が参考になる.

アクセス性の向上

HTML 4.01の規格

以下のように3つの規格がある.

HTML 4.01 Strict

体裁に関しては全てスタイルシートで行うことを前提としているので,体裁に関する要素や属性は廃止されている.

HTML 4.01 Transitional

FONTCENTER要素など,体裁に関する要素や属性は廃止されることになっている. 知らなかった人は要注意! これらの廃止される要素も容認するのが HTML 4.01 Transitional. 名前の通り移行期のもの.

HTML 4.01 Frameset

フレームを利用するためには,これに従う必要がある. フレームは HTML 4.0 (HTML 4.0 は,HTML 4.01 に上書きされた)ではじめて取りいれられた. 以前は,一部のソフトウェアの独自拡張にすぎなかった.

フレームについて

フレームを使っている人の気持ちはよく分からない. 画面が分割されると横スクロールさせないと見えなかったり, 複数のファイルの表示に非常に時間がかかったりする.

特に,最悪なのがフレームに対応していないソフトウェアを用いたときに NOFRAMES の中に,フレーム対応のソフトウェアで見て下さいしか書いていないものがあることだ. フレームに対応していない場合でも,NOFRAMES 中は普通に記述できるのだからリンクなどを書いておいて欲しい. それとも,フレームを使わないと表現できないようなものなのだろうか?

付記

フレームを使わないと表現できないものがありました. 日本イソターネット協会内のJドキュメソト RAQ

[目次に戻る]


参考文献

HTML と CSS に関しては以下が参考になる.

[目次に戻る]


[あやしいページの目次に戻る]