スタイルシートについて[Beta]
−CSS Tips−

1998/08/10 - 1999/09/28
http://www.bluemoon4u.com/room/style.html

この蒼花やBlue Moonでもふんだんに使っているスタイルシート(W3C Cascading Style Sheet)について、私が個人的に知り得た情報をここに公開します。既に存在しているスタイルシートの利用法のページとは違いますので注意してください。

私もまだ勉強中の身ですので、誤った情報もあるかもしれません。問題のある箇所がありましたら、ご指摘をお願いします。なお、このCSS Tipsは、ユーザーがHTMLをある程度理解していることを前提として作成しています。


1. スタイルシートとは

スタイルシートとは、HTMLおよびXML文書の細かな文書レイアウトを支援するための言語の総称です。HTML文書の装飾は、文書自体の内容とは無関係ですので切り離すことが推奨されます。これは、HTMLがプラットフォームを限定しないという性格を持っていることに由来します。

アクセシビリティ向上に注目したHTML4.0では、装飾は全てスタイルシートに任せることを推奨しています。これは、文書と装飾の分離を行うことで、HTML文書の内容そのものをあらゆる環境で閲覧できるというHTMLの本来の性質を取り戻すことを意味しています。

スタイルシート自体は、HTMLよりも遅れて登場した技術ですので、当然対応していない古いブラウザも多く存在します。しかし、過去のバージョンのHTMLで設定されている装飾に関するプロパティは、ブラウザの拡張タグの類をHTMLの正式なプロパティとして後から認めたものが多く、ある程度古いブラウザでも閲覧できる反面、さらに古いブラウザでは再現できませんし、パソコン以外の環境(携帯端末など)からの閲覧では適切に閲覧できなくなるものもあり、HTMLの理念を大きく捻じ曲げることにもなりました。

ちょっと堅苦しいですが、HTMLの意味を理解した上でこのスタイルシートが使えるのと、使えないのとではWebサイト製作者のレベルは大きく変わってくると思います。スタイルシートは拡張タグとは違い、汎用的な技術ですので将来性もかなり高いと思います。古いHTMLでの装飾技術を勉強するよりもはるかに有用ですので、この機会にぜひ覚えましょう。

スタイルシートの種類

仕様書にも書かれていますが、スタイルシートは1種類ではありません。筆頭に挙げられる「CSS(W3C Cascading Style Sheet)」の他に、「JSS(Netscape Communications JavaScript Style Sheet)」、「W3C XSL」などがあります。私はCSSしか勉強していませんので、このCSSについて書いていこうと思います。

2. CSSを利用するための下準備

ここで書く内容は、HTMLでCSSを利用する上で確実にしておく必要のある下準備の説明です。これらの下準備はなくてもブラウザ側で容認する場合がありますが、厳密には踏んでおくべき手順です。HTML文書の作成の下地も兼ねています。

●HTMLのバージョンは「4.0」で

まず、HTMLでスタイルシートを使用する場合、そのHTML文書がHTML4.0以降で書かれていることが前提条件になります。HTML3.2ではスタイルシートは認識されないことになっています(それでもブラウザが容認して解釈します)。HTML4.0はHTML3.2に近い「Transitional」でも問題ありませんので、DOCTYPE宣言を書いておきましょう。DOCTYPEとは、HTMLのバージョンを示す宣言です。HTML4.0の書式は以下の通りです。

1. HTML4.0 Strictの場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

HTML4.0の非推奨要素・属性を完全に排除した上で、フレームを使っていないHTML文書で宣言できます。

2. HTML4.0 Transitionalの場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

HTML4.0の非推奨要素・属性を含むもので、フレームを使っていないHTML文書で宣言できます。基本的にHTML3.2と極端に違わないので、これを宣言しておけば無難だという説があります(笑)。

3. HTML4.0 Framesetの場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">

フレームを使っているHTML4.0文書では必ずこのDTD(HTML4.0の種類です)を宣言しなければなりません。フレームを使っているサイトで律儀にこれを守っているサイトはあまり見ませんけど・・・。

宣言するDTDを決めたら、このDOCTYPE宣言を該当するHTML文書の最初に記述します。HTMLタグよりも前に記述しなければなりません。

●Content-Style-Typeの設定

