ホーム 頭の体操 お役立ちソフト 視 角 ザ・掲示板 リンク




スタイルシートとHTML4.0



スタイルシートについては、これを読んでいる方のほうが或いは詳しいかも知れません。しかしスタイルシートのことをよく耳に(目に)するがよくわからない、という方もいらっしゃると思うので、ここで取り上げてみようと思います。

Internet Explorer はすでにバージョン 3.0 の頃からスタイルシートをサポートしていましたが、Internet Explorer 4.0 と Netscape Communicator 4.0 という2大ブラウザがスタイルシート対応になったことで、スタイルシートがポピュラーなものになってきました。 スタイルシートには実はいくつかの言語というか種類がありますが、一般的には最も普及している CSS(Cascading Style Sheet)のことを指すのが普通です。以下に言及するのも専ら CSS についてです。

ちなみにこのページも CSS level1 を使って書かれており、またできるだけHTML4.0 の仕様に沿ってページを作成しました。ですからブラウザやそのバージョンによっては正常に表示されていないと思います。 このページは Internet Explorer 4.0 以上で見ることを推奨します。別にひいきするわけではありませんが、現状ではこれが広く普及しているブラウザとしては最もHTML4.0 に対応していますから。

ではスタイルシートとは何か?一口にわかりやすく言えば、ホームページの見てくれを良くするための言語、ということになります。初期HTMLが開発され、WWWが始まった当初は、インターネットが今ほどポピュラーなものになるとは予期していなかった。 HTMLは元来、学術的な文書などをハイパーテクストで作成するための言語で、それによって見出し・本文・表といった文書の大まかな枠組みが組み立てられれば良かったのです。

しかしWWWの普及に伴い、Web ページの応用範囲が広がると、HTMLで作成したページにもビジュアルなレイアウトが求められてきます。その結果、<FONT> タグで文字の大きさや色を決め、<CENTER> タグで文章や画像を中間に配置し、<TABLE> タグで文章のレイアウトを整えるということが行われるようになりました。 元来「見出し1」〜「見出し6」を意味していた <H1>〜<H6> タグが字句のサイズを表すためのタグと考えられるような誤解も生じます。これは、文書の論理構造を定義するというHTMLの本来の目的から言えば、逸脱でした。

のみならず、HTMLのタグだけでページのレイアウトを作成するのは、ある意味で職人芸的な知識を必要とします。例えば画像をページの左右の中間に表示したければ <CENTER>〜</CENTER> で囲みますが、右寄せしようとしても <RIGHT> タグって、ありませんね。 行間を1行空けるには <P> を用いますが、2行以上空けるには <P> ではなく <BR> を重複させなければならないなど、初心者には混乱させることばかりです。<TABLE> タグでページをレイアウトするのも、一種の職人芸です。

CSS に代表されるスタイルシートはその名の通り、Web ページのスタイル、レイアウトを表示するための言語です。HTMLに取って代わるものではなく、HTMLと共同してビジュアルかつ整合性のある Web ページを実現しようとするものです。それによってHTMLは Web ページの論理構造を、スタイルシートはそのレイアウトを定義するという役割分担ができ、 W3C(WWWコンソーシアム)の提唱するHTML4.0 の方向性に合致するだけでなく、HTMLのタグだけではできなかったレイアウトもスタイルシートによってできるようになりました。

スタイルシートは、一度覚えてしまえば初心者にもわかりやすい言語と言うことができます。 例えば文章(段落)の位置設定はタグだけの場合、右寄せ・左寄せには主に <DIV> タグ、センタリングには <CENTER> 或いは <BLOCKQUOTE>(行頭揃えの場合)タグなどを使いますが、CSS では <DIV>、<I>、<P> など複数のタグに text-align の位置指定をしてやることで、右寄せ・左寄せ・センタリングを統一的に定義することができるだけでなく、マージンを数値指定することで余白を思いのままに取ることができます。 行間の余白を取るのに、<BR> を十数個も繰り返すようなこともなくなるわけです。

初心者だけでなく、Web ページ作成の熟練者にとってもスタイルシートはこれまでより遙かに達意なページ作成の道を開くものです。マージンのほか、フォントのサイズ・太さ・行間幅・文頭のインデントなども精密な数値指定ができるので、表現の幅がずっと広がります。 個々のタグをIDで指定できるようになったことで、ページ全体の動的表現が可能となりました。JavaScript のようなスクリプトはこれまでボタンやテキストボックスなどのフォームの要素に対してのみ NAME 属性でやりとりできましたが、文中の文字や画像をID指定してやることで Web ページ自体をランタイムに操作することができるようになったのです。(いわゆる Dynamic HTML。)

W3Cが提唱するHTML4.0 は、ページのレイアウトがスタイルシートで行えるようになったことで、今後HTMLのタグは専ら文書構造の定義にのみ用いるよう求めています。これまでよく使うタグだった <CENTER> タグや <FONT> タグなどは非・推奨・・・ということは将来的には廃止される方向に向かうと言われます。 それらは文書構造と言うよりレイアウトに関係するタグだからであり、スタイルシートで代替できるからです。LINK、VLINK、ALINK も現在まで <BODY> タグの中で定義することが普通ですが、これも将来的にはやめてスタイルシートで定義しろと言っています。

Web ページのレイアウトが今後スタイルシートに一任される・・・しかもスタイルシートはいいことずくめ、となれば、今後は全面的にスタイルシートを採用しよう、という気にもなります。しかし、ちょっと待って下さい。 CSS は Internet Explorer で 3.0 から、Netscape で 4.0 から対応になったばかりであり、それ以外のブラウザ・バージョンではスタイルシート使用ページは正しく表示されません。また Internet Explorer と Netscape Communicator では共に CSS 1 に対応しているとはいえ、スタイルシートの表示の仕方に一致しない面もあり、 IE で表示できて NC で表示できない属性も多いのです。

いまだ過渡期にあるスタイルシートを自分の(自社の) Web ページに全面採用するならば、必ずスタイルシート非使用の代替バージョンを用意して置いたほうがいいと思います。しかし2,3ページならいざ知らず、数十ページ・数百ページもある場合はちょっと大変ですよね。 もっと賢明なのは、スタイルシート独特の機能は仮にそれが古いブラウザの使用者には見られなくても深刻な問題を引き起こさないような表現に当面は限定することです。これに対して <FONT> タグや <CENTER> タグは古いバージョンの IE や Netcape でも表示できますから、できるだけ下位バージョンとの互換性のあるオプションを選択するに越したことはありません。 とはいえ、今後のためにスタイルシートを学んで置く価値があることに違いはないでしょう。

次回は、CSS を使った Web ページについて、もう少し具体的に見てみることにします。




次のトピックは「スタイルシートの基本」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで