The Principle of CSS basis
初心に戻って振り返るCSS基礎知識の総復習
CSSの大まかな歴史や概要をおさらいしておこう。
改めてCSSの歴史を振り返る
CSS(Cascading Style Sheets)はHTMLの表示方法を指定する目的で設計されたスタイルシート言語だ。HTMLはもともと表示方法を指定する言語ではなく、文書構成（文書の構成要素の役割や意味）を示すための言語であったため、その表示方法を設定するための別の言語が必要であった。そのため、1994年のW3C設立以前の段階で、CSSの草案はすでに公開され、HTMLとセットで使われる準備が整っていたのである。
しかし、インターネットが爆発的な大ブームになり、次々とリリースされていく新しいバージョンのブラウザでは、W3Cの意図と異なる方向へ進化してしまう。それぞれのブラウザが独自にHTMLの要素や属性を拡張し、CSSを使わない表示方法を指定するという方向へと進み始めてしまったのだ。それを危惧したW3Cのメンバーたちは、CSSの使用を２段階で公開することを計画した。少しでも早く第一弾を公開してHTMLの拡張を食い止め、第二弾で現実的に使える十分な機能の備わったCSSを用意するというもの。それが1996年に公開されたCSS1と、1998年に公開されたCSS2のそれぞれの役割だったのである。
実際には、それとは別に1997年の段階で、W3Cによって「Positioning HTML Elements with Cascading Style Sheets」という草案も公開されている。これはおもにCSS1の配置に関する機能を補うための仕様で、具体的にはposition、left、top、width、height、clip、overflow、z-index、visibilityが新しいプロパティとして提案されている。結果として、これらの機能は翌年公開されるCSS2に組み込まれることとなった。
このように、現在広く利用されるようになりつつあるCSS２の仕様は、1998年の段階ですでに公開されていたにもかかわらず、現実的なものとして使われ始めたのは数年の時を経た2002年から2003年ころからだ。そのおもな理由としては、まずはCSS2を使うことができるレベルに達したといわれているブラウザの登場が2002年以降だったこと。そしてそれを後押しするようにWeb標準を基本的な前提とするSEOやアクセシビリティが浸透し、ブログなどのCSSを使った新しいテクノロジーがここ数年で流行し始めたからだと考えられる。
| 1994年 | 10月 | CSSの草案Cascading HTML style sheetsが公開される。 W3C設立 |
| 1995年 | 11月 | HTML2.0がRFC1866として公開される。 |
| 1996年 | 12月 | CSS1がW3C勧告として公開される。 |
| 1997年 | 1月 | HTML3.2がW3C勧告として公開される。 Positioning HTML Elements with Cascading Style Sheetsの草案が公開される。 |
| 12月 | HTML4.0がW3C勧告として公開される。 | |
| 1998年 | 4月 | HTML4.0の改訂版が公開される。 |
| 5月 | CSS2がW3C勧告として公開される。 | |
| 1999年 | 1月 | CSS1の改訂版が公開される。 |
| 12月 | HTML4.01がW3C勧告として公開される。 | |
| 2000年 | 1月 | XHTML1.0がW3C勧告として公開される。 |
| 4月 | CSS3.0の草案が公開される。 | |
| 2002年 | 8月 | XHTML1.0の第二版公開される。 CSS2.1の草案が公開される。 |
Web標準に準拠するだけではないCSSを使うことのメリット
CSSを導入することのメリットは、Web標準に準拠することのメリットとはほぼ同じと考えていいだろう。数年前までは、どのブラウザで見ても同じように表示されることを中心に考えて制作されてきたわけだが、現在ではアクセシビリティやSEOなど、表示以外にも考えなければならないことが多くある。そして、それらをトータルでもっとも効率よく実現するためのベースとなるのが、Web標準に準拠することなのだ。逆にいえば、昔ながらの制作方法を続けていたのでは、現在のWeb政策では相当な無理をすることになる。
CSSを導入し、Web標準のXHTML＋CSSスタイルに変えることで得られるメリット
CSSについてのみ注目しても、もちろんそれを導入するメリットは少なくない。まずHTML側でレイアウト用の複雑なテーブルを使う必要がなくなるため、HTMLソースが非常にシンプルになる。そのため容量も軽くなり、Webページが表示されるまでの時間が劇的に短縮される。今はブロードバンドの時代だから表示速度なんて気にする必要はないと思う人もいるかもしれないが、何重にも入れ子になったテーブルの表示はローカルのファイルでもそれなりに時間がかかるし、一度に多くのページをまとめて開くユーザーだっているのだ。すなわちHTMLソースの容量が軽いということは、現在でも大きなアドバンテージとなる。またCSSを使えば表示方法を一元管理できるので、一度にサイト全体の表示を変更できるということも、もちろん大きなメリットといえるだろう。
Web標準に準拠すべき理由について、詳しく解説されている
The Web Standards Project
http://www.webstandards.org/learn/faq/
ブラウザのバージョンは深刻……CSS使用時の問題点
多くの利点をもつCSSであるが、だからといってCSSを使うとすべてがうまくいくかといえば、現時点ではけっしてそうではない。比較的新しいブラウザを使えば大きな問題は出てこないのだが、たとえばInternetWxplore(以下、IE)のバージョン6以前で読み込んでみると、指定したとおりのデザインで表示されないことが多い。さらに以前のバージョン、たとえばIE5やIE4の世代までさかのぼると、表示の問題はより深刻な問題として現れてくる。不具合をなくすためにIE4世代のブラウザへCSSを適用しない設定も行えるし、IE5世代で出てきた問題の解決方法もほぼ確立されているとはいえ、制作者がいくらまちがいのない指定をしても場合によっては正しく表示されないことがあるというのは、非常にやっかいなことだ。しかも、そうなる可能性があることがわかっているため、CSSを変更するたびに多くの環境で表示テストをしなければならない。
CSS使用時に発生する作業と問題点。このような作業を手際よくこなすには、慣れと経験が必要となる。
いったんCSSになれてしまえば、そもそも問題が発生しにくいコードが書くようになるし、問題が発生してもすぐに解決できるようにもなる。めんどうな表示テストも短時間で片付けられるようになるだろう。しかし、そうなるまでの間には、それなりの数と量の実践的な経験が必要になってくる。つまり、今これからCSSを導入しようと思えば慣れるまでのある程度の期間、効率的には作業できないかもしれないことを覚悟しなければならないということだ。
IEを中心とした各種ブラウザで発生する問題とその解決方法について詳細に解説しているサイト
Position is Everything
http://www.positioniseverything.net/
とはいえ、それは逆の視点から見れば、少しでも早い時期から始めて慣れておいたほうがよいということも表している。将来的にはCSSがスタンダードになってくることは明確なので、まだCSSで作成していない人はこれを機会に本格的な移行を検討してみてはいかがだろうか。
従来のHTMLとは異なるXHTML＋CSSデザイン
オーサリングツールを使ってHTMLだけでレイアウトをする場合と比較すると、Web標準に準拠したXHTML＋CSSデザインは、まるで違ったプロセスで制作することになる。ここでは、事前にPhotoshopなどで最終的なイメージができあがっているものとして、その制作過程を考えてみよう。
まず最初にする作業は、ページ全体の内容を抜き出してテキスト原稿として用意することだ。この段階で、そのまま普通に読んで内容がわかるようになっているかも確認しておく。ここで特に問題がなければ、基本的なアクセシビリティは確保できていることになる。
XHTML＋CSSスタイルのWebページ制作の流れ
次は、そのテキスト原稿に構造を示す要素を加えてXHTL文書にする作業だ。XHTMLの基本的な枠組みのあるテンプレートが用意されているものと仮定して説明すると、テキスト原稿を<body>～</body>(body要素)の間に入れ、その各部分に構造を巣メス要素のタグをつけるという手順になる。この段階でｈ、あどのように表示するのかきにする必要はなく、単純にその部分が文書の構成要素として何であるかを考えて該当するタグで囲うだけでよい。このとき、必要な部分を画像（img要素）にしたり、リンク指定なども行っておく。
XHTML文書については、基本的にはここでいったん完成することになるのだが、CSSでどのようにデザインするのか決まっていれば、この段階でdiv要素による内容のグループ化と、id属性やclass属性によって名前をつけるボックス化の作業を進める。これは現状として構造を示すタグづけのほかに、CSSでデザインするためのタグづけを必要とするケースが多いためだ。この作業については、以降のCSS作成時に平行して行われることもある。
さてXHTML文書が完成したら、忘れずに文法チェックを行っておく。これは要素のつけ方の不備によって、CSSがうまく機能しなくなることを避けるためだ。たとえば、ほんの1箇所だけdiv要素の終了タグを閉じ忘れてしまったと仮定してみよう。すると、その下にある別グループのdiv要素は入れ子としてあつかわれてしまうため、いくら正しいCSSをして指定いてもデザインがおこしくなる。たった1箇所のミスのために、意図したとおりに表示されなくなるケースもあるのだ。このような原因がXHTML側にあると、なかなか気がつかないことが多い。無意味にハマって無駄な時間を費やしたくなければ、忘れずに文法チェックをするべきだろう。
XHTMLの文法チェックには、「The W3C Markup Validation Service」
http://validator.w3.org/
がおすすめだ。ただし、こまめにチェックを行うにはローカルで動作するフリーウェアやシェアウェアのソフトも便利だろう。
この段階で、やってCSS側でのデザイン作業が開始されることになり、CSS完成後は各種ブラウザで表示確認をして、問題がない状態となったらXHTML＋CSSページの完成だ。このように、CSSを使うということは、CSSの適用対象であるXHTMLを適切に作っておくことが前提条件となる。XHTML側がいい加減につくられていると、CSSの指定が必要以上に複雑になったり、無意味な問題に悩まされることになる点に注意しよう。
このようなXHTMLのテンプレートを用意しておき、ページの内容となるテキスト原稿を<body>～</body>の間に流し込む
付け方次第で効率アップ適切なタグづけとCSS
CSSで表示方法を指定する適用先は、HTML(XHTML)の要素が基本単位となる。したがってHTML側の要素がどのような構成になっているか、つまりどのようにタグがつけられているのかは、CSS側にも大きく影響を与えることになるのだ。たとえば、従来の典型的なテーブルレイアウトでつくられたページにも、見た目は同じようになるCSSを指定することはできるが、その指定方法はまったく違うものになる。ひと言でいえば、タグの付け方次第でCSSの指定がシンプルで効率的にできるかどうかが決定してしまうのだ。CSSを導入するということは、一般的にWeb標準に準拠するということでもあり、そのためにはHTML側で構成を適切に示したシンプルな要素づけを行わなければならない。そのような内容に合わせて的確にタグづけされたHTMLは、CSS側も効率的に指定できるようになるのだ。
 |