スタイルシートを使う場合は、JavaScriptを使うとき(Content-Script-Type)と同じようにコンテントタイプを設定する必要があります。コンテントタイプとは、いわゆるその文書が何の規格の文書であるかを識別するための宣言です(私も詳しくは知りません)。スタイルシートを使う上で宣言しなければならない「Content-Style-Type」は初期値がCSSとして設定されているらしく、本家(笑)のW3Cですらやっていなかったりするほど、設定がなくてもいいような感じになっていますが、やはり設定するべき項目です。スタイルシートのリファレンスサイトを名乗っている大半の日本語サイトではこれを守っていません。

余談ですが、HTMLでは必ず(文法上そうなっているかどうかは分かりませんが、常識的に)「Content-Type」を記述する必要があります。これはスタイルシートを使う使わないに関わらず必須の項目といえます。Content-Style-Typeがスタイルシートの種類(規格)を、Content-Script-Typeがスクリプト言語の種類を定義するように、Content-TypeはHTML文書そのものが何で書かれているかを宣言します。ツールを使ってサイトを構築している方は意識せずともツールが勝手にこれを生成するので問題はありませんが、手書きから始めた方のサイトの場合、これがないことがあります。

Content-Typeが重要なのは、当該文書がHTMLであることを示すことではありません。問題は、その文書が「どの文字コードセットを使用しているか」で、これを明記するために宣言すると考えても問題ないと思います。ブラウザはいまだに言語の自動認識が甘いので、よく文字化けするサイトを見かけます。これは、そのサイトが適切に文字コードを設定していないことによります。特に、タイトルに英数文字を使っている場合などはよく文字化けが起こるようです。合わせて宣言方法を紹介しておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html lang="ja">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>蒼花(Bloom)−スタイルシートについて−</title>
</head>

例で強調している箇所がこの宣言に当たります。文字コードセット(charset="...")は、使用している文字コードの名前を明記します。なお、タイトル(title)に日本語を用いている場合、TITLE要素よりも先にこの宣言を行わなければなりません。

上の例ではスタイルシートにテキストファイルのCSSを利用すると宣言しています。スタイルシートのこの宣言はなくても誤動作を招くことはありませんが、上の段のContent-Typeは設定しておかなければなりません。HEAD要素内にタイトルしか入れていないサイトは今でもよく見かけます・・・。

3. CSSの導入方法

CSSには大きく分けて「Cascading(段階的宣言)」と「Inheritance(継承性)」の2つの特徴があります。このうち、「Cascading」とは、スタイルシートの宣言方法を優先度に合わせて段階的に選択できるというものです。これは、プログラミング言語の「宣言」のスタイルによく似ていて(私はプログラミングのことはあんまり詳しくありません・・・)、グローバルローカルの概念を理解している方だと飲み込みもかなり早いかと思います。では、3つの宣言方法を大まかに紹介します。

1. ページ埋め込み型

リンクの色を変える程度にしかCSSを利用していないサイトがよく使っている手法です。該当するページのヘッダセクションにSTYLE要素を追加し、この中にCSSの記述を行います。有効範囲はそのページ内だけとなります。

JavaScriptでもよく使われる手法ですね。そのページだけに反映させたいスタイル指定などを書くときに便利です。この方法でたとえば見出し(Headers)レベル1(H1要素)にプロパティを指定する場合、HTMLのソースコードは以下のようになります。この設定値は、このページの中にあるH1要素全てに適用されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html lang="ja">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>蒼花(Bloom)−スタイルシートについて−</title>
  <style tyle="text/css">
<!--

h1 {
  font-weight: normal;
  font-size: 24pt;
  color: #000080;
}

-->
  </style>
</head>

スタイル定義の内容をコメントとして括っているのは、JavaScriptの宣言同様にスタイルシートに対応していないブラウザでの誤動作を防ぐためです。

2. 外部リンクファイル型

これは、スタイルシートの記述コードを1つのテキストファイルにまとめ、このファイルをHTML文書から関連ファイルとして参照することでスタイルシートを指定する導入方法です。HTML文書と外部スタイルシートファイルを別々に読み込むため、ページ埋め込み型に比べて若干遅くなるそうですが、さしたる違いはないように見えます。

この導入方法は、複数のHTML文書から同一のスタイルシートファイルを参照するような場合に特に効果を発揮します。1つのスタイルシートファイルをマスタースタイルシートとして用意し、自分のWebサイトの全てのHTML文書とリンクさせれば、サイト全体のデザインの統一が容易に行えます。またこれは保守処理に関しても言えることで、1つのマスタースタイルシートを変更するだけで、サイト全体のデザインを意図も簡単に変更することができ、労力の節約につながります。スタイルシートの真価が最大限に発揮される導入方法です。

