ホームページの基礎（2. CSS 編）

2.1 スタイルシートとHTML

このページでは，XHTML(HTML)とスタイルシートの関係について簡単な説明をします。

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

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

この表示の場合，背景は白色，文字は黒色で表示されていますが， これは私のブラウザが勝手に設定した色を利用して表示したもので，ページ作成者（著者）の意図したものではありません。では，次に背景を黒色，文字を白色としてページ作成者（著者）が意図したページでの表示を見てみましょう。

この２つのページでは，文書の内容に違いはありませんが，背景色や文字色などのページの見栄えには違いがあります。このページの見栄え，すなわち体裁を指定するものをスタイルシートと呼んでいます。

CSS総目次 | ページ先頭に戻る

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

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

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

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

CSS総目次 | ページ先頭に戻る

2.1.3 スタイルシートの種類

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

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

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

CSS総目次 | ページ先頭に戻る

2.1.4 CSSとは何か？

「CSS」とは，"Cascading Style Sheets"の頭文字をとったもので，「カスケーディング・スタイル・シート」あるいは「カスケード・スタイル・シート」とも呼ばれるスタイルシート言語です(※ CSSはW3Cにより勧告されており，現在（2010.11.27）は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)」が， 2009年現在に勧告候補となっています。また，勧告には至っていませんが「Cascading Style Sheets, level 3 (CSS3)」からは各モジュールごとに仕様が検討されています。

CSS総目次 | ページ先頭に戻る

2.1.5 用語の定義

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

スタイルシート (Style sheet)

本来は概念を表すものですが，本Webページでは，CSSそのものの代名詞として用いることがあります。

妥当なスタイルシート (Valid style sheet)

W3Cの文法に適合したスタイルシートのこと。

ソース文書 (Source document)

スタイルシートが参照する文書のこと。つまりXHTML(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には，表示のみでなく，音声で読み上げたり，印刷したり，別の文書形式に変換したりするものも含まれます。

CSS総目次 | ページ先頭に戻る