スタイルシートとHTML -

1. スタイルシートとHTML

スタイルシートって何だろう？

「スタイルシート（Style sheet）」とは、W3CのCSS 2.1仕様書（http://www.w3.org/TR/CSS21/）では、"A set of statements that specify presentation of a document."（文書の体裁を指定する命令セット）、となっている。これは何を意味するのだろうか？まず、最初にスタイルシートと呼ばれるものを使用していないWebページの表示を見てもらいたい。

スタイルシートを使用していない場合の表示

この表示の場合、背景は白色、文字は黒色で表示されているが、これはブラウザによって設定された色であり、ページ作成者の意図したものではない。では、次に背景を黒色、文字を白色としてページ作成者が意図したページの表示を見てみよう。

スタイルシートを使用した場合の表示

このようにページの見栄え、すなわち体裁を指定するものをスタイルシートと呼んでいる。

文書の物理構造と論理構造

スタイルシートを使用していない場合の表示でも、背景の色や文字の色、あるいは文字の大きさなどが適当に設定されている。これはブラウザの設定であり、Webページを作成するためにHTML（あるいはXHTML）のみを使用した場合である。つまり、HTMLが指定しているものは「文書の論理構造」のみであり、それが実際にどのように表示されるかは、ブラウザに左右され一定ではない。

一方、スタイルシートは文書の体裁を指定するもので、これは「文書の物理構造」と呼ばれているものである。このスタイルシートによって文書の物理構造と論理構造を分離して捉えることが可能となる。２００７年現在の主流は、こうした考え方であり、そのためHTMLを記述する場合、それは文書の論理構造に注目すべきであり、物理構造とは切り離して考える必要がある。

しかしながら、体裁の悪いページが好まれるわけもなく、そのためにはスタイルシートによる物理構造も考えなければならない。言い換えるならば、これまでは単にWebページの作成と言う作業のみで捉えていたものを、論理的な面および物理的な面からアプローチする必要があるということである。

スタイルシートの種類

スタイルシートとは、これまで説明してきたとおり、Webページの見栄えに関する概念である。実際に、それを実現するためには実装技術、つまりスタイルシートのためのコンピュータ言語が必要とされる。その言語にも色々な種類がある。例えば、次のようなものがある。

CSS（Cascading Style Sheets）
DSSSL（(Document Style Semantics and Specification Language）
XSL（Extensible Stylesheet Language）
JSS（JavaScript Style Sheets）

こうした「スタイルシート言語」のうち、現在広く使用されているものがCSSであり、スタイルシートの代名詞ともなっている。

CSSとは何か？

「CSS」とは、"Cascading Style Sheets"の頭文字をとったもので、「カスケーディング・スタイル・シート」あるいは「カスケード・スタイル・シート」とも呼ばれるスタイルシート言語である(※ CSSはW3Cにより勧告されており、現在（2007.02.06）はCSS Level 2.1が勧告候補（Candidate Recommendation）となっている。)。 CSSは、以下のような特徴を持ったスタイルシート言語である。

スクリーンや紙などのいろいろな媒体ごとに体裁を指定することが可能であり、また、それを切り替えることもできる。
Webブラウザやページ制作者、ユーザがそれぞれ指定した体裁を段階的に適用（カスケード）することができる

CSSの最初のバージョンは「Cascading Style Sheets, level 1 (CSS1)」と呼ばれ、1996年にW3Cにより勧告された。次に、「Cascading Style Sheets, level 2 (CSS2)」が、1998年に勧告され、この頃よりWebページの論理構造と物理構造の分離という考え方が広く用いられるようになった。もっとも新しい勧告は、CSS2をマイナーチェンジした「Cascading Style Sheets, level 2 revision 1 (CSS2.1)」が、 2006年に勧告候補となっている。また、勧告には至っていないが「Cascading Style Sheets, level 3 (CSS3)」が、ワーキングドラフトの状態にある。

用語の定義

正確な用語の定義はW3C勧告の"3 Conformance: Requirements and Recommendations"において定義されているが、(※ CSS 2.1の用語定義は、http://www.w3.org/TR/CSS21/conform.htmlにあります。)ここでは本書で使用する解釈を述べることにする。

スタイルシート (Style sheet): 本来は概念を表すものだが、本コンテンツでは、CSSそのものの代名詞として用いることがある。
妥当なスタイルシート (Valid style sheet): W3C勧告に文法に適合したスタイルシートのこと。
ソース文書 (Source document): スタイルシートが参照する文書のこと。つまりHTML文書を意味する。
構造化言語 (Document language): ソース文書を記述するための言語。つまりHTMLやXHTMLのことを意味する。
要素 (Element): 構造化言語の要素のこと。HTMLやXHTMLの要素を意味する。
置換要素 (Replaced element): HTMLのimg、input、textarea、select、objectなどの要素のことであり、CSSがその実寸法のみを認識する要素のこと。
実寸法 (Intrinsic dimensions): 要素の幅及び高さがその要素自身によって決まる、その要素の寸法のこと。 CSSでは、置換要素だけが実寸法を持つと考える。
属性 (Attribute): HTMLやXHTMLの要素に指定する属性のこと。
内容 (Content): 要素の内側にある内容のこと。ただし、空要素の場合は内容を持たない。また、内容として下位要素を含む要素を、下位要素の親と呼ぶ。
表示内容 (Rendered content): スタイルシートに従って表示が完了した後の内容のこと。
文書木構造 (Document tree): ソース文書内における要素の木構造のこと。
子供 (Child): BがAの親要素であり、かつその時に限り、AはBの子供であると言う。
子孫 (Descendant): AがBの子要素である時、あるいはAが「Bの子孫にあたるC」の子要素である時、AはBの子孫であると言う。
祖先 (Ancestor): BがAの子孫要素であり、かつその時に限り、AはBの祖先であると言う。
兄弟 (Sibling): AとBが同一の親要素を持ち、かつその時に限り、AはBの兄弟であると言う。また、AがBよりも前にある時、Aを兄要素、AがBよりも後にある時、Aを弟要素と呼ぶ。
先行要素 (Preceding element): AがBの祖先要素であるか、あるいはBの兄要素である時、AをBの先行要素と言う。
後行要素 (Following element): AがBの先行要素であり、かつその時に限り、AをBの後行要素と言う。
作成者 (Author): ソース文書及びスタイルシートを記述する人のこと。
ユーザ (User): ソース文書及びスタイルシートを利用する人のこと。
UA (User agent): Webブラウザのこと。ただし、UAには、表示のみでなく、音声で読み上げたり、印刷したり、別の文書形式に変換したりするものも含まれる。

ページの先頭に戻る