HTML文書のソースコードが不用意に汚れないというメリットもあるかもしれません(笑)。

HTML文書とスタイルシートファイルをリンクさせるには、HEAD要素内に記述するLINK要素で指定します。記述方法は以下の通りです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html lang="ja">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <link rel="stylesheet" href="../system.css" type="text/css" charset="SHIFT_JIS">
  <title>蒼花(Bloom)−スタイルシートについて−</title>

LINK要素は空要素なので終了タグはありません。「rel」属性は、リンク先がこのページから見て何であるかを示します。スタイルシートファイルなので属性値は「stylesheet」となります。これは決まり文句の覚えていて問題ありません。後続の属性はHREF属性がリンク先URIの参照、TYPE属性はリンク先ファイルが何のファイルであるかを示します。この場合CSSで書かれたテキストファイルなので「text/css」と記述します。CHASET属性はそのスタイルシートファイルがどの文字コードセットで書かれているかを示します。通常HTML文書と同じコードなので、同じものを書いておけばそれで構わないでしょう。

3. インライン指定型

この指定方法が一番簡単です。適用する要素に直接指定します。書式は以下の通りです。

<p style="text-align: center">段落</p>

この例では、段落をスタイルシートの「text-align」プロパティの指定により中央寄せしています。このように、STYLE属性の値としてスタイルシートのコードを書き込むだけで使えるので非常に便利ですが、長いコードを書くとソースコードが汚れますので、これをメインに使うことはあまりお勧めできません。この指定方法では、その要素にしかスタイルが適用されないので、従来のHTMLの属性による装飾とほとんど変わらなくなります。

この手法は、スタイル重複時の優先度が最も高くなることから、局地的にスタイルを指定したいときだけに使うようにするのが好ましい使い方ではないかと考えます。

4. セレクタ

概要

セレクタ(SELECTOR)とは、CSSをページ埋め込み型外部リンクファイル型のいずれかで導入した場合に、スタイルが適用される対象のことです。インライン型ではHTML文書内の要素に直接指定するので、対象を考える必要はありません。

セレクタの指定には、いくつかの用法があります。これらを以下に簡単に説明していきます。

1. 要素直接指定

最も簡単なセレクタの指定方法です。CSS側から要素名をセレクタとして記述します。この場合、そのCSSが適用されるページの全ての要素に対してスタイルが設定されます。

CSS側の記述


p { font-size: 12pt }
			

この例では、ページ内にある全てのP要素に対して、フォントサイズを12ポイントにするように設定しています。1つのページだけの専用の外部リンクファイル、またはページ埋め込み型でよく使う手法です。また、マスタースタイルシートに対して使えばCLASSやIDを設定していないHTML文書に対しても効果を発揮できます。

2. ID設定

HTML4.0から追加された汎用属性です。性質はほぼNAME属性と同じで、対象となる要素のそのページにおける名前を設定できます。NAME属性と同じく、そのページ内では他の要素につけたIDの値と重複させることはできません。そのページ内に1つしかない文字列を設定します。NAMEと共存させる場合、NAMEの値もIDの値を干渉するため、NAMEの値とも重複させることはできません。将来的にはNAMEがIDに変わると言われています。

ID属性の取る値がページ内で唯一の値であることから、適用されるスタイルはページ内の1箇所にしか適用されないことに注目してください。以下に書式の例を挙げておきます。

HTML側の記述


<div id="box1">・・・</div>
			

CSS側の記述


#box1 { font-size: 12pt }
			

IDの設定された要素に対してスタイルを指定する場合は、ID名の前に「#」を付けます。「#」の前に要素名を書くことはできません。適用する対象が1つしかないので、対象の要素が何であろうが問題がないのです(実際はあるんですけど)。この手法は、主にその場面でしか使わない表現(インライン型で指定するような局地的な表現)や、各ページのタイトルや日付情報など、該当ページ内では1つしか存在しない要素に対して外部リンクファイルでまとめて記述する場合などに有効です。

3. CLASS設定