<h1>～</h1> <h2>～</h2> <h3>～</h3> <h4>～</h4> <h5>～</h5> <h6>～</h6> |
見出し |
| <p>～</p> | 段落 | |
| <ul>～</ul> | 箇条書き | |
| <dl>～</dl> | 定義リスト | |
| <blockquote>～</blockquote> | 引用文 | |
| <adress>～</address> | 問合せ先 | |
| <div>～</div> | 任意の範囲・グループ化 | |
 |
<a>～</a> | リンク |
| <img/> | 画像 | |
| <em>～</em> | 強調 | |
| <strong>～</strong> | より強い強調 | |
| <br/> | 改行 | |
| <span>～</span> | 任意の範囲 |
たとえば内容に合わせた適切な要素を使わずに、単純にdiv要素ばかりを使って、とりあえずid要素でそれらに名前だけを付けてデザインされたページがあったとしよう。この場合、各要素に名前が付けられているので、どの要素でも適用先として単純にデザインを指定することはできる。しかし要素としては区別ができないため、要素の種類を単位としてまとめて指定することなどが行えず、つねに適用先のひとつひとつを名前で指定しなければならなくなってしまう。サイト全体としてみたとき、そのやり方が効率的かどうか、また汎用性やメンテナンス性が高いかどうかと考えると、それはけっして良い方法だとはいえないことがわかるだろう。やはりWeb標準のルールを正しく把握し、ページ内の各構成要素のないように合わせた適切なタグづけを統一的に行っておくことが重要なのだ。
「内容に合わせた適切なタグづけ」といえば難しく聞こえるかもしれないが、Web標準で使用される基本的なタグは種類も少ない。内容を見て、その中から該当すると思われるタグを選び単純に囲うだけでよいのだ。むしろ、装飾やデザインまわりまで指定してきた従来のHTMLのほうが使用するタグははるかに多く、それに比べれば圧倒的に覚えるのも簡単だろう。また、構造を示すタグをつける段階で無意味に複雑化する必要はない。CSSを適用する段階で必要になったときに、最低限のタグや属性を追加すればよいのだ。現状ではタグを付ける作業について、単純に構造を示すタグをつける作業と、CSSで効率的な指定ができるように最低限のタグや属性を追加する作業の二段階が必要であることを覚えておこう。
このようなタグづけの段階が疎かになっていると、「CSSは難しすぎて効率が悪い」「CSSを導入するメリットが理解できない」などという結果に陥って、挫折してしまうケースもある。CSSを始める前の段階で、正しいタグの付け方をしっかりとマスターしておこう。
典型的なテーブルレイアウトのソースの例。内容であるテキストに比べて、タグの割合が非常に高いことがわかる。
div要素とid属性ばかりを使いすぎているXHTMLソースの例。レイアウトにテーブルを使っていなくても、構造的なタグづけとは言い難い。
構造を示す適切なタグづけをしたXHTMLソースの例。とてもシンプルでわかりやすい。
DOCTYPE宣言で変わるブラウザの表示モードについて
IE6をはじめとして、FirefoxなどのMozilla系ブラウザ、Opera7以降、Safari、Machintosh版IE5などには、ふたつの異なる表示モードが搭載されている（比較的新しいMozilla系ブラウザについては表示モードが3つある）。ひとつはWeb標準に準拠したっ表示をする「標準モード（標準仕様準拠モード）」、もうひとつは古い時代のブラウザと表示の互換性をもたせた「互換モード（後方互換モード）」と呼ばれるモードだ。
「標準モード」はHTMLでもCSSでも文法的な正確さが要求され、まちがった書き方をすれば基本的には無視されることとなるが、標準仕様のとおりに書きさえすれば指示どおりに解釈して正しく表示してくれるモードだ。それに対して「互換モード」は、まちがった書き方をしていてもある程度カバーしてうまく表示してくれる利点がある一方で、いくらHTMLやCSSを正しく書いても、独自の解釈で標準仕様とは異なる表示をしてしまうという欠点を併せ持つ。
このようなふたつのモードが存在しているのは、Web標準での作成が浸透し始めた時期であり、まだ古くからの方法で作成しているページが圧倒的に多いためだ。つまり、もともと存在している古いページに関しては「互換モード」でこれまでと同じように表示させ、これからつくる新しいページに関しては、Web標準に従った表示ができるよう環境を整えていこうという狙いなのである。これらふたつのモードは、HTML（XHTML）文書のDOCTYPE宣言がどのように書かれているかによって、自動的に切り替わる仕組みになっている。具体的にどのように書けばどちらのモードになるかの詳細については表を参照していただくとして、基本的にはHTMLの古い書き方のようにDOCTYPE宣言を書かなければ「互換モード」になり、URLを含んだDOCTYPE宣言を正しく書けば「標準モード」になると覚えておけばよい。
しかし、注意しなければならない例外もある。XHTML文書では、その先頭にXML宣言を配置することが推奨されているが、それを配置するとIE6では無条件に「互換モード」として扱われてしまうのだ。実際にはXML宣言だけでなく、コメントをはじめとする何らかのテキストがDOCTYPE宣言の前にあると、IE6では無条件に「互換モード」になってしまうことが確認されている。XHTML1.0の最初の仕様が公開された当時は、文字コードがUTF-8またはUTF-16以外の場合XML宣言が必須と思われていたが、XHTML1.0の第2版ではサーバ側が文字コードを送信する仕組みになっていれば、XML宣言がつねに必要となるわけではないことが明記されている。したがって、IE6を「標準モード」にするためにも、現時点ではXML宣言は書かないようにしておこう。
| 分類 | DOCTYPE宣言/XML宣言 | IE6 | Firefox Netscape Opera Safari | Mac版IE5 |
|---|---|---|---|---|
| なし | 互換モード | 互換モード | 互換モード | |
| HTML4.01Strict | <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"> | 標準モード | 標準モード | 互換モード |
| <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
標準モード | 標準モード | 標準モード | |
| HTML4.01 Transitional | <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Trasitional//EN"> | 互換モード | 互換モード | 互換モード |
| <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML
4.01 Trasitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
標準モード | 標準モード | 標準モード | |
| XHTML1.0 Strict | <!DOCTYPE HTML PUBLIC"-//W3C//DTD XHTML
1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
標準モード | 標準モード | 標準モード |
| <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE HTML PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
互換モード | 標準モード | 標準モード | |
| XHTML1.0 Transitional | <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
標準モード | 標準モード | 標準モード |
| <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
互換モード | 標準モード | 標準モード | |
| XHTML1.1l | <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
標準モード | 標準モード | 標準モード |
| <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
互換モード | 標準モード | 標準モード |
Mozilla系ブラウザの表示モードについて詳しく解説されているページ。「MozillaのDOCTYPE判別」
https://developer.mozilla.org/ja/
Mozilla's_DOCTYPE_sniffing
IE6の表示モードについて詳しく解説されているページ。「CSSの互換性とInternet Explorer」
http://msdn.microsoft.com/ja-jp/library/cc351024(v=VS.85).aspx
Operaの表示モードについて詳しく解説されているページ。「Opera7.8のDOCTYPEスイッチ」
CSSの組み込み方①CSSファイルを読み込む
HTMLにCSSを組み込むためのもっとも基本となる方法は、link要素のhref属性の値に外部スタイルシート（CSSファイル）のURLを指定して読みこせるという方法だ。link要素は、head要素内にのみ配置できる。このときlink要素を複数配置すれば、その数だけCSSファイルを読み込ませることもできるが、現在の作成方法ではHTMLソース側から指定するCSSファイルを参照したい場合は、いったんひとつのCSSファイルだけを読み込ませ、その中でCSSの@import命令を使って別のCSSファイルを読みこせることになる。ただし、media属性を指定すればCSSの適用対象となる出力先を指定できるため、パソコン画面(screen)用のほかに印刷(print)用などのCSSファイルを用意するときは、当然のことだがHTMLソース側のlink要素で複数指令しなければならない。またmedia属性の値で「screen」と完全に一致しない値を指定するとNetscape Navigator(以下、NN)4.ｘで開いたときにCSSファイルそのものを読み込まなくなるため、意図的に「all」「screen.tv」などの値が指定されることも多い。
さらにlink要素を使うことで、ユーザーが任意に切り替えて使うことのできる代替スタイルシートを用意しておこくこともできる。残念ながらIEではJavaScriptを使用しなければスタイルシートを切り替えることはできないが、FirefoxやOperaなどではメニューから簡単に切り替えることができるようになっているので便利だ（スタイルシートをしようしない設定も選べる）。
CSSファイルをlink要素で読み込む場合のソース例。link要素は必要に応じていくつも指定できる。
| screen | パソコン画面 |
| tty | テキスト端末 |
| tv | テレビ |
| projection | プロジェクタ |
| handheld | 携帯用端末 |
| プリンタ | |
| braille | 点字出力 |
| aural | 音声出力 |
| all | すべてのメディア |
| tittle属性 | rel属性 | |||
|---|---|---|---|---|
| 固定スタイルシート | 指定しない | stylesheet | ||
| 代理スタイルシート （初期状態で適用するもの） |
名前を指定 | stylesheet | ||
| 代替スタイルシート （初期状態で適用しないもの） |
名前を指定 | alternate stylesheet |
CSSの組み込み方②style要素内で指定する
head要素内にstyle要素をいれ、その要素内容としてCSSを直接記入することができる。その際、style要素の開始タグには必須属性の「type="text/css"」を指定する必要がある。
また、HTMLの場合は要素内容全体をXHTMLのコメント記号(<!--- --->)で囲って古いブラウザでソースコードを表示されてしまうことを防ぐ書き方ができたが、XHTMLでは要素内容の型が変更になったため、内容をコメント記号で囲うと本当のコメントとして処理される可能性がある点にも注意しよう。
style要素の中に、そのページに対する表示方法の指定を長々と書き入れるという使い方は、ほとんど行われることはない。要素内容として@import命令だけを入れて、そこから外部CSSファイルを読みこませる方法が多いようだ。
CSSの組み込み方③任意のタグのstyle属性で指定する
HTML（XHTML）のほとんどの要素には、style属性を指定して、その値としてスタイル（プロパティ値）を直接記入することができる。「;」で区切れば複数のスタイルを指定することも可能だ。この場合、適用先はstyle属性を指定した要素ということになるので、特に適用先を指定する必要はない。
style属性の使用例。「;」で区切って複数のスタイルを指定することもできる。
このようにして指定してボックスのボーダーを表示させると、問題を発見しやすくなる。
ただし、style属性を使うということはHTML内に表示方法の指定を組み込んでしまうことになり、Web環境のもつメリットを失うことになりかねない。また、style属性はXHTML1.1では非推奨属性として位置づけられている。style属性はCSSの実験やテスト、問題が発生した場合の調査などに限定して使用するべきだろう。
