目次
スタイルシートは、Webページ設計者に対して、ページのアピアランスを向上させる能力を拡張する、大きな突破口を示した。Webが編み出されたところである科学技術分野に携わる人々の間では、文書のプレゼンテーションよりも中身にこそ関心が持たれる。しかし日常生活の一部としてWebを利用しはじめた人々の間では、HTMLの制限は不満が募る元となり、著者は、HTMLのスタイル上の制限を回避することを余儀無くされた。 Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
例えば、 special.css ファイルに記録されている次の短いCSSスタイルシートは、ある段落のテキストを緑にし、段落の周囲を赤実線で囲うよう設定している。
P.special { color : green; border: solid red; }
著者はこのスタイルシートに、HTML文書からのリンクを、 LINK要素で設定できる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>外部スタイルシートへのリンクがあるHTML文書</TITLE> <LINK href="special.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <P class="special">この段落のテキストは特別に緑の文字になる。 </BODY> </HTML>
HTML 4 は、次のスタイルシート機能を提供する。
スタイルシートは、これとは対照的に、特定の出力メディアあるいは出力メディア群に適用される。 スクリーン出力用のスタイルシートは印刷にも適用可能であろうが、音声ブラウザではほとんど役に立たない。 本仕様は、所定のスタイルシートが受け入れ可能な、非常に広範に渡る出力メディアを、著者が定義できるようにした。 これにより、ユーザエージェントが不適切なスタイルシートを取得することを、回避させられる。 スタイルシート言語は、同一スタイルシート中にメディア依存性の記述を行なう機構を含んでいるであろう。
これに対する現在の提案は、著者に対し、各要素毎にレンダリング命令を含ませるようにするというものである。そうすると、ユーザエージェントがある要素のレンダリングを行なおうとする毎に、その要素のレンダリング情報が常に利用可能である状態になる。
多くの場合、著者はひとまとまりの文書には共通のスタイルシートを利用する。 この場合、スタイルルールを文書内部に分配することは、1つの外部スタイルシートにリンクすることよりも実際に効率が低下する。なぜなら外部スタイルシートにリンクした場合、大部分の文書にとっては、ローカルのキャッシュにスタイルシートが既に存在するからである。優れたスタイルシートが公有されることで、この効果は増大するだろう。
注意。 [CSS2] に含まれている HTML 4 用のデフォルトスタイルシート例は、各要素について一般的に受け入れられているデフォルトスタイル情報を表している。 これは、著者からも実装者からも、有用な情報源であると考えられるであろう。
HTML文書は、スタイルシート規則を文書中に直接含んでもよいし、外部スタイルシートから読み込んでもよい。
どのスタイルシート言語も、HTMLと併用できる。単純なスタイルシート言語はほとんどのユーザの要求を満たすであろうし、高度に特化した要求には別の言語が適していよう。 本書の例示には、スタイルシート言語「Cascading Style Sheets」 ([CSS1]、略してCSS) を用いる。
スタイルデータのシンタクスは、スタイルシート言語に依存する。
著者は、HTML文書に結びつけるスタイル情報を記した、スタイルシート言語を指定しなければならない。
著者は、文書のデフォルトスタイルシート言語を設定するために、META要素を用いる必要がある。 例えば、デフォルトをCSSに設定するために、著者は次のような宣言を 文書の HEAD要素に置く必要がある。
<META http-equiv="Content-Style-Type" content="text/css">
デフォルトスタイルシート言語は、HTTPヘッダによっても設定し得る。 上述のMETA宣言は、次のHTTPヘッダと等価である。
Content-Style-Type: text/css
ユーザエージェントは、ある文書のデフォルトスタイルシート言語を決定するのに、次の手順(優先度が高いほうから並べてある)に従う必要がある。
style属性が設定された要素を含んでいてデフォルトスタイルシート言語が定められていない文書は、不正である。 オーサリングツールは、 (典型的には META 宣言を用いて) デフォルトスタイルシート言語の情報を生成し、ユーザエージェントがデフォルト「text/css」に頼らなくてもいいようにする必要がある。
style属性の値のシンタクスは、 デフォルトスタイルシート言語によって決定される。 例えばCSS2の行内スタイルは、[CSS2]の4.1.8で記述されている宣言ブロックのシンタクスを用いる (ただし区切り子の中括弧を除く)。
次のCSSの例は、ある特定の段落のテキストに対し、色とフォントサイズの設定をしている。
<P style="font-size: 12pt; color: fuchsia">スタイルシートは素晴らしいですよね?
CSSでは、プロパティ宣言は「名前: 値」という書式であり、各宣言がセミコロンで区切られる。
複数の要素にスタイル情報を指定する場合、著者は STYLE要素を用いる必要がある。 より柔軟な最適化を行うには、著者はスタイルを外部スタイルシートで定義する必要がある。
<!ELEMENT STYLE - - %StyleSheet -- style info --> <!ATTLIST STYLE %i18n; -- lang, dir, for use with title -- type %ContentType; #REQUIRED -- content type of style language -- media %MediaDesc; #IMPLIED -- designed for use with these media -- title %Text; #IMPLIED -- advisory title -- >
開始タグ: 必須、終了タグ: 必須
属性定義
STYLE要素を使うと、著者は、スタイルシート規則を文書のヘッダに含ませることができる。 HTMLでは、1文書のHEAD要素に、いくつ STYLE要素があっても構わない。
スタイルシートをサポートしないユーザエージェントや、ある STYLE要素で使われている特定のスタイルシート言語をサポートしないユーザエージェントは、当該 STYLE要素の内容を隠す必要がある。 その内容を、文書中のテキストの一部としてレンダリングしてしまうのは、エラーである。 スタイルシート言語の中には、非適合ユーザエージェントから内容を隠すシンタクスをサポートしているものもある。
スタイルデータのシンタクスは、スタイルシート言語に依存する。
スタイルシート実装によっては、style属性よりも STYLE要素の方で、広汎なスタイル規則が許容されるようである。 例えばCSSの場合、スタイル規則は STYLE要素で次のように宣言できる。
スタイル規則の優先順位及び継承に関する規約は、スタイルシート言語に依存する。
CSSによる次のSTYLE宣言は、 文書の全 H1要素を枠線で囲い、かつページ中央揃えにする。
<HEAD> <TITLE>CSSによるSTYLE宣言例</TITLE> <STYLE type="text/css"> H1 {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD>
このスタイル情報を、特定クラスの H1要素だけに適用されるように指定するため、次のように変形してみよう。
<HEAD> <TITLE>特定クラスにだけ適用させる例</TITLE> <STYLE type="text/css"> H1.myclass {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <BODY> <H1 class="myclass"> この見出しはスタイル指定の影響を受ける </H1> <H1> この見出しはスタイル指定の影響を受けない </H1> </BODY>
更にまた、スタイル情報の有効範囲を単一の H1インスタンスに制限するために、 id属性を設定しよう。
<HEAD> <TITLE>特定インスタンスにだけ適用させる例</TITLE> <STYLE type="text/css"> #myid {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <BODY> <H1 class="myclass"> このH1は影響を受けない </H1> <H1 id="myid"> このH1はスタイルの影響を受ける </H1> <H1> このH1は影響を受けない </H1> </BODY>
スタイル情報はほとんどすべてのHTML要素に設定できるが、 DIV要素と SPAN要素の2つは、ブロックレベルとインラインの違いを除いて何のプレゼンテーションセマンティクスをも表さないという点で有用である。 この2要素とスタイルシートとを組み合わせることで、特にclass属性と id属性を用いる場合、ユーザはHTMLを無限に拡張することができる。
次の例では、 SPAN要素を用いてある段落の冒頭のフォントスタイルをスモールキャップに設定している。
<HEAD> <TITLE>特定SPANへのスタイル設定例</TITLE> <STYLE type="text/css"> SPAN.sc-ex { font-variant: small-caps } </STYLE> </HEAD> <BODY> <P><SPAN class="sc-ex">Small-caps</SPAN>フォントで、この段落の冒頭が表示される。 </BODY>
次の例では、DIV要素と class属性を用いて、ある学術論文の「概要」を構成する段落群のテキストを両端揃えに設定している。 このスタイル情報は、他の章の概要についても、 class属性を設定することで再利用できる。
<HEAD> <TITLE>特定段落群へのスタイル設定例</TITLE> <STYLE type="text/css"> DIV.Abstract { text-align: justify } </STYLE> </HEAD> <BODY> <DIV class="Abstract"> <P>The Chieftain product range is our market winner for the coming year. This report sets out how to position Chieftain against competing products. <P>Chieftain replaces the Commander range, which will remain on the price list until further notice. </DIV> </BODY>
HTMLでは、著者は文書をレンダリングするメディア (例えば、グラフィカルなディスプレイ、テレビ、携帯機器、音声ブラウザ、点字出力機器、等) の特性を生かした文書設計を行うことができる。 media属性を指定することで、著者は、ユーザエージェントがスタイルシートを選択的に読み込めるようにさせられる。 認定されているメディア記述子の項を参照されたい。
次の例は、 H1要素に適用される宣言である。 会議の場でスクリーンに投影される際には、すべてのH1インスタンスが青で表示され、印刷の場合は中央揃えになる。
<HEAD> <TITLE>出力メディア別のスタイル設定例</TITLE> <STYLE type="text/css" media="projection"> H1 { color: blue} </STYLE> <STYLE type="text/css" media="print"> H1 { text-align: center } </STYLE>
次の例は、上記の末尾に、音声出力用にアンカーの音声効果を加えるものである。
<STYLE type="text/css" media="aural"> A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)} </STYLE> </HEAD>
出力メディアの制御は、外部スタイルシートに適用する場合に特に関心が持たれる。なぜなら、現在の出力機器に適用されるスタイルシートだけをネットワークから取得することで、ユーザエージェントは時間を節約できるからだ。 例えば、音声ブラウザは、視覚系レンダリング向けに設計されたスタイルシートをダウンロードしないようにできる。 更なる情報は、 メディア依存のカスケードの項を参照されたい。
著者は、スタイルシートをHTML文書から切り離すことができる。こうすることには、幾つかの利点がある。
HTMLでは、著者は、いくつの外部スタイルシートを1つの文書と関連づけてもよい。 複数の外部スタイルシートの間の相互作用については、スタイルシート言語が定める(例えばCSSの「カスケード」規則)。
著者は、代替スタイルシートと呼ばれる、相互に排他的なスタイルシートを、多数指定してよい。 ユーザは、その中から、自らの好みに応じて、気に入ったスタイルシートを選び得る。 例えば、著者は、小画面用に設計したスタイルシートと弱視用の(大きいフォントを使うなどした)スタイルシートとを指定できる。ユーザエージェントは、ユーザに対し、代替スタイルシート群からの選択を可能にしなければならない。
著者は、代替スタイルシート群の1つを、優先スタイルシートに指定できる。 ユーザエージェントは、ユーザが別の代替スタイルシートを選ばない限り、著者による優先スタイルシートを適用しなければならない。
著者は、優先スタイルシートも含め、複数の代替スタイルシートを1つのスタイル名でグループ化することができる。 ユーザが、ある命名されたスタイルを選択する場合、ユーザエージェントはその名前を持つすべてのスタイルシートを適用しなければならない。 ユーザエージェントは、別のスタイル名を持つ代替スタイルシートを適用してはならない。 外部スタイルシートの指定の項で、スタイルシートのグループへの命名法を解説する。
著者はまた、ユーザエージェントが常に他の代替スタイルシートと共に適用しなければならない、固定スタイルシートを指定することもできる。
ユーザエージェントは、どのスタイルシートを適用する際にもメディア記述子を尊重する必要がある。
ユーザエージェントはまた、著者指定のスタイルシートすべてをユーザが不使用にできるようにする必要がある。この場合ユーザエージェントは、すべての固定スタイルシートも代替スタイルシートも適用してはならない。
著者は、外部スタイルシートの指定を、 LINK要素の、次の属性で行う。
ユーザエージェントは、ユーザに対し、代替スタイル一覧を眺めて選択できるような手段を提供する必要がある。 各選択項目の名称として、 title属性値の利用が推奨される。
次の例では、mystyle.cssというファイルの固定スタイルシートを指定している。
<LINK href="mystyle.css" rel="stylesheet" type="text/css">
これにtitle属性を設定することで、著者の優先スタイルシートに変更できる。
<LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">
更に "alternate" というキーワードを rel属性に追加することで、これを代替スタイルシートに変更できる。
<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">
外部スタイルシートについて更に情報を得たい場合は、リンクと外部スタイルシートの項を参照されたい。
当該文書の優先スタイルシートは、META要素によっても指定できる。 例えば、上記 "compact" を優先スタイルシートにするには、著者は次のような行を HEADに含めることができる。
<META http-equiv="Default-Style" content="compact">
優先スタイルシートは、HTTPヘッダによっても指定できる。 上の META宣言は、次のHTTPヘッダと等価である。
Default-Style: "compact"
もし2つ以上の META宣言あるいはHTTPヘッダが優先スタイルシートを指定している場合、最後のものが優先する。 この観点からは、HTTPヘッダは文書の HEADよりも前に存在するものと考えられる。
もし2つ以上のLINK要素が優先スタイルシートを指定している場合は、最初のものが優先する。
META宣言かHTTPヘッダで指定される優先スタイルシートは、 LINK要素の指定よりも優先する。
CSSなどのカスケードできるスタイルシート言語は、複数のソースにあるスタイル情報を混ぜ合わせることを許容する。 しかし、すべてのスタイルシート言語がカスケード機構をサポートしているわけではない。 カスケードを定めるために、著者は LINK要素かつ/またはSTYLE要素を並べていくことになる。 スタイル情報は、これらの要素が HEAD要素中に出現する順にカスケードする。
注意。 本仕様は、異なるスタイルシート言語による複数のスタイルシートがどのようにカスケードするかは定めない。著者は、複数のスタイルシート言語の混用を避ける必要がある。
次の例では、"compact" と命名した2つの代替スタイルシートを指定している。ユーザが "compact" スタイルを選んだ場合、ユーザエージェントはこの2つの外部スタイルシートと、固定の "common.css" スタイルシートとを適用しなければならない。 ユーザが "big print" スタイルを選んだ場合、代替スタイルシート "bigprint.css" と固定の "common.css" スタイルシートのみを適用しなければならない。
<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css"> <LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css"> <LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css"> <LINK rel="stylesheet" href="common.css" type="text/css">
今度は、 LINK要素とSTYLE要素を両方含むカスケードの例を示す。
<LINK rel="stylesheet" href="corporate.css" type="text/css"> <LINK rel="stylesheet" href="techreport.css" type="text/css"> <STYLE type="text/css"> p.special { color: rgb(230, 100, 180) } </STYLE>
1つのカスケードには、異なるメディアへ適用されるスタイルシートが含まれていてもよい。 LINK要素もSTYLE要素も、media属性を設定して、共に用い得る。 ユーザエージェントは、現在の出力メディアに適用しないスタイルシートを篩い分ける責任を負う。
次に、"corporate" スタイルシートを複数のバージョンで提供する例を示す。各々、印刷用、スクリーン用、そして音声ブラウザ用 (例えば車内で電子メールを読ませたりするのに便利) のバージョンである。 "techreport" スタイルシートは、すべての出力メディアにおいて適用される。 STYLE要素で定義されている色規則は、印刷とスクリーンでは適用されるが、聴覚系のレンダリングには適用されない。
<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css"> <LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css"> <LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css"> <LINK rel="stylesheet" href="techreport.css" type="text/css"> <STYLE media="screen, print" type="text/css"> p.special { color: rgb(230, 100, 180) } </STYLE>
文書のレンダリングを行う際、ユーザエージェントはスタイルプロパティの値を知る必要がある。例えば、フォントファミリ、フォントスタイル、フォントサイズ、行の高さ、テキスト色、などである。 正確なメカニズムはスタイルシート言語に依存するが、次の説明は一般的に当てはまる。
カスケード機構は、多くのスタイル規則がある要素に直接適用される場合に使われる。 この機構は、ユーザエージェントに対し、どの規則を適用するかを決定するために、特性によって規則を仕分けすることを許容する。 直接的な規則がなかった場合、次に取る方法は、継承されるスタイルプロパティの有無に依存する。 すべてのプロパティが継承できるわけではない。 継承されないプロパティについては、ある特定の要素について明示された規則が存在しない場合に用いるデフォルト値を、スタイルシート言語が用意している。
プロパティが継承できる場合、ユーザエージェントは直接の親である要素を検査し、スタイル規則が適用されていないかどうかを確認する。この過程は、適用可能な規則が確認できるまで続けられる。 この機構により、スタイルシートを簡潔に指定できる。 例えば、著者は、 BODY要素に含まれるすべての要素のフォントファミリーの指定を、 BODYに適用する1つの規則で指定できる。
スタイルシートによっては、非適合ユーザエージェントからSTYLE要素の内容を隠すことを著者に許容するようなシンタクスをサポートしているものがある。
次の例では、STYLE要素の内容を旧式の非適合ユーザエージェントがテキストとしてレンダリングしてしまわないように、コメントアウトする際の、CSSでの手法を説明する。
<STYLE type="text/css"> <!-- H1 { color: red } P { color: blue} --> </STYLE>
この項目は、Linkヘッダフィールドに関する定めがあるバージョンのHTTP規定に適合するユーザエージェントにのみ適用される。 [RFC2616] が定める HTTP 1.1 にはLinkヘッダフィールドが含まれていないので注意されたい (RFC2616の19.6.3参照)。
Webサーバの管理者は、同一グループのページ群について、ある1つのスタイルシートが適用されるようにサーバを設定すると便利であると考える場合もあろう。 HTTPのLinkヘッダは、同じ内容の属性と値を持つLINK要素と、等しい効果を持っている。 複数のLinkヘッダは、同じ順序で並ぶ複数の LINK要素に対応する。 例えば、次のLinkヘッダは:
Link: <http://www.acme.com/corporate.css>; REL=stylesheet
下記のLINK要素に対応する。
<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">
複数の Linkヘッダを用いて、複数の代替スタイルを指定することもできる。デフォルトスタイルを決めるには、rel属性を用いる。
次の例では、"compact" がデフォルトとして適用される。 なぜならrel属性にキーワード "alternate" がないからだ。
Link: <compact.css>; rel="stylesheet"; title="compact" Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"
Linkヘッダは、電子メールでHTML文書を送る場合にも機能する必要がある。 電子メールエージェントの中には、[RFC822] ヘッダの順序を変更できるものもあるので、 Linkヘッダで指定するスタイルシートのカスケード順が変えられてしまうことを避けるために、 著者は、同じヘッダフィールドを持つ複数のインスタンスを結合する機能を利用することができる。 属性値が空白文字を含む場合のみ、引用符が必要となる。 HTTPヘッダや電子メールヘッダに直接記述することが許されない文字や、ゲートウェイを通過させるのに問題がありがちな文字は、SGML実体を利用して参照すること。
HTTPヘッダによって暗示される LINK要素や META要素は、 文書の HEAD要素で明示されている、どの LINK要素並びに META要素よりも前に存在するものと定義される。