IDと同じくHTML4.0から追加された汎用属性です。IDとは根本的に異なり、スタイルシートを指定するセレクタとして使うためだけに存在する要素です(厳密には違うかもしれませんが、現時点ではこの用途以外に使い道が見つかりません)。CLASS属性の取る値は、ページ内で何度使っても構わないため、IDよりも使用用途は増えるかと思います。IDだけでページ内の全ての要素にスタイルを適用するのが難しいのに対し、CLASSだけでページ内の全ての要素へのスタイルをカバーするのは非常に容易です。ページ内に1つしかない要素に対してスタイルを適用するときはIDを使用するべきだという動きはないので、気にならなければIDを全てCLASSで代用することも可能です。

HTML側の記述


<span class="update">・・・</span>
			

CSS側の記述


.update { color: #FF0080 }
span.update { color: #FF0080 }
			

上の例は、ウチでもよく使っている手法で、更新日などで強調したいものだけに適用しています。CSS側の表記は上と下どちらでも構いません。上だと、全ての要素を対象にCLASS名に「update」が指定されているものを探します。下ではSPAN要素のみを対象にCLASS名に「update」を持っているものを探します。上下の使い分けは好みで構わないと思います。

この手法は、ページ内で頻繁に使うけれども要素に直接スタイルを指定したくない場合複数のインライン要素に対して意味を持たない視覚効果を与えたい場合(強調ではないアンダーラインなど)などに効果を発揮します。

4. 限定用法

この手法は比較的特殊な使い方なので、必要ない場合は無理に使わずに別の導入手段を使った方がよい場合もあります。概念としては、親要素を限定して設定するという考え方で、「限定用法」という言葉は正式名称ではありません。P要素に対してよく使用しています。

HTML側の記述


<p>段落その1</p>
<div class="data">
    <p>段落その2</p>
</div>
			

CSS側の記述


p { text-indent: 1em }
div.data p { color: #FF0080 }
			

この例ではCSS記述の1行目で、段落である全てのP要素に対して「text-indent(字下げ)」プロパティを設定しています。この時点で、HTML側の「段落その1」と「段落その2」はいずれも「text-indent」プロパティによる字下げが行われます。CSS記述の2行目で、限定用法を使用しています。「data」をクラス名に持つDIV要素が子要素として含んでいるP要素に対して「color」プロパティでフォントカラーを指定しています。CSSの記述は、セレクタに親要素を書いた後スペースで区切り、スタイルを設定する要素を入力します。この例では、「段落その2」に対してのみフォントカラーが指定されます。

この限定用法は、上の例のような使い方のほかに、「要素名 要素名」と限定の幅を広げたり、「要素名.クラス名 要素名.クラス名」といった感じでさらに限定の幅を絞ることもできます。多用する要素にいちいちクラス名をつけたくない場合などに特に有効に使うことができます。

5. HTMLの親子関係と継承

HTML文書は、HTML4.0よりBODY要素直下にインライン要素およびノーマークのテキストを記述することができなくなりました。これは、すべてのオブジェクトがブロックレベル要素によってコンテナ化されることを意味しています。これにより、要素の親子関係が生じます。厳密に言うと、すべてのHTML文書はHTML要素を親要素に持つので親子関係を持つと言えるのですが、ここではBODY要素以下の記述に関しての親子関係を考えます。

「親」や「子」という概念は慣れればすぐに理解できます。親要素とは、中身として自分を含んでいる要素のことです。子要素はその逆で、自分が中身に含んでいる要素のすべてを子要素といいます。基本的には親または祖先にあたる要素にはブロックレベル要素が使用されます。

このブロックレベル要素を用いた親子関係(または階層構造)は、HTML文書の「コンテナ化」を促進するため、スタイルシートの適用によるレイアウトが格段に効果的になります。CSSによる効果的なレイアウトを行うのであれば、この親子関係によるコンテナ化の理解は必須であると言えます。

1. HTMLのコンテナ

2. 論理構造体DIVとSPANの意味

6. やってはいけないCSS愚行

現在作成中です...

1. 意味不明の飾り付け

2. 旧型HTML要素の代替用法

3. スタイルシートによる画像のサイズ指定

7. Netscape Navigator(Communicator)4.x対策

現在作成中です...

1. ボックスの背景を完全に塗りつぶす方法

2. フォントを指定によるエラー回避策

3. DIV要素に指定したプロパティの継承策

8. Internet Explorer4.x & 5.0対策

現在作成中です...

1. ブロック要素にブロック要素を入れた場合の下端処理

9. 蒼花のCSS(サンプル)

現在作成中です...