REC-CSS1-961217
REC-CSS1-961217
この文書は、W3C勧告である。この文書はW3C (http://www.w3.org/) の会員によって検討され、仕様書が利用に適しているとの全体的な合意に達している。これは確定的な文書であり、参照資料として用いたり、他の文書からの規範的リファレンスとして引用してもよい。W3Cは、この勧告の広範な普及を推進する。
現行のW3C勧告およびその他の技術文書の一覧は http://www.w3.org/pub/WWW/TR/ で見られる。
この文書は、カスケーディングスタイルシート機構の第1水準(CSS1)を規定するものである。CSS1は、制作者や読者がHTML文書にスタイル(例. フォント、色、間隔指定)を添付できるようにする簡素なスタイルシート機構である。CSS1言語は人が読み書き可能なものであり、一般的なデスクトップパブリッシング用語でスタイルを表現するものである。
CSSの基本的な機能のひとつは、スタイルシートがカスケードすることである。制作者は好みのスタイルシートを添付できるし、読者もまた個人的なスタイルシートを持って人的あるいは技術的なハンディキャップを調整してもよい。異なるスタイルシート間の矛盾を解決するための規則は、この仕様書の中で定義される。
この勧告は スタイルシートの領域におけるW3C活動から結実した。スタイルシートに関する背景的情報については [1] を見ること。
概要
用語
1 基本概念
1.1 HTMLへの取り込み
1.2 グループ化
1.3 継承
1.4 セレクタとしてのクラス
1.5 セレクタとしてのID
1.6 文脈的セレクタ
1.7 注釈
2 擬似クラスおよび擬似エレメント
2.1 アンカー擬似クラス
2.2 印刷術的擬似エレメント
2.3 'first-line' 擬似エレメント
2.4 'first-letter' 擬似エレメント
2.5 セレクタ内の擬似エレメント
2.6 複合的擬似エレメント
3 カスケード
3.1 'important'
3.2 カスケードの順序
4 フォーマットモデル
4.1 ブロックレベルエレメント
4.1.1 垂直方向のフォーマット
4.1.2 水平方向のフォーマット
4.1.3 リスト項目エレメント
4.1.4 浮動エレメント
4.2 インラインエレメント
4.3 置換エレメント
4.4 行の高さ
4.5 キャンバス
4.6 'BR' エレメント
5 CSS1プロパティ
5.1 プロパティ値の表記
5.2 フォントプロパティ
5.2.1 フォントの照合
5.2.2 'font-family'
5.2.3 'font-style'
5.2.4 'font-variant'
5.2.5 'font-weight'
5.2.6 'font-size'
5.2.7 'font'
5.3 色および背景プロパティ
5.3.1 'color'
5.3.2 'background-color'
5.3.3 'background-image'
5.3.4 'background-repeat'
5.3.5 'background-attachment'
5.3.6 'background-position'
5.3.7 'background'
5.4 テキストプロパティ
5.4.1 'word-spacing'
5.4.2 'letter-spacing'
5.4.3 'text-decoration'
5.4.4 'vertical-align'
5.4.5 'text-transform'
5.4.6 'text-align'
5.4.7 'text-indent'
5.4.8 'line-height'
5.5 ボックスプロパティ
5.5.1 'margin-top'
5.5.2 'margin-right'
5.5.3 'margin-bottom'
5.5.4 'margin-left'
5.5.5 'margin'
5.5.6 'padding-top'
5.5.7 'padding-right'
5.5.8 'padding-bottom'
5.5.9 'padding-left'
5.5.10 'padding'
5.5.11 'border-top-width'
5.5.12 'border-right-width'
5.5.13 'border-bottom-width'
5.5.14 'border-left-width'
5.5.15 'border-width'
5.5.16 'border-color'
5.5.17 'border-style'
5.5.18 'border-top'
5.5.19 'border-right'
5.5.20 'border-bottom'
5.5.21 'border-left'
5.5.22 'border'
5.5.23 'width'
5.5.24 'height'
5.5.25 'float'
5.5.26 'clear'
5.6 分類プロパティ
5.6.1 'display'
5.6.2 'white-space'
5.6.3 'list-style-type'
5.6.4 'list-style-image'
5.6.5 'list-style-position'
5.6.6 'list-style'
6 単位
6.1 長さ単位 (length units)
6.2 百分率単位 (percentage units)
6.3 色単位 (color units)
6.4 URL
7 CSS1適合性
7.1 前方互換的 (forward-compatible) 解析
8 参照資料
9 謝辞
付録A: HTML 2.0 のためのサンプルスタイルシート
付録B: CSS1文法
付録C: エンコーディング
付録D: ガンマ補正
付録E: CSS1の応用性および拡張性
この仕様書のテキストにおいて、単引用符 ('...') はHTMLやCSSの抜粋を示す。
単純なスタイルシートを設計することは、簡単である。HTMLを少しと、いくらかの基本的なデスクトップパブリッシング用語とを知りさえすればよいのである。たとえば 'H1' エレメントのテキスト色を青に設定するには、
H1 { color: blue }
とすればよい。
上記の例は単純なCSSルールである。1つのルールは2つの主要な部分からなる。セレクタ ('H1') と宣言 ('color:blue') である。上記の例は、HTML文書をレンダリングするために必要なプロパティのうちのたった1つに影響を与えようとするにすぎないが、それ自体でスタイルシートとしての資格を満たしている。他のスタイルシートと組み合わされて(スタイルシートが組み合わされることは、CSSの基本的な機能のひとつである)、このスタイルシートは文書の最終的な表現を決定することになる。
セレクタはHTML文書とスタイルシートとの間の掛け橋であり、すべてのHTMLエレメント型がセレクタとなりうる。HTMLエレメント型は、HTML仕様書 [2] において定義されている。
'color' プロパティは、HTML文書の表現を決定する50前後のプロパティのひとつである。プロパティとその取りうる値の一覧は、この仕様書において定義される。
HTML制作者は、自分の文書に特別なスタイルを示唆したいときにだけスタイルシートを書けば足りる。ユーザエージェント(しばしば「ウェブブラウザ」または「ウェブクライアント」)は各自、合理的な - しかしおそらく平凡な - 方法で文書を表示するデフォルトのスタイルシートを有しているであろう。付録Aには、HTML 2.0 仕様書 [3] で示唆されているようにHTML文書を表現するためのサンプルのスタイルシートがある。
CSS1言語の形式的文法は 付録Bにおいて定義されている。
スタイルシートが表現に影響を与えるためには、ユーザエージェントがその存在に気づいていなければならない。HTMLをスタイルシートとどのようにリンクすればよいかは、HTML仕様書 [2] が定義している。したがって、この節は参考情報であって、規範的ではない。
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>見出しは青</H1>
<P STYLE="color: green">だが段落は緑色
</BODY>
</HTML>
この例は、スタイルとHTMLとを結合する4つの方法を示している。'LINK' エレメントを用いて外部スタイルシートをリンクする、 'HEAD' エレメントの内部に 'STYLE' エレメントを置く、 CSSの '@import' 表記を用いてスタイルシートをインポートする、 'BODY' 内部のエレメントに 'STYLE' アトリビュートを設定する、の4つである。最後の選択肢は、スタイルを内容と混ぜ合わせ、伝統的なスタイルシートの一致する利点を失うものである。
'LINK' エレメントは読者が選択できる代替スタイルシートを参照するが、インポートされたスタイルシートは残りのスタイルシートと自動的に併合される。
伝統的に、ユーザエージェントは未知のタグを黙って無視している。結果として、古いユーザエージェントは 'STYLE' エレメントを無視するが、その内容は文書本文の一部として扱われ、そうしたものとしてレンダリングされることになる。移行局面にある間は、'STYLE' エレメントの内容はSGML注釈を用いて隠してもよい。
<STYLE TYPE="text/css"><!--
H1 { color: green }
--></STYLE>
'STYLE' エレメントは([2] で定義されているように)DTDにおいて "CDATA" として宣言されているから、適合的なSGMLパーサは上記のスタイルシートを除去されるべき注釈とみなさないことになる。
スタイルシートのサイズを縮小するため、コンマで区切られたリストの中にセレクタをグループ化することができる。
H1, H2, H3 { font-family: helvetica }
同様に、宣言もグループ化できる。
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
さらに、プロパティによっては、独自のグループ化文法をもつものがある。
H1 { font: bold 12pt/14pt helvetica }
これは前記の例と等価である。
最初の例では 'H1' エレメントの色が青に設定された。強調されたエレメントが内部にある 'H1' エレメントがあるとする。
<H1>見出しは<EM>重要</EM>です!</H1>
'EM' エレメントにどの色も割り当てられていなければ、強調された「重要」は親エレメントの色を継承する、すなわち、これも青色で現れることになる。たとえば 'font-family' や 'font-size' といった他のスタイルプロパティも同様に継承される。
文書に「デフォルト」のスタイルプロパティを設定するには、そこからすべての可視的エレメントが下りてくるような大本のエレメント上にプロパティを設定すればよい。HTML文書においては、'BODY' エレメントがこの機能を果たしうる。
BODY {
color: black;
background: url(texture.gif) white;
}
これは、制作者が 'BODY' タグを省略していても(これは合法である)機能するであろう。HTMLパーサは欠けたタグを推測するであろうからである。上記の例は、テキスト色は黒、背景はある画像に設定している。もし画像が利用可能でなければ、背景は白になることになる。(これについては 5.3 を見ること。)
スタイルプロパティの中には、親エレメントから子エレメントに継承されないものがある。継承されない理由は、多くの場合は直感的である。たとえば、'background' プロパティは継承されないが、デフォルトでは親エレメントの背景が透けて見えることになる。
しばしば、プロパティの値が他のプロパティを参照する百分率であることもある。
P { font-size: 10pt }
P { line-height: 120% } /* 'font-size' との相対比較、すなわち 12pt */
百分率値 (percentage value) を許容するプロパティそれぞれについて、それがどのプロパティを参照するかが定義されている。'P' の子エレメントは、'line-height' の計算後の値(すなわち 12pt)を継承するのであって、百分率を継承するのではない。
エレメントの制御のきめ細かさを増すため、HTML [2] に 'CLASS' という新しいアトリビュートが追加されている。'BODY' エレメント内部のエレメントはすべてがクラス化でき、またそのクラスはスタイルシート内で扱うことができる。
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>緑濃き道</H1>
</BODY>
</HTML>
クラス化されたエレメントには通常の継承規則が適用される。文書構造における親エレメントから値を継承するのである。
セレクタ内のタグ名を省略することにより、同じクラスのすべてのエレメントをアドレスできる。
.pastoral { color: green } /* pastoral クラスをもつエレメントすべて */
指定できるクラスはセレクタごとに1つだけである。したがってCSS1では 'P.pastoral.marine' は不法なセレクタである。(後述するが、文脈的セレクタは単純セレクタごとに1つのクラスをもつことができる。)
CSSは CLASS アトリビュートにとても大きな力を与えるので、多くの場合、どのHTMLエレメントにクラスが設定されているかが問題とさえならない - どのようなエレメントでも、他のほとんどどのエレメントをエミュレートさせることができるのである。この力に頼ることは、広域的な意味をもつ文書構造のレベル(HTMLエレメント)を除去するから、勧められない。CLASS を基礎とした構造が有益なのは、クラスの意味が相互に合意されているような限られた地域の内部においてだけである。
HTML [2] は、文書を通じて一意な値をもつことが保証された 'ID' アトリビュートも導入する。それゆえ、このアトリビュートスタイルシートセレクタとして特別な重要性をもつものとなりうる。前に '#' をつけてアドレスできる。
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>横に広いテキスト</P>
上記の例では、最初のセレクタは 'ID' アトリビュート値のせいで 'P' エレメントに合致する。2番目のセレクタは、エレメント型 ('H1') と ID 値との両方を指定しており、したがって 'P' エレメントとは合致しないことになる。
ID アトリビュートをセレクタとして用いることにより、スタイルプロパティをエレメント単位の基盤で設定することができる。スタイルシートは文書構造を高めるために設計されているが、この機能は、制作者が、キャンバス上で見栄えよく表現される文書を、HTMLの構造的エレメントを利用しないで制作することを可能にする。こうしたスタイルシートの利用は推奨されない。
継承はCSS設計者のタイピングの手間を節約する。すべてのスタイルプロパティを設定する代わりに、デフォルトを制作して例外を列挙できるのである。'H1' の内部の 'EM' エレメントに違う色を与えるため、
H1 { color: blue }
EM { color: red }
と指定する者もいるかもしれない。
このスタイルシートが有効となるとき、'H1' の内部であると外部であるとを問わず、強調部分はすべて赤に変わることになる。おそらく 'H1' 内部の 'EM' エレメントだけが赤に変わって欲しかったのであろうが、これは
H1 EM { color: red }
と指定できる。
このとき、セレクタは開放エレメントのスタック上の検索パターンであり、この型のセレクタは文脈的セレクタ (contextual selector) と呼ばれる。文脈的セレクタは、空白で区切られた数個の単純セレクタからなる(ここまで説明してきたセレクタはすべて単純セレクタである)。最後の単純セレクタに合致するエレメント(この場合では 'EM' エレメント)だけが、しかも検索パターンが合致するときだけ、アドレスされる。CSS1における文脈的セレクタは祖先関係を探すが、他の関係(例.親-子関係)は今後の見直しにおいて導入されるかもしれない。上記の例では、検索パターンは、'EM' が 'H1' の子孫であれば、すなわち 'EM' が 'H1' エレメントの内部にあれば、合致する。
UL LI { font-size: small }
UL UL LI { font-size: x-small }
ここでは、最初のセレクタは、少なくとも1つの 'UL' を祖先にもつ 'LI' エレメントを照合する。2番目のセレクタは、最初のセレクタの下位セット、すなわち、少なくとも2つの 'UL' を祖先にもつ 'LI' エレメントを照合する。衝突は、2番目のセレクタがより長い検索パターンであるためにより特定的であるということにより、解決される。これについては カスケードの順序 (3.2) を見ること。
文脈的セレクタは、エレメント型や、CLASS アトリビュート、ID アトリビュート、あるいはこれらの組み合わせを探すことができる。
DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
最初のセレクタは、祖先の中に 'DIV' をもつ 'P' エレメントすべてを照合する。2番目のセレクタは、'reddish' というクラスの祖先をもつ 'H1' エレメントすべてを照合する。3番目のセレクタは、'ID=x78y' をもつエレメントの子孫である 'CODE' エレメントすべてを照合する。4番目のセレクタは、'sidenote' というクラスをもつ 'DIV' という祖先を有する 'H1' エレメントすべてを照合する。
数個の文脈的セレクタは、ひとまとめにグループ化できる。
H1 B, H2 B, H1 EM, H2 EM { color: red }
これは、
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
と等価である。
CSSスタイルシートにおけるテキスト注釈は、Cプログラミング言語 [7] における注釈に似ている。
EM { color: red } /* 赤い、まさに赤い!! */
コメントはネストできない。CSS1パーサにとって、注釈は空白と等価である。
CSS1では、スタイルは通常、文書構造における位置に基づいてエレメントに添付される。この単純なモデルは、多種多様なスタイルにとって充分であるが、いくつかの一般的な効果をカバーしていない。擬似クラスおよび擬似エレメントの概念は、CSS1におけるアドレッシングを拡張して、外部的情報がフォーマット処理に影響を与えられるようにする。
擬似クラスおよび擬似エレメントは、CSSセレクタ内で使うことができるが、HTMLソース内には存在しない。それらはむしろ、スタイルシート内のアドレッシングに用いるために一定の条件でユーザエージェントによって「挿入される」ものである。「クラス」や「エレメント」と呼ばれるのは、その挙動を説明するのに便利な方法だからである。具体的には、それらの挙動は仮想タグ列 (fictional tag sequence) によって定義される。
擬似エレメントはエレメントのサブパート (subpart) を処理するために用いられ、擬似クラスはスタイルシートが異なるエレメント型を区別できるようにする。
ユーザエージェントは一般的に、最近訪問したアンカーを、古いアンカーと違えて表示する。これはCSS1においては 'A' エレメント上の擬似クラスを通じて扱われる。
A:link { color: red } /* 未訪問リンク */
A:visited { color: blue } /* 既訪問リンク */
A:active { color: lime } /* アクティブリンク */
'HREF' アトリビュートのある 'A' エレメントはすべて、これらのグループのうちの1つ、しかも1つだけに分けられることになる(ターゲットアンカーは影響を受けない)。ユーザエージェントは、一定時間後にエレメントを 'visited' から 'link' に移動させることを選んでもよい。'active' リンクとは、読者によって(たとえばマウスボタンを押すことにより)現在選択されているリンクである。
アンカー擬似クラスのフォーマッティングは、あたかもクラスが手作業で挿入されているかのようである。ユーザエージェントは、アンカー擬似クラスの転移により現在表示されている文書を再フォーマットすることを要求されない。たとえば、スタイルシートは合法的に 'active' リンクの 'font-size' を 'visited' リンクのものより大きく指定できるが、ユーザエージェントは、読者が 'visited' リンクを選択したときに文書を動的に再フォーマットすることを要求されないのである。
擬似クラスセレクタは通常のクラスと合致せず、その逆も真である。したがって、下記の例におけるスタイルルールには、何の影響力もない。
A:link { color: red }
<A CLASS=link NAME=target5> ... </A>
CSS1では、アンカー擬似クラスは 'A' 以外のエレメントには効果がない。したがって、エレメント型をセレクタから省略することができる。
A:link { color: red }
:link { color: red }
上記の2つのセレクタは、CSS1においては同じエレメントを選択している。
擬似クラス名は大文字小文字を区別しない。
擬似クラスは文脈的セレクタ内で用いることができる。
A:link IMG { border: solid blue }
また、擬似クラスは通常のクラスと組み合わせることができる。
A.external:visited { color: blue }
<A CLASS=external HREF="http://out.side/">外部リンク</A>
上記の例におけるリンクが訪問済みであれば、青でレンダリングされる。セレクタの中では、通常のクラス名が擬似クラスに先行することに注意すること。
一般的な印刷術的効果の中には、構造的エレメントではなく、むしろキャンバス上にフォーマットされるときの印刷術的項目と関連するものがある。CSS1では、擬似エレメントを通じて、そのような2つの印刷術的項目をアドレスできる。エレメントの最初の行と、最初の文字とである。
CSS1コア: ユーザエージェントは、セレクタ内の ';first-line' または ':first-letter' のあるルールをすべて無視し、または代わりにこれらの擬似エレメント上のプロパティの下位セットだけをサポートしてもよい。(7 を見ること)
'fisrt-line' 擬似エレメントは、キャンバス上にフォーマットされたときの最初の行に特別なスタイルを適用するために用いられる。
<STYLE TYPE="text/css">
P:first-line { font-style: small-caps }
</STYLE>
<P>The first line of an article in Newsweek.
テキストベースのユーザエージェントでは、これは、たとえばこういうようにフォーマットされる。
THE FIRST LINE OF AN article in Newsweek.
上記の例における仮想タグ列は、
<P> <P:first-line> The first line of an </P:first-line> article in Newsweek. </P>である。
'first-line' 終了タグは、キャンバス上にフォーマットされたときの最初の行の行末に挿入される。
'first-line' 擬似エレメントは、ブロックレベルエレメントにしか添付できない。
'first-line' 擬似エレメントはインラインエレメントに似ているが、一定の制約がある。次のプロパティだけが 'first-line' エレメントに適用されるのである。フォントプロパティ (5.2)、 色および背景プロパティ (5.3)、 'word-spacing' (5.4.1)、 'letter-spacing' (5.4.2)、 'text-decoration' (5.4.3)、 'vertical-align (5.4.4)、 'text-transform' (5.4.5)、 'line-height' (5.4.8)、 'clear' (5.5.26).
'first-letter' 擬似エレメントは、一般的な印刷術的効果である "initial caps" や "drop caps" を表わすために使われる。その 'float' プロパティが 'none' であればインラインエレメントに似ており、そうでない場合は浮動エレメント (floating element) に似ている。'first-letter' 擬似エレメントに適用されるプロパティは、これらのものである。フォントプロパティ (5.2), 色および背景プロパティ (5.3), 'text-decoration' (5.4.3), 'vertical-align ('float' が 'none' の場合のみ.5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), マージンプロパティ (5.5.1-5.5.5), パディングプロパティ (5.5.6-5.5.10), ボーダープロパティ (5.5.11-5.5.22), 'float' (5.5.25), 'clear' (5.5.26).
これは、2行にまたがる dropcap 頭文字の作り方である。
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
</BODY>
</HTML>
テキストベースのユーザエージェントが 'first-letter' 擬似エレメントをサポートしていれば(おそらくサポートしないだろうが)、上記の例はこういうふうにレンダリングされる。
___ | HE FIRST few | words of an article in the Economist.
仮想タグ列は、
<P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P>こうである。
'first-letter' 擬似エレメント開始タグは、それが添付されたエレメントの開始タグの直後に挿入されるが、'first-letter' 擬似エレメントタグは内容(すなわち頭文字)に隣接することに注意すること。
ユーザエージェントは、どのキャラクタが 'first-letter' エレメント内部にあるかを定義する。通常、最初の文字に先行する引用符は、含まれるべきである。
|| /\ bird in
/ \ the hand
/----\ is worth
/ \ two in
the bush," says an
old proverb.
段落がその他の句読点(例.括弧、省略符号)や、普通は文字とみなされないその他のキャラクタ(例.数字、数学記号)で始まるときは、'first-letter' 擬似エレメントはたいていは無視される。
言語によっては、一定の文字の組み合わせ方について特別な規則をもつ場合がある。たとえば、オランダ語では "ij" という文字の組み合わせが単語の始めに現れれば、それらは両方とも 'first-letter' 擬似エレメント内部のものとみなされるべきである。
'first-letter' 擬似エレメントはブロックレベルエレメントにしか添付できない。
文脈的セレクタ内では、擬似エレメントはセレクタの最後でだけ許される。
BODY P:first-letter { color: purple }
擬似エレメントはセレクタ内でクラスと組み合わせることができる。
P.initial:first-letter { color: red }
<P CLASS=initial>第一段落</A>
上記の例だと、'CLASS=initial' のある 'P' エレメントすべての最初の文字を赤にすることになる。クラスや擬似クラスと組み合わされるときには、擬似エレメントはセレクタの最後に記述されなければならない。記述できる擬似エレメントは、セレクタにつき1つだけである。
数個の擬似エレメントは、組み合わせることができる。
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Some text that ends up on two lines</P>
この例では、それぞれの 'P' エレメントの最初の文字は緑で、24pt のフォントサイズをもつことになる。(キャンバス上にフォーマットされた)最初の行の残りは青であり、段落の残りは赤になる。改行が "ends" という単語の前で起こったとすれば、仮想タグ列は
<P> <P:first-line> <P:first-letter> S </P:first-letter>ome text that </P:first-line> ends up on two lines </P>である。
'first-letter' エレメントが 'first-line' エレメントの内部にあることに注意すること。'first-line' に設定されたプロパティは 'first-letter' に継承されることになるが、同じプロパティが 'first-letter' に設定されていれば上書きされる。
擬似エレメントが実エレメントを分断するのであれば、必要な追加タグが仮想タグ列の中に再生成されなければならない。たとえば、もし SPAN エレメントが </P:first-line> タグをまたぐならば、SPAN の終了タグと開始タグとの組が再生成されなければならず、仮想タグ列は
<P> <P:first-line> <SPAN> This text is inside a long </SPAN> </P:first-line> <SPAN> span element </SPAN>となる。
CSSにおいては2つ以上のスタイルシートが同時に表現に影響を与えることができる。この機能には主要な理由が2つある。モジュール性と、制作者-読者のバランスである。
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);
H1 { color: red } /* インポートされたスタイルシートを上書きする */
ときには、表現に影響を与えるスタイルシートの間に矛盾衝突が生じるであろう。衝突の解決は各スタイルルールがウエイトを有することに基づく。デフォルトでは、読者のルールのウエイトは制作者の文書内のルールのウエイトよりも小さい。すなわち、もし読み込み中の文書のスタイルシートと読者の個人的なスタイルシートとの間に矛盾衝突があれば、制作者のルールが用いられることになるのである。読者のルールも制作者のルールも、ユーザエージェントのデフォルト値を上書きする。
インポートされたスタイルシートも、下記に定義されたカスケード規則に従い、インポートされた順に、互いにカスケードする。スタイルシート自体に記述されたルールはどれでも、インポートされたスタイルシート内のルールを上書きする。すなわち、インポートされたスタイルシートは、スタイルシート自体のルールよりもカスケード順が低いのである。インポートされたスタイルシート自身も、他のスタイルシートを再帰的にインポートして上書きできる。
CSS1では、'@import' 文はすべて、スタイルシートの最初に、どの宣言よりも前に現れなければならない。このことは、スタイルシート自体のルールがインポートされたスタイルシート内のルールを上書きすることをわかりやすくする。
スタイルシート設計者は自身の宣言のウエイトを増加することができる。
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
上記の例では、最初3つの宣言は積み増されたウエイトをもち、最後の宣言は通常のウエイトをもつ。
important 宣言のある読者ルールは、通常宣言のある制作者ルールを上書きすることになる。important 宣言のある制作者ルールは、important 宣言のある読者ルールを上書きすることになる。
ルールの矛盾抵触は、CSS機構にとって本質的である。エレメント/プロパティの組み合わせの値を知るには、以下のアルゴリズムをたどらなくてはならない。
LI {...} /* a=0 b=0 c=1 -> 特定性 = 1 */
UL LI {...} /* a=0 b=0 c=2 -> 特定性 = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> 特定性 = 3 */
LI.red {...} /* a=0 b=1 c=1 -> 特定性 = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> 特定性 = 13 */
#x34y {...} /* a=1 b=0 c=0 -> 特定性 = 100 */
擬似エレメントおよび擬似クラスは、それぞれ通常のエレメントおよびクラスとして数えられる。
あるルールが同じエレメント/プロパティの組み合わせに適用される他のルールよりも高いウエイトをもつならば、プロパティ値の検索はいつでも打ち切ることができる。
この戦略は、読者のスタイルシートよりも相当高いウエイトを制作者のスタイルシートに与える。そのため、たとえばプルダウンメニューを通じて、スタイルシートの影響をオフにできる能力を読者が有することが重要である。
エレメントの 'STYLE' アトリビュート内の宣言(例は 1.1 を見ること)は、スタイルシートの最後に記述されたIDベースのセレクタのある宣言と同じウエイトをもつ。
<STYLE TYPE="text/css">
#x97z { color: blue }
</STYLE>
<P ID=x97z STYLE="color: red">
上記の例では、'P' エレメントの色は赤になる。特定性は両方の宣言で同じであるが、カスケード規則5番により、'STYLE' アトリビュート内の宣言が 'STYLE' エレメント内の宣言を上書きすることになる。
ユーザエージェントは、たとえば 'ALIGN' というような他のスタイル的HTMLアトリビュートを優先することを選んでもよい。もしそうするのであれば、これらのアトリビュートは、特定性1の対応するCSSルールに翻訳される。ルールは、制作者のスタイルシートの最初にあるものとして考えられるのであり、後続のスタイルシートルールによって上書きされる可能性がある。移行局面では、この政策は、スタイル的アトリビュートがスタイルシートと共存することをより容易にするであろう。
CSS1は、単純なボックス指向フォーマットモデルを想定している。そこでは、各エレメントは1つ以上の長方形のボックスとなる。('display' の値に 'none' をもつエレメントはフォーマットされず、したがってボックスにならないことになる。) すべてのボックスは、核になる内容領域をもち、これには周囲に任意的 (optional) なパディング領域、ボーダー領域、マージン領域がつく。
_______________________________________
| |
| マージン(透明) |
| margin (transparent) |
| _________________________________ |
| | | |
| | ボーダー | |
| | border | |
| | ___________________________ | |
| | | | | |
| | | パディング | | |
| | | padding | | |
| | | _____________________ | | |
| | | | | | | |
| | | | 内容 | | | |
| | | | content | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| エレメントの幅 |
| element width |
| ボックスの幅 |
| box width |
マージン、パディング、ボーダーのサイズはそれぞれ、 マージン (5.5.1-5.5.5)、 パディング (5.5.6-5.5.10)、 ボーダー (5.5.11-5.5.22) プロパティで設定される。パディング領域はエレメント自身と同じ背景を使う(背景プロパティ (5.3.2-5.3.7) で設定される)。ボーダーの色およびスタイルはボーダープロパティで設定される。マージンはつねに透明であり、よって親エレメントが透けて見えることになる。
ボックスのサイズはエレメント幅(すなわちフォーマット済みテキストや画像)と、パディング、ボーダー、マージン領域との合計である。
フォーマッタの視点からは、エレメントの主要なタイプは2つある。ブロックレベルとインラインとである。
'display' の値が 'block' または 'list-item' であるエレメントは、ブロックレベル (block-level) エレメントである。また、浮動エレメント(floating element. 'float' の値が 'none' 以外であるエレメント)もブロックレベルエレメントとみなされる。
以下の例は、どのようにしてマージンやパディングが、2つの子エレメントをもつ 'UL' エレメントをフォーマットするかを示す。解説図を単純化するために、ボーダーはない。また、この例にある1文字「定数」は合法的なCSS1文法ではなく、スタイルシートの値を図と結びつけるための便宜的な方法である。
<STYLE TYPE="text/css">
UL {
background: red;
margin: A B C D;
padding: E F G H;
}
LI {
color: white;
background: blue; /* テキストは青地に白 */
margin: a b c d;
padding: e f g h;
}
</STYLE>
..
<UL>
<LI>リストの最初のエレメント
<LI>リストの2つ目のエレメント
</UL>
_________________________________________________________ | | | A UL マージン(透明) | | _________________________________________________ | | D | | B | | | E UL パディング(赤) | | | | _________________________________________ | | | | H | | F | | | | | a LI マージン(透明であり、 | | | | | | 赤が透けて見える) | | | | | | _________________________________ | | | | | | d | | b | | | | | | | e LI パディング(青) | | | | | | | | | | | | | | | | h リストの最初のエレメント f | | | | | | | | | | | | | | | | g | | | | | | | |_________________________________| | | | | | | | | | | | | a と c の最大値 | | | <- 最大値に注意 | | | _________________________________ | | | | | | | | | | | | | | d | e LI パディング(青) | | | | | | | | | | | | | | | | h リストの2つ目のエレメント f | | | | | | | | | | | | | | | | g | | | | | | | |_________________________________| | | | | | | | | | | | | c LI マージン(透明であり、 | | | | | | 赤が透けてみえる) | | | | | |_________________________________________| | | | | | | | | G | | | |_________________________________________________| | | | | C | |_________________________________________________________|
概して、パディングやマージンプロパティは継承されない。しかし、例が示すように、エレメントの配置は祖先や兄弟との相対関係だから、これらのエレメントのパディングやマージンプロパティは、その子エレメントに影響をもつ。
上記の例にもしボーダーがあったならば、ボーダーはパディングとマージンとの間に現れたはずである。
以下の解説図は、いくつかの有益な用語を紹介する。
---------------- <-- 上端 top
上部マージン
top margin
----------------
上部ボーダー
top border
----------------
上部パディング
top padding
+----------+ <-- 内上端 inner top
| | | | | | | |
|-- 左側 --|-- 左側 --|-- 左側 --|-- 内容 --|-- 右側 --|-- 右側 --|-- 右側 --|
| マージン | ボーダー |パディング| |パディング| ボーダー | マージン |
| left | left | left | content | right | right | right |
| margin | border | padding | | padding | border | margin |
| | | | | | | |
+----------+ <-- 内下端 inner bottom
^ ^ ^ ^
外左端 内左端 内右端 外右端
left outer edge left inner edge right inner edge right outer edge
下部パディング
bottom padding
----------------
下部ボーダー
bottom border
----------------
下部マージン
bottom margin
---------------- <-- 下端 bottom
外左端 (left outer edge) は、パディング、ボーダー、マージンを考慮に入れたエレメントの端である。内左端 (left inner edge) は、内容だけの端であり、パディング、ボーダー、マージンの内側にある。右についても同じである。上端 (top) は、パディング、ボーダー、マージンを含めたオブジェクトの上端である。インラインエレメントおよび浮動エレメントにだけ定義され、非浮動ブロックレベルエレメントには定義されない。内上端 (inner top) は内容の上端であり、パディング、ボーダー、マージンの内側にある。下端 (bottom) はエレメントの下端であり、パディング、ボーダー、マージンの外側にある。インラインエレメントおよび浮動エレメントにだけ定義され、非浮動ブロックレベルエレメントには定義されない。内下端 (inner bottom) はエレメントの下端であり、パディング、ボーダー、マージンの内側にある。
エレメントの幅 (width) は、内容の幅、すなわち内左端と内右端との間の距離である。高さ (height) は内容の高さ、すなわち内上端から内下端までの距離である。
非浮動のブロックレベルエレメントのマージンの幅は、周囲のボックスの端までの最短距離を指定する。2つまたはそれ以上の隣接する(すなわち、間にボーダーやパディング、内容がない)垂直方向のマージンは押しつぶされ、マージン値の最大値が使われる。たいていの場合、垂直方向のマージンを押しつぶした後のほうが、結果が視覚的により快適であり、設計者が期待したものにより近い。上記の例だと、2つの 'LI' エレメントの間のマージンは、1つ目の LI エレメントの 'margin-bottom' と2つ目の LI エレメントの 'margin-top' との最大値を用いることにより押しつぶされる。同様に、もし 'UL' と1つ目の 'LI' エレメントの間のパディング(定数 "E")が 0 であったならば、UL と1つ目の LI エレメントのマージンは押しつぶされていただろう。
負マージンの場合には、隣接する正のマージンの最大値から隣接する負のマージンの絶対値の最大値が差し引かれる。もし正のマージンがなければ、隣接する負のマージンの絶対値の最大値が0から差し引かれる。
非浮動ブロックレベルエレメントの水平方向の位置およびサイズは、7つのプロパティによって決定される。'margin-left'、'border-left'、'padding-left'、'width'、'padding-right'、'border-right'、'margin-right' である。これら7つの合計は、つねに親エレメントの 'width' に等しい。
デフォルトでは、エレメントの 'width' は 'auto' である。これは、エレメントが置換エレメントでなければ、ユーザエージェントにより、上述した7つのプロパティの合計が親エレメントの幅と等しくなるよう 'width' が計算されるということである。エレメントが置換エレメントならば、'width' の 'auto' という値は自動的にエレメントの本来的な幅で置き換えられる。
7つのプロパティのうち3つは 'auto' に設定できる。'margin-left'、'width'、'margin-right' である。置換エレメントについては、'width' の 'auto' という値は本来的な幅で置き換えられるから 'auto' の値は2つしかあり得ない。
'width' は、ユーザエージェントが定義した非負の最小値をもっている(これは、エレメントごとに違っていてよく、他のプロパティに依存していてもよい)。'width' が明示的に設定されるか、'auto' であって下記の規則のために小さくなりすぎたためにこの限界を下回れば、その値は代わりにこの最小値で置き換えられることになる。
'margin-left'、'width'、'margin-right' のうちちょうど1つが 'auto' であれば、ユーザエージェントは、7つのプロパティの合計が親エレメントの幅に等しくなるような値をそのプロパティに割り当てる。
'auto' のプロパティがひとつもなければ、 'margin-right' の値が 'auto' を割り当てられることになる。
3つのうち2つ以上が 'auto' であり、そのうちの1つが 'width' であれば、残り('margin-left' および/または 'margin-right')は 0 に設定され、'width' は7つのプロパティの合計を親エレメントの幅と等しくするために必要な値を得ることになる。
そうではなくて、'margin-left' と 'margin-right' の両方が 'auto' であれば、それらは等しい値を設定される。これははエレメントをその親エレメントの内側で中央寄せにすることになる。
インラインまたは浮動のエレメントの7つのプロパティの1つの値として 'auto' が設定されれば、あたかも 0 が設定されたかのように扱われることになる。
垂直方向のマージンとは異なり、水平方向のマージンは押しつぶされない。
'display' プロパティ値に 'list-item' をもつエレメントは、ブロックレベルエレメントとしてフォーマットされるが、リスト項目マーカーがその前に立つ。マーカーの型は 'list-style' プロパティによって決定される。マーカーは 'list-style' プロパティの値にしたがって置かれる。
<STYLE TYPE="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>最初の項目が最初に来る
<LI>2つ目の項目が2つ目に来る
</UL>
<UL CLASS=COMPACT>
<LI>最初の項目が最初に来る
<LI>2つ目の項目が2つ目に来る
</UL>
上記の例は、たとえばこうフォーマットされるであろう。
* 最初の項目が
最初に来る
* 2つ目の項目が
2つ目に来る
* 最初の項目が
最初に来る
* 2つ目の項目が
2つ目に来る
右横書きのテキストだったならば、マーカーはボックスの右側に来ただろう。
'float' プロパティを用いて、エレメントを通常のエレメントの流れの外部に来るように宣言でき、そのときはブロックレベルエレメントとしてフォーマットされる。たとえば、ある画像の 'float' プロパティを 'left' に設定することで、その画像は、他のブロックレベルエレメントのマージン、パディング、ボーダーに達するまで、左に動かされる。通常の流れは右側で折り返すことになる。エレメント自体のマージン、ボーダー、パディングは尊重され、マージンは隣接するエレメントのマージンと押しつぶされることはない。
浮動エレメントは以下の制約に従って位置決めされる(用語の説明は、4.1 を見ること)。
<STYLE TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG SRC=img.gif>
サンプルテキストのマージンは...
</BODY>
上記の例だと、たとえばこうフォーマットされる。
__________________________________________ | | BODY マージンと P マージンの最大値 | ________________________________ | | | サンプルテキスト | B | P | IMG マージン のマージンは、浮 | O | | _____ 動エレメントがマ | D | マ | | | ージン、ボーダー、 | Y | | | | IMG | パディングを尊重 | | ジ | | | しつつ親エレメン | マ | ン | |_____| トの端へ動かされ | │ | | るとはどういうこ | ジ | | とかを示す以外に | ン | | は何の目的もない。 | | |隣接する垂直方向のマージンは、非 | | |浮動ブロックエレメントの間では押 | | |しつぶされる。
'P' エレメントのマージンが浮動の 'IMG' エレメントを取り囲んでいることに注意すること。
他のエレメントのマージン、ボーダー、パディング領域に浮動エレメントが重なりうる状況は、2つある。
ブロックレベルエレメントとしてフォーマットされないエレメントは、インライン (inline) エレメントである。インラインエレメントは、他のエレメントと行空間を共有できる。この例を考えてみよう。
<P>いくつかの<EM>強調を受けた</EM>単語が<STRONG>現れる</STRONG>。</P>
'P' エレメントは通常はブロックレベルエレメントであるが、'EM' と 'STRONG' はインラインエレメントである。もし 'P' エレメントが、エレメント全体を1行にフォーマットできるだけ広ければ、その行には2つのインラインエレメントがあることになる。
いくつかの強調を受けた単語が現れる。
もし1行にフォーマットするのに充分な場所がなければ、インラインエレメントは数個のボックスに分割されることになる。
<P>いくつかの<EM>強調を受けた単語が</EM>ここに現れる。</P>
上記の例は、このようにフォーマットされることもある。
いくつかの強調を受けた 単語がここに現れる。
インラインエレメントがマージン、ボーダー、パディング、添付されたテキスト装飾をもっていても、エレメントが改行されるところでは何の影響もないであろう。
-------------
いくつかの|強調を受けた
-------------
-------
単語が|ここに現れる。
-------
(上記の「図」は、アスキーグラフィックを用いているため、少し歪んでいる。行の高さの計算方法の解説については 4.4 を見ること。)
置換エレメントは、エレメントから指し示された内容で置き換えられるエレメントである。たとえば、HTMLでは 'IMG' エレメントは 'SRC' アトリビュートで指し示された画像で置き換えられる。置換エレメントは、それ自身の本来的な寸法 (intrinsic dimensions) を携えて到来すると考えることができる。'width' プロパティの値が 'auto' であれば、本来的な幅がエレメントの幅として用いられる。'auto' 以外の値がスタイルシートで指定されていれば、この値が使われ、置換エレメントは適宜サイズ変更される(サイズ変更の方法はメディアの型に依存することになる)。'height' プロパティも同じように使われる。
置換エレメントは、ブロックレベルにもインラインにもなりうる。
すべてのエレメントは 'line-height' プロパティをもつ。これは主にテキストの行の合計の高さを与える。その行の高さに達するよう、行のテキストの上下には空白が追加される。たとえば、テキストが 12pt の高さで、'line-height' が '14pt' に設定されていれば、2pt、すなわち行の上に 1pt、下に 1pt の余分の空白が追加される。空エレメントは、内容をもったエレメントのように、これらの計算に影響を及ぼす。
フォントサイズと 'ling-height' との間の差は リーディング (leading) と呼ばれる。リーディングの半分は 半リーディング (half-leading) と呼ばれる。フォーマット後は、各行は長方形の行ボックス (line-box) を形成することになる。
もし1行のテキストが(その行に複数のインラインエレメントがあるために)異なる 'line-height' 値を含んでいれば、それらの節のそれぞれが、自身の半リーディングを上下に有する。行ボックスの高さは、最も高い節の上端から最も低い節の下端までである。上端および下端は必ずしも最も背の高いエレメントとは一致するとは限らない。エレメントは 'vertical-align' プロパティで垂直方向に位置決めできるからである。段落を形成するために、それぞれの行ボックスは前の行の直下に積み重ねられる。
非置換インラインエレメントの上下のパディング、ボーダー、マージンは行の高さに影響しないことに注意すること。換言すると、選ばれたパディングやボーダーの割に 'line-height' が小さすぎれば、他の行にあるテキストと重なることになるのである。
その行にある置換エレメント(例.画像)は、置換エレメントの上端(すなわち、そのパディング、ボーダー、マージンを全部含めて)が最も背の高いテキスト節の上にあるか、または下端が最も低いものの下にあるならば、行ボックスを拡張することができる。
通常の場合、段落を通じて 'line-height' の値が1つしかなく背の高い画像もないとき、上記の定義は連続する行のベースラインがちょうど 'line-height' だけ離れていることを保証することになる。たとえばテーブル(組み表)のように異なるフォントのテキストの列を整列する必要があるとき、このことは重要である。
これは隣接する2つの行が互いに重なりあうことを防止しないことに注意すること。'line-height' はテキストの高さよりも小さくてもよく、この場合にはリーディングは負になる。このことは(たとえば、大文字しか含んでいないために)テキストがディセンダを含んでいないことがわかっていれば便利であって、行をより密着させることができる。
キャンバスは、文書がレンダリングされる、ユーザエージェントの描画面の部分である。文書の構造エレメントにはキャンバスに対応するものがなく、このことは文書をフォーマットするときに2つの問題を生じさせる。
最初の質問に対する合理的な答の1つは、キャンバスの初期サイズはウィンドウサイズを基礎とするということであるが、CSS1はこの問題をユーザエージェントの決定に委ねる。ウィンドウがサイズ変更されたときには、ユーザエージェントにはキャンバスのサイズを変更することを期待することも合理的であるが、これもまたCSS1の射程外である。
HTML拡張は、2つ目の質問に対する先例を設定している。'BODY' エレメント上のアトリビュートがキャンバス全体の背景を設定するのである。設計者の期待をサポートするために、CSS1はキャンバスの背景を知るための特別な規則を導入する。
もし 'HTML' エレメントの 'background' の値が 'transparent' と異なればそれを使うが、そうでなければ 'BODY' エレメントの 'background' 値を使う。結果の値が 'transparens' であれば、レンダリングは定義されない。
この規則は、
<HTML STYLE="background: url(http://style.com/marble.png)"> <BODY STYLE="background: red">というスタイル記述を許容する。
上記の例では、キャンバスが "marble" で覆われることになる。'BODY' エレメントの背景(キャンバスを完全にカバーするかもしれないし、しないかもしれない)は赤ということになる。
キャンバスに働きかける他の方法が利用可能になるまで、キャンバスプロパティは 'BODY' エレメント上で設定されることが勧められる。
現行のCSS1プロパティや値は、'BR' エレメントの挙動を記述できない。HTMLでは 'BR' エレメントは単語間の改行を指定する。効果面では、このエレメントは改行で置き換えられる。CSSの将来のバージョンは追加または置き換えられた内容を扱うかもしれないが、CSS1ベースのフォーマッタは 'BR' を特別に扱わなければならない。
スタイルシートは、スタイルプロパティに値を割り当てることにより、文書の表現に影響を与える。この節は、CSSの、定義されているスタイルシートプロパティとそれに対応する取りうる値とのリストを列挙するものである。
以下のテキストにおいて、各プロパティに許容されている値は、次のような統語論を使って列挙される。
値: N | NW | NE
値: [ <length> | thick | thin ]{1,4}
値: [<family-name> , ]* <family-name>
値: <url>? <color> [ / <color> ]?
値: <url> || <color>
"<" と ">" との間の語は、値の型を与える。もっともよくある型は <length>、<percentage>、<url>、<number> であり、これらは 6 で解説されている。より特化された型(例.<font-family>、<border-style>)は、対応するプロパティの下に解説されている。
その他の語は、引用符抜きで文字どおりに現れなくてはならないキーワードである。スラッシュ (/) やコンマ (,) も文字どおりに現れなくてはならない。
併置されているいくつかのものは、そのすべてが与えられた順序で発生しなければならないことを意味する。縦棒 (|) は選択肢を分離する。それらのうちの1つが発生しなければならない。二重縦棒 (A || B) は、AもしくはBのいずれか一方、または両者が任意の順序で発生しなければならないことを意味する。角括弧 ([]) は、グループ化のためのものである。併置は二重縦棒よりも強く、二重縦棒は縦棒よりも強い。したがって "a b | c || d e" は "[ a b ] | [ c || [ d e ]]" と等価である。
型、キーワード、括弧でくくられたグループはどれも、次の修飾子のうちの1つが続けられる場合がある。
フォントプロパティの設定は、スタイルシートの最も一般的な利用のうちのひとつである。残念ながら、フォント分類についてよく定義されて万国共通に受け入れられている分類学は存在せず、あるフォントファミリーにあてはまる用語が他のフォントファミリーには適切でない場合がある。たとえば、'italic' は斜字体テキストを類型化するために一般的に用いられるが、斜字体テキストは Oblique、Slanted、Incline、Cursive、Kursiv と類型化される場合もある。それゆえ、典型的なフォントプロパティを特定のフォントに割り付けることは、単純な問題ではないのである。
CSS1が定義するプロパティは、 'font-family'、 'font-style'、 'font-variant'、 'font-weight'、 'font-size'、 'font' である。
受け入れられている万国共通のフォントプロパティの分類学はないから、プロパティのフォントフェイスへの照合は注意深く行われなければならない。多数のユーザエージェントにわたって照合処理の結果が(それぞれに同じフォントフェイスライブラリが存在していれば)可能な限り一貫性を有することを確保するために、プロパティはよく定義された順序で照合される。
(上記のアルゴリズムを最適化すれば、キャラクタごとにCSS1プロパティを再訪問する必要を避けることができる。)
上記(2)からのプロパティごとの照合規則は、以下の通りである。
値: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
初期値: ユーザエージェント特有
適用対象: すべてのエレメント
継承: される
百分率値: N/A
値は、フォントファミリー名および/または一般的ファミリー名の、優先順位つきリストである。他のほとんどのCSS1プロパティとは異なり、選択肢であることを示すため、値はコンマで区切られる。
BODY { font-family: gill, helvetica, sans-serif }
リストの値には2つの型がある。
スタイルシート設計者は、最後の選択肢として一般的フォントファミリーを提供するように勧められる。
空白を含んでいるフォント名は、引用符で括られるべきである。
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">
引用符で括ることが省略されていれば、フォント名の前後の空白キャラクタは無視され、フォント名内部の空白キャラクタの連なりは1つのスペースに変換される。
値: normal | italic | oblique
初期値: normal
適用対象: すべてのエレメント
継承: される
百分率値: N/A
'font-style' プロパティは、フォントファミリー内部で、標準のフェイス(ときに、"roman" や "upright" といわれる)と斜字体フェイス(itaric、oblique)との間で選択する。
'normal' という値はユーザエージェントのフォントデータベース内で 'normal' として分類されているフォントを選択し、'oblique' は 'oblique' に分類されているフォントを選択する。'italic' という値は、'italic' に分類されているフォント、またはもしそれが利用可能でなければ 'oblique' に分類されているフォントを選択する。
ユーザエージェントのフォントデータベース内で 'oblique' に分類されているフォントは、実際には標準フォントを電子的に傾けることによって生成されたものであってもよい。
Oblique または Slanted、Incline を名前の中にもっているフォントは一般的に、ユーザエージェントのフォントデータベース内では 'oblique' に分類されるであろう。Italic または Cursive、Kursiv を名前の中にもっているフォントは一般的に、'italic' に分類されるであろう。
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
上記の例では、'H1' 内部の強調を受けたテキストは、標準フェイスで現れることになる。
値: normal | small-caps
初期値: normal
適用対象: すべてのエレメント
継承: される
百分率値: N/A
フォントファミリー内のもう一つのバリエーション型は、小大文字 (small-caps) である。小大文字フォントでは、小文字が大文字と同じように見えるが、サイズが小さくて比率もわずかに異なっている。'font-variant' プロパティはそのフォントを選択する。
'normal' という値は小大文字フォントでないフォントを選択し、'small-caps' は小大文字フォントを選択する。もし小大文字フォントが標準フォントを取って、縮小された大文字キャラクタによって小文字を置き換えることで作成されれば、それは受け入れられる(が要求はされない)。最後の手段としては、大文字が小大文字フォントの代わりとして用いられることになる。
以下の例は、強調を受けた単語が斜字体 (oblique) の小大文字になる、小大文字の 'H3' エレメントを帰結する。
H3 { font-variant: small-caps }
EM { font-style: oblique }
オールドスタイルの数字や、小大文字の数字、密着文字や拡大文字などをもつフォントのように、フォントファミリー内に他の変種がある場合もある。CSS1はそれらを選択するプロパティをもっていない。
CSS1コア: このプロパティがテキストを大文字に変形させる限りにおいて、'text-transform' と同じ考慮が妥当する。
値: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初期値: normal
適用対象: すべてのエレメント
継承: される
百分率値: N/A
'font-weight' プロパティは、フォントのウエイトを選択する。'100' から '900' までの値は順序つきの並びを形成し、そこではそれぞれの数が、少なくともその前に来るものと同じだけ濃いウエイトを示している。'normal' というキーワードは '400' と同義であり、'bold' は '700' と同義である。'normal' と 'bold' 以外のキーワードはフォント名とよく混同されているようであり、したがって数的スケールが9値リストのために選ばれた。
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
'bolder' および 'lightet' という値は、親エレメントから継承されたウエイトとの相対比較のフォントウエイトを選択する。
STRONG { font-weight: bolder }
子エレメントは、結果のウエイトを継承するのであって、キーワード値を継承するのではない。
フォント(フォントデータ)は一般的に、プロパティの値がフォントの「ウエイト」を説明する名前であるようなプロパティを1つまたは以上有している。これらのウエイト名には、万国共通の受け入れられている意味論が存在しない。それらの主要な役割は、単一フォントファミリー内部で異なる濃さのフェイスを区別することである。多数のフォントファミリーにわたる利用は、きわめて多様である。たとえば、あなたが bold だと思うかもしれないフォントが、そのデザイン内部で「標準」フェイスがどれだけ黒いかによって、Regular、Roman、Book、Medium、Semi- または DemiBold、Bold、Black と記述されているかもしれないのである。名前の標準的な使用法はないので、CSS1におけるウエイトプロパティ値は、'400'(または 'normal')がそのファミリーの「標準」テキストフェイスに対応する数的スケール上で与えられる。そのフェイスに関連づけられるウエイト名は、一般的に、Book、Regular、Roman、Normal や、ときには Medium ということになるであろう。
ファミリー内部の他のウエイトの、数的ウエイト値への関連づけは、そのファミリー内部の濃さの順を保存することだけを意図している。しかしながら、以下の発見的教授法は、典型的な場合にどのように割り当てがなされるかを教えてくれる。
以下の2つの例は、その処理を解説するものである。"Example1" ファミリーには4つのウエイトがあり、薄いものから濃いものへと順に Regular、Medium、Bold、Heavy であるとする。また、"Example2" ファミリーには6つのウエイト Book、Medium、Bold、Heavy、Black、ExtraBlack があるとする。2つ目の例で、どのようにして "Example2 ExtraBlack" を何にも割り当てないことと決めているのかに注意すること。
利用可能なフェイス | 割り当て | 穴埋め
----------------------+---------------+-------------------
"Example1 Regular" | 400 | 100, 200, 300
"Example1 Medium" | 500 |
"Example1 Bold" | 700 | 600
"Example1 Heavy" | 800 | 900
利用可能なフェイス | 割り当て | 穴埋め
----------------------+---------------+-------------------
"Example2 Book" | 400 | 100, 200, 300
"Example2 Medium" | 500 |
"Example2 Bold" | 700 | 600
"Example2 Heavy" | 800 |
"Example2 Black" | 900 |
"Example2 ExtraBlack" | (none) |
'bolder' や 'lighter' という相対指定キーワードの目的は、そのファミリー内部でフェイスを濃くしたり薄くしたりすることであり、またファミリーはすべての記号的ウエイト値に割り当てられるフェイスをもっていない場合があるから、 'bolder' の合致はそのファミリー内部でクライアント上で利用可能な次に濃いフェイスに対してのものであり、'lighter' の合致はそのファミリー内部の次に薄いフェイスに対してのものである。厳密には、'bolder'、'lighter' という相対指定キーワードの意味は以下の通りである。
'font-weight' 値のそれぞれについて、それより濃いフェイスがあるという保証はない。たとえば、フォントによっては標準とボールドフェイスしかないかもしれないし、他のフォントは異なる8つのフェイスウエイトをもっているかもしれない。ユーザエージェントがどのようにファミリー内のフォントフェイスをウエイト値に割り付けるかについては、保証はない。唯一の保証は、与えられた値のフェイスは、より薄い値のフェイスよりも濃くないことはないであろうということである。
値: <absolute-size> | <relative-size> | <length> | <percentage>
初期値: medium
適用対象: すべてのエレメント
継承: される
百分率値: 親エレメントのフォントサイズとの相対比較
長さ値や百分率値は、エレメントのフォントサイズを計算するときに、フォントサイズ対応表を考慮に入れるべきではない。
負の値は許されない。
他のすべてのプロパティでは、'em' や 'ex' という長さ値は、現在のエレメントのフォントサイズを参照する。'font-size' プロパティでは、これらの長さ単位は、親エレメントのフォントサイズを参照する。
アプリケーションは、文脈に依存して、明示的なサイズを再解釈してもよい。たとえば、VRシーン内部では、遠近法的変形のため、フォントが異なるサイズを得る場合がある。
例:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
示唆されている 1.5 というスケーリング因数が使われていれば、最後の3つの宣言は同じである。
値: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
初期値: 短縮形プロパティとしては定義されない
適用対象: すべてのエレメント
継承: される
百分率値: <font-size> と <line-height> で許容される
'font' プロパティは、スタイルシート内の同じ場所で、 'font-style'、 'font-variant'、 'font-weight'、 'font-size'、 'line-height'、 'font-family' を設定するための短縮形プロパティである。このプロパティの統語論は、フォントに関連する複数のプロパティを設定するための伝統的な印刷術的短縮表記に基づいている。
許容値および初期値の定義は、前に定義されたプロパティを見ること。値が与えられていないプロパティは、その初期値が設定される。
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
2つ目のルールでは、フォントサイズの百分率値('80%')は親エレメントのフォントサイズを参照する。3つ目のルールでは、行高の百分率はエレメント自身のフォントサイズを参照する。
上記の最初3つのルールでは、'font-style'、'font-variant'、'font-weight' は明示的に言及されていないが、このことはこれら3つすべてがその初期値('normal')に設定されることを意味する。4つ目のルールは、'font-weight' を 'bold' に、'font-style' を 'italic' に設定し、黙示的に 'font-variant' を 'normal' に設定する。
5つ目のルールは、'font-variant'('small-caps')、'font-size'(親エレメントの 120%)、'line-height'(フォントサイズの 120%)、'font-family'('fantasy')に設定する。残りの2つのプロパティ 'font-style' と 'font-weight' には、'normal' というキーワードが適用されることになる。
これらのプロパティは、エレメントの色(しばしば前景色:foreground color と呼ばれる)および背景(すなわち、内容がレンダリングされる面)を記述する。背景色および/または背景画像が設定できる。画像の位置、画像が繰り返されるか、またどのように繰り返されるか、キャンバスとの相対比較で画像が固定されるかスクロールされるか、も設定できる。
'color' プロパティは普通に継承される。背景プロパティは継承されないが、'background-color' の初期値が 'transparent' であるため、デフォルトでは親エレメントの背景画像が透けて見えることになる。
値: <color>
初期値: ユーザエージェント特有
適用対象: すべてのエレメント
継承: される
百分率値: N/A
このプロパティは、エレメントのテキスト色(しばしば 前景:foreground 色といわれる)を記述する。赤を指定するのにも違った方法がある。
EM { color: red } /* 自然言語 */
EM { color: rgb(255,0,0) } /* 範囲 0 ~ 255 のRGB */
取りうる色の値については 6.3 を見ること。
値: <color> | transparent
初期値: transparent
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
このプロパティは、エレメントの背景色を設定する。
H1 { background-color: #F00 }
値: <url> | none
初期値: none
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
このプロパティは、エレメントの背景画像を設定する。背景画像を設定するときには、画像が利用不能なときに使われることになる背景色も設定するべきである。画像が利用可能であれば、それは背景色の上に重ねられる。
BODY { background-image: url(marble.gif) }
P { background-image: none }
値: repeat | repeat-x | repeat-y | no-repeat
初期値: repeat
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
背景画像が指定されているならば、'background-repeat' の値は、画像が繰り返されるか否か、どのように繰り返されるかを決定する。
'repeat' という値は、画像が水平方向、垂直方向ともに繰り返されることを意味する。'repeat-x' ('repeat-y') という値は、画像を水平方向(垂直方向)に繰り返させて、片側からもう片側へ1本の画像の帯を作る。'no-repeat' という値があれば、画像は繰り返されない。
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
上記の例では、画像は垂直方向にのみ繰り返されることになる。
値: scroll | fixed
初期値: scroll
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
背景画像が指定されていれば、'background-attachment' の値は、それがキャンバスとの関係で固定されるか否か、あるいは内容と一緒にスクロールするか否かを決定する。
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
CSS1コア: ユーザエージェントは、'fixed' を 'scroll' として扱ってもよい。しかしながら、少なくとも HTML エレメントや BODY エレメント上の 'fixed' は正しく解釈することが勧められる。制作者には 'fixed' をサポートするブラウザにだけ画像を提供する方法がないからである。(7 を見ること。)
値: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
初期値: 0% 0%
適用対象: ブロックレベルおよび置換エレメント
継承: されない
百分率値: エレメント自身のサイズを参照する
背景画像が指定されていれば、'background-position' の値はその始点を指定する。
'0% 0%' という値の対があれば、エレメントの内容を囲むボックス(すなわち、パディング、ボーダー、マージンを囲むボックスではない)の左上隅に画像の左上隅が置かれる。'100% 100%' という値の対があれば、画像の右下隅がエレメントの右下隅に置かれる。'14% 84%' という値の対があれば、画像の右へ14%、下へ84%の点が、エレメントの右へ14%、下へ84%の点に置かれることになる。
'2cm 2cm' という値の対があれば、エレメントの左上隅から2cm右で2cm下に画像の左上隅が置かれる。
百分率値または長さ値が1つだけしか与えられていなければ、それは水平位置だけを設定し、垂直位置は 50% ということになる。値が2つ与えられれば、水平位置が先に来る。たとえば '50% 2cm' といった長さ値と百分率値との組み合わせは許容される。負の位置は許容される。
キーワード値を使って背景画像の位置を示すこともできる。キーワードは、百分率値や長さ値と組み合わせることができない。取りうるキーワードの組み合わせとその解釈は、以下の通りである。
例:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
背景画像がキャンバスとの関係で固定されていれば(上記の 'background-attachment' プロパティを見ること)、エレメントの代わりにキャンバスとの相対比較で画像が置かれる。たとえば、
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
上記の例だと、キャンバスの右下隅に画像が置かれる。
値: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
初期値: 短縮形プロパティとしては定義されない
適用対象: すべてのエレメント
継承: されない
百分率値: <background-position> で許容される
'background' プロパティは、個別の背景プロパティ(すなわち、'background-color'、'background-image'、'background-repeat'、'background-attachment'、'background-position') をスタイルシート内の同じ場所で設定するための短縮形プロパティである。
'background' プロパティ上で取りうる値は、個別のプロパティ上で取りうるすべての値のセットである。
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
'background' プロパティは、つねに個別の背景プロパティのすべてを設定する。上記の例の最初のルールでは、'background-color' の値だけが与えられ、その他の個別プロパティはその初期値に設定される。2つ目のルールでは、すべての個別プロパティが指定されている。
値: normal | <length>
初期値: normal
適用対象: すべてのエレメント
継承: される
百分率値: N/A
長さ単位 (<length>) は単語間のデフォルトの間隔への追加分を示す。値は負であってもよいが、実装特有の限界がある場合がある。ユーザエージェントが正確な間隔取りアルゴリズムを選択するのは自由である。単語間隔は('align' プロパティの値である)ジャスティフィケーション(justification)によっても影響される場合がある。
H1 { word-spacing: 0.4em }
ここでは、'H1' エレメント内の各単語の間の単語間隔は、'1em' だけ増やされることになる。
CSS1コア: ユーザエージェントは、'word-spacing' のどの値も 'normal' と解釈してよい。(7 を見ること。)
値: normal | <length>
初期値: normal
適用対象: すべてのエレメント
継承: される
百分率値: N/A
長さ単位は文字間のデフォルトの間隔への追加分を示す。値は負であってもよいが、実装特有の限界がある場合がある。ユーザエージェントが正確な間隔取りアルゴリズムを選択することは自由である。文字間隔は、('align' プロパティの値である)ジャスティフィケーション(justification)によっても影響される場合がある。
BLOCKQUOTE { letter-spacing: 0.1em }
ここでは、'BLOCKQUOTE' エレメント内の各キャラクタ間の文字間隔は、'0.1em' だけ増やされることになる。
'normal' という値があれば、ユーザエージェントは文字間の間隔を変更してテキストをジャスティフィケーションしてもよい。'letter-spacing' に明示的に <length> 値が設定されていれば、これは起こらないことになる。
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
2文字間の結果の間隔がデフォルトの間隔と同じでないときは、ユーザエージェントは合字 (legature) を使うべきではない。
CSS1コア: ユーザエージェントは、'letter-spacing' のどの値も 'normal' と解釈してよい。(7 を見ること。)
値: none | [ underline || overline || line-through || blink ]
初期値: none
適用対象: すべてのエレメント
継承: されないが、下記の説明を見ること
百分率値: N/A
このプロパティは、エレメントのテキストに付加される装飾を記述する。エレメントがテキストをもたず(例.HTMLの 'IMG' エレメント)、または空エレメントである(例.''<EM></EM>')ならば、このプロパティは効果がない。'blink' という値は、テキストをブリンク(点滅)させる。
テキスト装飾に必要な色は 'color' プロパティ値から引き出されるべきである。
このプロパティは継承されないが、エレメントはその親を照合するべきである。たとえば、もしあるエレメントが下線つきであれば、線は子エレメントにわたるべきである。子孫エレメントが異なる 'color' 値を有していても、下線の色は同じままということになる。
A:link, A:visited, A:active { text-decoration: underline }
上記の例だと、すべてのリンク(すなわち 'HREF' アトリビュートのある 'A' エレメントすべて)のテキストに下線を引くことになる。
ユーザエージェントは、'blink' というキーワードを認識しなければならないが、ブリンク効果をサポートすることは要求されない。
値: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
初期値: baseline
適用対象: インラインエレメント
継承: されない
百分率値: エレメント自身の 'ling-height' を参照する
このプロパティは、エレメントの垂直方向の位置指定に影響する。キーワードのセットのうち、一つは親エレメントとの相対比較のものである。
プロパティのセットのもう一つは、そのエレメントが一部分をなすフォーマット後の行との相対比較のものである。
'top' や 'bottom' の配列を使うと、エレメント依存がループを形成するところで解決不能な状況が発生する可能性がある。
百分率値は、エレメント自身の 'line-height' プロパティの値を参照する。百分率値は、エレメントのベースライン(ベースラインがなければ、下端)を、親エレメントのベースラインから指定された分だけ上に持ち上げる。負の値は可能である。たとえば '-100%' という値は、エレメントを下げて、次の行のベースラインがあったはずの場所にエレメントのベースラインが来るようにすることになる。これは(文字の代わりに使われている画像などといった)ベースラインをもたないエレメントエレメントの垂直方向の位置を正確に制御することを可能にする。
将来のバージョンのCSSではこのプロパティ上の値として <length> が許容されるであろうと期待される。
値: capitalize | uppercase | lowercase | none
初期値: none
適用対象: すべてのエレメント
継承: される
百分率値: N/A
それぞれの場合における実際の変形は、人間の言語に依存する。エレメントの言語を知る方法は [4] を見ること。
H1 { text-transform: uppercase }
上記の例では、'H1' エレメントは大文字テキストで置かれる。
CSS1コア: ユーザエージェントは、Latin-1 レパートリーに由来しないキャラクタや、Unicode [8] の大文字小文字変換テーブルによって規定されたのと異なる変形の言語でのエレメントについては、'text-transform' を無視(すなわち 'none' として扱う)してよい。
値: left | right | center | justify
初期値: ユーザエージェント特有
適用対象: ブロックレベルエレメント
継承: される
百分率値: N/A
このプロパティは、エレメント内部でテキストがどのように配置されるかを記述する。使用される実際のジャスティフィケーションアルゴリズムは、ユーザエージェントおよび人間の言語に依存する。
例:
DIV.center { text-align: center }
'text-align' は継承されるから、'CLASS=center' のある 'DIV' エレメント内部のすべてのブロックレベルエレメントが中央寄せされることになる。配置はエレメントの幅との相対比較であって、キャンバスとの比較ではないことに注意すること。もし 'justify' がサポートされていなければ、ユーザエージェントは代用品を供給することになる。一般的に、西洋の言語についてはこれは 'left' ということになるであろう。
CSS1コア: ユーザエージェントは、'justify' を、エレメントのデフォルトの筆記方向が左から右へか、右から左へかによりそれぞれ、'left' または 'right' として扱ってよい。
値: <length> | <percentage>
初期値: 0
適用対象: ブロックレベルエレメント
継承: される
百分率値: 親エレメントの幅を参照する
このプロパティは、フォーマット後の最初の行の前に現れるインデント(字下げ)を指定する。'text-indent' の値は負であってもよいが、実装特有の限界がある場合がある。インデントは(HTMLの 'BR' といった)他のエレメントで改行されているエレメントの中間には挿入されない。
例:
P { text-indent: 3em }
値: normal | <number> | <length> | <percentage>
初期値: normal
適用対象: すべてのエレメント
継承: される
百分率値: エレメント自身のフォントサイズとの相対比較
このプロパティは、2つの隣接する行のベースラインの間の距離を設定する。
数値が指定されるときは、行の高さは、現在のエレメントのフォントサイズに数値を掛けたもので与えられる。これは、継承のされ方において百分率値と異なる。数値が指定されているときは、子エレメントはその因数自体を継承するのであって、結果の値を継承する(百分率値や他の単位のように)のではない。
負の値は許されない。
下記の例の3つのルールは、同じ結果の行高をもつ。
DIV { line-height: 1.2; font-size: 10pt } /* 数 */
DIV { line-height: 1.2em; font-size: 10pt } /* 長さ */
DIV { line-height: 120%; font-size: 10pt } /* 百分率 */
'normal' という値は、'line-height' を、そのエレメントのフォントにとって合理的な値に設定する。ユーザエージェントは 'normal' の値を 1.0 から 1.2 の範囲の数に設定することが示唆される。
'line-height' がブロックレベルエレメントのフォーマットにどのように影響するかについての説明は 4.7 を見ること。
ボックスプロパティは、エレメントを表現するボックスのサイズ、周囲、位置を設定する。ボックスプロパティの使い方についての例はフォーマットモデル (4) を見ること。
マージンプロパティは、エレメントのマージン(余白)を設定する。'margin' プロパティは4辺すべてについてボーダーを設定し、その他のマージンプロパティはそれぞれの辺だけを設定する。
パディングプロパティは、ボーダーと内容(例.テキスト、画像)との間にどの程度のスペースを挿入するかを記述する。'padding' プロパティは4辺すべてについてパディングを設定し、その他のパディングプロパティはそれぞれの辺だけを設定する。
ボーダープロパティは、エレメントのボーダー(境界線)を設定する。各エレメントは、幅、色、スタイルによって定義されるボーダーを、各辺に1本ずつ4本もっている。
'width' プロパティと 'height' プロパティはボックスのサイズを設定し、'float' プロパティと 'clear' プロパティはエレメントの位置を部分的に変更することができる。
値: <length> | <percentage> | auto
初期値: 0
適用対象: すべてのエレメント
継承: されない
百分率値: 親エレメントの幅を参照する
このプロパティは、エレメントの上部マージンを設定する。
H1 { margin-top: 2em }
負の値は許容されるが、実装特有の限界がある場合がある。
値: <length> | <percentage> | auto
初期値: 0
適用対象: すべてのエレメント
継承: されない
百分率値: 親エレメントの幅を参照する
このプロパティは、エレメントの右側マージンを設定する。
H1 { margin-right: 12.3% }
負の値は許容されるが、実装特有の限界がある場合がある。
値: <length> | <percentage> | auto
初期値: 0
適用対象: すべてのエレメント
継承: されない
百分率値: 親エレメントの幅を参照する
このプロパティは、エレメントの下部マージンを設定する。
H1 { margin-bottom: 3px }
負の値は許容されるが、実装特有の限界がある場合がある。
値: <length> | <percentage> | auto
初期値: 0
適用対象: すべてのエレメント
継承: されない
百分率値: 親エレメントの幅を参照する
このプロパティはエレメントの左側マージンを設定する。
H1 { margin-left: 2em }
負の値は許容されるが、実装特有の限界がある場合がある。
値: [ <length> | <percentage> | auto ]{1,4}
初期値: 短縮形プロパティとしては定義されない
適用対象: すべてのエレメント
継承: されない
百分率値: 親エレメントの幅を参照する
'margin' プロパティは、スタイルシート内の同じ場所で 'margin-top'、'margin-right'、'margin-bottom'、'margin-left' を設定するための短縮形プロパティである。
4つの値が指定されていれば、それらはそれぞれ、上、右、下、左に適用される。1つしか値がなければそれがすべての辺に適用され、2つまたは3つあれば欠けている値は反対側の辺から取られる。
BODY { margin: 2em } /* すべてのマージンが 2em に設定される */
BODY { margin: 1em 2em } /* 上部および下部 1em、左側および右側 2em */
BODY { margin: 1em 2em 3em } /* 上部 1em、右側 2em、下部 3em、左側 2em */
上記の例の最後のルールは、下記の例と等価である。
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* 反対側(右側)からコピーされる */
}
負のマージン値は許容されるが、実装特有の限界がある場合がある。
値: <length> | <percentage>
初期値: 0
適用対象: すべてのエレメント
継承: されない
百分率値: 親エレメントの幅を参照する
このプロパティは、エレメントの上部パディングを設定する。
BLOCKQUOTE { padding-top: 0.3em }
パディング値は負になれない。
値: <length> | <percentage>
初期値: 0
適用対象: すべてのエレメント
継承: されない
百分率値: 親エレメントの幅を参照する
このプロパティは、エレメントの右側パディングを設定する。
BLOCKQUOTE { padding-right: 10px }
パディング値は負になれない。
値: <length> | <percentage>
初期値: 0
適用対象: すべてのエレメント
継承: されない
百分率値: 親エレメントの幅を参照する
このプロパティは、エレメントの下部パディングを設定する。
BLOCKQUOTE { padding-bottom: 2em }
パディング値は負になれない。
値: <length> | <percentage>
初期値: 0
適用対象: すべてのエレメント
継承: されない
百分率値: 親エレメントの幅を参照する
このプロパティは、エレメントの左側パディングを設定する。
BLOCKQUOTE { padding-left: 20% }
パディング値は負になれない。
値: [ <length> | <percentage> ]{1,4}
初期値: 0
適用対象: すべてのエレメント
継承: されない
百分率値: 親エレメントの幅を参照する
'padding' プロパティは、スタイルシート内の同じ場所に 'padding-top'、'padding-right'、'padding-bottom'、'padding-left' を設定するための短縮形プロパティである。
4つの値が指定されていれば、それらはそれぞれ上、右、下、左に適用される。1つしか値がなければそれがすべての辺に適用され、2つまたは3つあれば欠けている値は反対側の辺から取られる。
パディング領域の表面は 'background' プロパティで設定される。
H1 {
background: white;
padding: 1em 2em;
}
上記の例は、垂直方向('padding-top' と 'padding-bottom')に '1em' のパディングを設定し、水平方向('padding-right' と 'padding-left')に '2em' のパディングを設定する。'em' 単位はエレメントのフォトサイズとの相対比較である。'1em' は使われているフォントのサイズと等しい。
パディング値は負になれない。
値: thin | medium | thick | <length>
初期値: 'medium'
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
このプロパティは、エレメントの上部ボーダーの幅を設定する。キーワード値の幅はユーザエージェント依存であるが、次の関係は維持される。'thin' ≦ 'medium' ≦ 'thick'.
キーワード幅は文書を通じて一定である。
H1 { border: solid thick red }
P { border: solid thick blue }
上記の例では、'H1' エレメントと 'P' エレメントは、フォントサイズにかかわらず同じボーダー幅をもつことになる。相対指定幅を達成するためには 'em' 単位を使うことができる。
H1 { border: solid 0.5em }
ボーダー幅は負になれない。
値: thin | medium | thick | <length>
初期値: 'medium'
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
このプロパティは、エレメントの右側ボーダーの幅を設定する。それ以外は 'border-top-width' と同じである。
値: thin | medium | thick | <length>
初期値: 'medium'
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
このプロパティはエレメントの下部ボーダーの幅を設定する。それ以外は、'border-top-width' と同じである。
値: thin | medium | thick | <length>
初期値: 'medium'
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
このプロパティは、エレメントの左側ボーダーの幅を設定する。それ以外は 'border-top-width' と同じである。
値: [thin | medium | thick | <length>]{1,4}
初期値: 短縮形プロパティとしては定義されない
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
このプロパティは、スタイルシート内の同じ場所で 'border-width-top'、'border-width-right'、'border-width-bottom'、'border-width-left' を設定するための短縮形プロパティである。
値は1つから4つまで可能であり、以下の解釈による。
下記の例では、注釈が、上部、右側、下部、左側のボーダーの結果の幅を示している。
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thin */
H1 { border-width: thin thick medium none } /* thin thick medium none */
ボーダー幅は負になれない。
値: <color>{1,4}
初期値: 'color' プロパティの値
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
'border-color' プロパティは、4本のボーダーの色を設定する。'border-color' は1つから4つまでの値をとることができ、その値は上記の 'border-width' のように異なる辺に設定される。
色の値が指定されていなければ、エレメント自身の 'color' プロパティの値がその代わりになることになる。
P {
color: black;
background: white;
border: solid;
}
上記の例では、ボーダーは黒の実線ということになる。
値: none | dotted | dashed | solid | double | groove | ridge | inset | outset
初期値: none
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
'border-style' プロパティは、4本のボーダーのスタイルを設定する。1つから4つまでの値をとることができ、その値は上記の 'border-width' のように異なる辺に設定される。
#xy34 { border-style: solid dotted }
上記の例では、水平方向のボーダーは 'solid' になり、垂直方向のボーダーは 'dotted' ということになる。
ボーダースタイルの初期値は 'none' であるから、ボーダースタイルが設定されない限りボーダーは見えないことになる。
ボーダースタイルは
CSS1コア: ユーザエージェントは、'dotted'、'dashed'、'double'、'groove'、'ridge'、'inset'、'outset' の全部を 'solid' と解釈してよい。
値: <border-top-width> || <border-style> || <color>
初期値: 短縮形プロパティとしては定義されない
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
これは、エレメントの上部ボーダーの幅、スタイル、色を設定するための短縮形プロパティである。
H1 { border-bottom: thick solid red }
上記のルールは、H1 エレメントの下にあるボーダーの幅、スタイル、色を設定することになる。省略された値はその初期値に設定されることになる。
H1 { border-bottom: thick solid }
上記の例では色の値が省略されているので、ボーダーの色はエレメント自身の 'color' 値と同じということになる。
'border-style' プロパティは4つまでの値を受け付けるが、このプロパティは1つのスタイル値しか受け付けないことに注意すること。
値: <border-right-width> || <border-style> || <color>
初期値: 短縮形プロパティとしては定義されない
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
これは、エレメントの右側ボーダーの幅、スタイル、色を設定するための短縮形プロパティである。それ以外は 'border-top' と同じである。
値: <border-bottom-width> || <border-style> || <color>
初期値: 短縮形プロパティとしては定義されない
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
これは、エレメントの下部ボーダーの幅、スタイル、色を設定するための短縮形プロパティである。それ以外は 'border-top' と同じである。
値: <border-left-width> || <border-style> || <color>
初期値: 短縮形プロパティとしては定義されない
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
これは、エレメントの左側ボーダーの幅、スタイル、色を設定するための短縮形プロパティである。それ以外は 'border-top' と同じである。
値: <border-width> || <border-style> || <color>
初期値: 短縮形プロパティとしては定義されない
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
'border' プロパティは、エレメントの4本のボーダーすべてに同じ幅、色、スタイルを設定するための短縮形プロパティである。たとえば、下記の最初のルールは、その後に示されている4つのルールのセットと等価である。
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
'margin' や 'padding' という短縮形プロパティとは異なり、'border' プロパティは4本のボーダーに異なる値を設定することができない。それをするには、他の1つまたはそれ以上のボーダープロパティを使わなければならない。
プロパティはある程度まで重なり合う機能をもつから、ルールが指定される順序が重要になる。この例を考えてみる。
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
上記の例では、左側ボーダーの色は黒になるが、その他のボーダーは赤になる。これは、幅、スタイル、色を設定している 'border-left' のせいである。色の値は 'border-left' プロパティで指定されていないので、'color' プロパティから取られることになる。'color' プロパティが 'border-left' プロパティよりも後に設定されているという事実は関係ない。
'border-width' プロパティは4つまでの長さ値を受け付けるが、このプロパティは1つしか受け付けないことに注意すること。
値: <length> | <percentage> | auto
初期値: auto
適用対象: ブロックレベルおよび置換エレメント
継承: されない
百分率値: 親エレメントの幅を参照する
このプロパティはテキストエレメントに適用できるが、画像などの置換エレメントで最もよく役に立つ。必要であれば、画像を伸縮することによって幅が強制されることになる。'height' プロパティが 'auto' ならば、伸縮の際に画像のアスペクト比は保存される。
例:
IMG.icon { width: 100px }
置換エレメントの 'width' と 'height' がともに 'auto' であれば、これらのプロパティはそのエレメントの本来的寸法に設定されることになる。
負の値は許されない。
このプロパティとマージン、パディングとの関係の解説は フォーマットモデル (4) を見ること。
値: <length> | auto
初期値: auto
適用対象: ブロックレベルおよび置換エレメント
継承: されない
百分率値: N/A
このプロパティはテキストに適用できるが、画像などの置換エレメントで最もよく役に立つ。必要であれば、画像を伸縮することにより高さが強制されることになる。'width' プロパティが 'auto' であれば、伸縮の際に画像のアスペクト比は保存される。
例:
IMG.icon { height: 100px }
置換エレメントの 'width' と 'height' がともに 'auto' であれば、これらのプロパティはそのエレメントの本来的寸法に設定されることになる。
もしテキストエレメントに適用されるならば、たとえばスクロールバーなどを用いて高さを強制できる。
負の値は許されない。
CSS1コア: エレメントが置換エレメントでなければ、ユーザエージェントは 'height' プロパティを無視(すなわち、'auto' として扱う)してよい。
値: left | right | none
初期値: none
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
'none' という値があれば、そのエレメントはテキストの中で現れたところで表示されることになる。'left' ('right') という値があれば、そのエレメントは左(右)へ動かされ、テキストはエレメントの右(左)側で折り返すことになる。'left' または 'right' という値があれば、そのエレメントはブロックレベルとして扱われる(すなわち、'display' プロパティは無視される)。完全な仕様は 4.1.4 を見ること。
IMG.icon {
float: left;
margin-left: 0;
}
上記の例は、'CLASS=icon' をもつすべての IMG エレメントを親エレメントの左側に沿って置くことになる。
このプロパティはインライン画像に使われることが最も多いが、テキストエレメントにも適用される。
値: none | left | right | both
初期値: none
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
このプロパティは、エレメントがその両側に浮動エレメントを許容するか否かを指定する。もっと具体的にいうと、このプロパティの値は浮動エレメントが受け付けられない側面を列挙するのである。'clear' が 'left' に設定されていれば、エレメントは、その左側にあるどの浮動エレメントよりも下に動かされることになる。'clear' が 'none' に設定されていれば、浮動エレメントはすべての側面で許容される。例:
H1 { clear: left }
これらのプロパティは、特定の視覚的パラメータを設定するよりも、エレメントをカテゴリーに分類するものである。
リストスタイルプロパティは、リスト項目(すなわち、'display' の値に 'list-item'をもつエレメント)がどのようにフォーマットされるかを記述する。リストスタイルプロパティはどのエレメントにも設定でき、通常は解析樹 (parse tree) を下って継承されることになる。しかしながら、'display' の値に 'list-item' をもつエレメントでしか効果がない。HTMLでは、一般にこれは 'LI' エレメントにあることである。
値: block | inline | list-item | none
初期値: block
適用対象: すべてのエレメント
継承: されない
百分率値: N/A
このプロパティは、エレメントがキャンバス(印刷されたページやコンピュータディスプレイなどである場合がある)上に表示されるか否か、またどのように表示されるかを記述する。
'display' の値に 'block' をもつエレメントは、新しいボックスを開く。ボックスは、CSSフォーマットモデルに従って、隣接するボックスとの関連で位置決定される。一般的に、'H1' や 'P' というようなエレメントは、'block' 型のものである。'list-item' という値も、リスト項目マーカーが付加されることを除いては 'block' に似ている。HTMLでは 'LI' は一般的にこの値をもつことになる。
'display' の値に 'inline' をもつエレメントは、その前の内容と同じ行にある新しいインラインボックスになる。ボックスはフォーマット後の内容のサイズによって寸法が決められる。内容がテキストであれば数行にわたる場合があるが、各行に1つのボックスがあることになる。マージン、ボーダー、パディングプロパティは 'inline' エレメントに適用されるが、改行箇所では何の影響もないであろう。
'none' という値は、エレメントの表示を、子エレメントや周囲のボックスを含めて、オフにする。
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
最後のルールは、画像の表示をオフにする。
'display' の初期値は 'block' であるが、ユーザエージェントは一般的に、HTML仕様書 [2] で示唆されたエレメントのレンダリングに従って、すべてのHTMLエレメントについてデフォルト値をもっているであろう。
CSS1コア: ユーザエージェントは、'display' を無視して、ユーザエージェントのデフォルト値だけを使ってよい。(7 を見ること。)
値: normal | pre | nowrap
初期値: normal
適用対象: ブロックレベルエレメント
継承: される
百分率値: N/A
このプロパティは、エレメント内の空白がどのように扱われるかを宣言する。'normal' な方法(空白は押しつぶされる)、'pre' という扱い(HTMLの 'PRE' エレメントのようにふるまう)、'nowrap' という扱い(折り返しは BR エレメントを通じてのみなされる)がある。
PRE { white-space: pre }
P { white-space: normal }
'white-space' の初期値は 'normal' であるが、ユーザエージェントは一般的に、HTML仕様書 [2] 内で示唆されているエレメントのレンダリングに従って、すべてのHTMLエレメントについてデフォルト値をもっているであろう。
CSS1コア: ユーザエージェントは、制作者や読者のスタイルシート内の 'white-space' プロパティを無視して、代わりにユーザエージェントのデフォルト値を使ってよい。(7 を見ること。)
値: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初期値: disc
適用対象: 'display' の値に 'list-item' をもつエレメント
継承: される
百分率値: N/A
このプロパティは、'list-style-image' が 'none' であるか、URLで指し示されている画像が表示できない場合に、リスト項目マーカーの外観を決定するために用いられる。
OL { list-style-type: decimal } /* 1 2 3 4 5 など */
OL { list-style-type: lower-alpha } /* a b c d e など. */
OL { list-style-type: lower-roman } /* i ii iii iv v など */
値: <url> | none
初期値: none
適用対象: 'display' の値に 'list-item' をもつエレメント
継承: される
百分率値: N/A
このプロパティは、リスト項目マーカーとして用いられる画像を設定する。画像が利用の可能なときは 'list-style-type' マーカーで設定されたマーカーを置き換えることになる。
UL { list-style-image: url(http://png.com/ellipse.png) }
値: inside | outside
初期値: outside
適用対象: 'display' の値に 'list-item' をもつエレメント
継承: される
百分率値: N/A
'list-style-position' の値は、リスト項目マーカーが内容との関係でどのように描画されるかを決定する。フォーマット例は 4.1.3 を見ること。
値: <keyword> || <position> || <url>
初期値: 短縮形プロパティとしては定義されない
適用対象: 'display' の値に 'list-item' をもつエレメント'
継承: される
百分率値: N/A
'list-style' プロパティは、スタイルシート内の同じ場所に 'list-style-type'、'list-style-image'、'list-style-position' の3つのプロパティを設定するための短縮表記である。
UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }
'LI' エレメントに直接 'list-style' を設定することは思わぬ結果を引き起こす可能性がある。この例について考えてみる。
<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>レベル1
<UL>
<LI>レベル2
</UL>
</OL>
</BODY>
特定性(カスケード順で定義されている)は、上記の例のスタイルシート内では最初のルールの方が高いので、 これがすべての 'LI' エレメントについて2番目のルールを上書きし、'lower-alpha' リストスタイルだけが用いられることになる。したがって、'list-style' はリスト型エレメントにだけ設定することが勧められる。
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
上記の例では、継承により、'list-style' の値が 'OL' エレメントや 'UL' エレメントから 'LI' エレメントに移る。
URL値は他の値と組み合わせることができる。
UL { list-style: url(http://png.com/ellipse.png) disc }
上記の例では、画像が利用不能のときに 'disc' が使われることになる。
長さ値の書式は、任意的な符号文字('+' または '-' で、デフォルトは '+')1つに、すぐ数(小数点つき、または小数点なし)1つが続き、すぐ単位識別子(2文字省略形)1つが続くというものである。'0' という数の後では単位識別子は任意的である。
プロパティの中には負の長さ単位を許すものがあるが、これはフォーマットモデルを複雑にする場合があり、実装特有の限界がある場合がある。負の長さ単位がサポートできないならば、サポートできるもっとも近い値に切り落とされるべきである。
長さの単位には2つの型がある。相対単位と絶対単位である。相対単位 (relative unit) は、他の長さプロパティとの相対比較で長さを指定する。相対単位を使っているスタイルシートは、ある媒体から他の媒体へ(例.コンピュータディスプレイからレーザプリンタへ)の伸縮がより簡単であろう。百分率単位 (percentage units) やキーワード値(例.'x-large')も、似た利点を提供する。
これらの相対単位がサポートされる。
H1 { margin: 0.5em } /* em. そのエレメントのフォントの高さ */
H1 { margin: 1ex } /* x-height. 'x' という文字の高さ */
P { font-size: 12px } /* ピクセル. キャンバスとの相対比較 */
'em' および 'ex' という相対単位は、エレメント自身のフォントサイズとの相対比較である。CSS1の中でこの規則の唯一の例外は 'font-size' プロパティであり、そこでは 'em' および 'ex' の値は親エレメントのフォントサイズを参照する。
ピクセル単位は、最後のルールで使われているのであるが、キャンバスの解像度との相対比較である。出力デバイスのピクセル密度が典型的なコンピュータディスプレイのピクセル密度と大きく異なっているならば、ユーザエージェントはピクセル値を再伸縮するべきである。示唆される 参考ピクセル (reference pixel) は、ピクセル密度 90dpi で、読者の腕の長さの距離のデバイス上の1つのピクセルの視角である。28インチという標準的な腕の長さからすると、視角は約 0.0227 度である。
子エレメントは計算後の値を継承するのであって、相対値を継承するのではない。
BODY {
font-size: 12pt;
text-indent: 3em; /* すなわち 36pt */
}
H1 { font-size: 15pt }
上記の例では、'H1' エレメントの 'text-indent' の値は 45pt ではなく 36pt ということになる。
絶対長さ単位は、出力媒体の物理的特性が既知であるときにのみ有益である。これらの絶対単位がサポートされる。
H1 { margin: 0.5in } /* インチ. 1in は 2.54cm */
H2 { line-height: 3cm } /* センチメートル */
H3 { word-spacing: 4mm } /* ミリメートル */
H4 { font-size: 12pt } /* ポイント. 1pt は 1/72 in */
H4 { font-size: 1pc } /* パイカ. 1pc は 12pt */
指定された長さがサポートされない場合には、ユーザエージェントは近似を試みるべきである。すべてのCSS1プロパティについて、そこから先の計算や継承は近似された値に基づくべきである。
百分率値の書式は、任意的な符号文字('+' または '-' で、デフォルトは '+')1つに、すぐに数(小数点あり、または小数点なし)1つが続き、すぐに '%' が続いたものである。
百分率値はつねに、たとえば長さ単位といった他の値との相対比較である。百分率単位を許容するプロパティはそれぞれ、百分率値がどの値を参照するかも定義している。これはエレメント自身のフォントサイズであることが最も多い。
P { line-height: 120% } /* そのエレメントの 'font-size' の 120% */
すべての継承されたCSS1プロパティにおいて、値が百分率として指定されていても、子エレメントは結果の値を継承するのであって、百分率値を継承するのではない。
色は、キーワードか数的RGB指定かのどちらかである。
示唆されているキーワード色名の一覧は、次の通りである。aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow. これら16色は Windows VGA パレットから採られたものであり、そのRGB値はこの仕様書では定義されない。
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
数的色指定においてはRGB色モデルが使われている。これらの例はすべて同じ色を指定している。
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* 0 ~ 255 の範囲の整数 */
EM { color: rgb(100%, 0%, 0%) } /* 0.0% ~ 100.0% の範囲の小数 */
16進表記のRGB値の書式は、'#' に、すぐに3つまたは6つの16進文字が続いたものである。3桁RGB表記 (#rgb) は、0を追加するのでなく数字を重ねることにより、6桁形式 (#rrggbb) に変換される。これは白 (#ffffff) が短縮表記 (#fff) で指定できることを保証し、ディスプレイの色深度への依存性を除去するものである。
関数的表記のRGB値の書式は、'rgb(' に、コンマで区切られた3つの数値(0 から 255 までの範囲の整数値3つか、0.0% から 100.0% までの範囲の百分率値3つかのいずれか)のリストが続き、')' が続いたものである。数値の周囲に空白キャラクタがあっても許される。
数値範囲の外側の値は、切り落とされるべきである。したがって、下記の3つのルールは等価である。
EM { color: rgb(255,0,0) } /* 0 ~ 255 の範囲の整数 */
EM { color: rgb(300,0,0) } /* 255 に切り落とされる */
EM { color: rgb(110%, 0%, 0%) } /* 100% に切り落とされる */
RGB色は、sRGB色空間 [9] で規定されている。これらの色を表現する忠実性はユーザエージェントによって違うかもしれないが、sRGBの利用は、色がどのようなものであるべきかについて一義的で客観的に測定可能な定義を提供するものであり、国際規格 [10] とも関連しうるものである。
ユーザエージェントは、色表示時にガンマ補正実施の努力を制限してもかまわない。sRGBは特定の視環境の下で 2.2 という表示ガンマを規定する。ユーザエージェントは、出力デバイスの「生来的」表示ガンマとの組み合わせで 2.2 というレンダリングガンマが生成されるように、CSSで与えられた色を調整する。付録D はこれについての詳細を与える。CSSで指定された色だけが影響を受けることに注意すること。たとえば、画像はそれ自身の色情報を携えて来るものと考えられる。
URL (Uniform Resource Locator) は、関数表記で識別される。
BODY { background: url(http://www.bg.com/pinkish.gif) }
URL値の書式は、'url(' に、任意的な空白が続き、任意的な単引用符 (') または二重引用符 (") が続き、URL自身([11]で定義されている)が続き、任意的な単引用符 (') または二重引用符 (") が続き、任意的な空白が続き、')' が続いたものである。URL自身の一部ではない引用符は揃っていなければならない。
URLの中に現れる括弧、コンマ、空白キャラクタ、単引用符 (')、二重引用符 (") は、'\('、'\)'、'\,' というように、バックスラッシュでエスケープされなければならない。
部分的なURLは、文書との相対比較ではなく、スタイルシートのソースとの相対比較で解釈される。
BODY { background: url(yellow) }
CSS1を使って文書を表示するユーザエージェントは、
CSS1スタイルシートを出力するユーザエージェントは、
CSS1を使って文書を表示し、かつCSS1スタイルシートを出力するユーザエージェントは、両セットの適合性要求に沿えばCSS1仕様書に適合する。
ユーザエージェントはCSS1のすべての機能を実装する必要はない。コア機能を実装することによりCSS1に適合できるのである。コア機能は、明示的に除外された部分を除いたCSS1仕様書全体からなる。テキストでは、それらの部分は "CSS1コア:" の後に、どの機能がコア機能の外にあるかの説明を続けて示されている。コア機能から除外された機能のセットはCSS1アドバンスト機能と呼ばれる。
この節はCSS1への適合性を定義するだけである。将来には、ユーザエージェントが異なった機能のセットを適合のために実装するよう要求してもよい他の水準のCSSがあるだろう。
表現媒体の制約の例には、リソースの限定(フォント、色)や解像度の限定(マージンが正確でないかもしれない)がある。これらの場合には、ユーザエージェントはスタイルシートの値を近似するべきである。また、異なるユーザインターフェイスの枠組みも、それ自身の制約を有する場合がある。VRブラウザは、ユーザからの「距離」に基づいて文書を再伸縮してもよい。
ユーザエージェントは、表現上の追加的な選択を読者に提供してもよい。たとえば、ユーザエージェントは、視覚障碍をもつ読者のためのオプションを提供したり、ブリンク(点滅)をオフにする選択を提供してもよいのである。
CSS1はフォーマットのすべての面を規定しているわけではない。たとえば、ユーザエージェントは、文字スペーシングのアルゴリズムを自由に選択できるのである。
この仕様書は、ユーザエージェントが
上記の適合性規則は機能について記述するだけであって、ユーザインターフェイスについては記述しない。
この仕様書はCSS第1水準を定義するものである。将来、追加的な機能を有する、より高水準のCSSが定義されるであろうと考えられる。CSS1しかサポートしないユーザエージェントが高水準の機能を含んだスタイルシートを読めることを保障するため、この節は、CSS第1水準では不当な一定の構成概念にユーザエージェントが遭遇したときにどうするかを定義する。
H1 { color: red; rotation: 70deg }
であれば、ユーザエージェントはスタイルシートが
H1 { color: red; }
であるかのように扱う。
IMG { float: left } /* CSS1 */
IMG { float: left top } /* "top" は 'float' の値ではない' */
IMG { background: "red" } /* CSS1ではキーワードは引用符で括れない */
IMG { border-width: 3 } /* 長さ値には単位が指定されなければならない */
上記の例では、CSS1パーサ(解析器)は、あたかもスタイルシートが
IMG { float: left }
IMG { }
IMG { }
IMG { }
であるかのように最初のルールを尊重して残りを無視する。
将来のCSS仕様書に適合しているユーザエージェントは、他のルールのうちの1つまたはそれ以上をも受けつけるかもしれない。
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
H1 { color: red }
}
H1 {color: blue}
'@three-dee' はCSS1によれば違法である。したがって、アットルール全体(3つ目の右中括弧を含めてそこまで)が無視される。CSS1ユーザエージェントはそれをスキップし、効果面ではスタイルシートをこのように縮小する。
H1 {color: blue}
詳述する。
CSSのどのバージョンでも、CSSスタイルシートは 命令文 (statement) のリストからなる。命令文には2種類ある。アットルールとルールセットである。命令文の周囲には空白(スペース、タブ、改行)があってもよい。
CSSスタイルシートはしばしばHTML文書に埋めこまれるが、古いユーザエージェントからスタイルシートを隠すことができるようにするには、スタイルシートをHTML注釈(コメント)の内部に置くのが便利である。"<!--"、"-->" というHTML注釈トークンは、命令文の前後や間に発生してかまわない。その周囲には空白があってもよい。
アットルールは、アットキーワードで始まるが、このキーワードは最初に '@' をもった識別子(たとえば、'@import'、'@page')である。識別子は、文字、数字、ダッシュ、エスケープされたキャラクタ(定義は下記)からなる。
アットルールは、次のセミコロン (;) か次のブロック(短く定義されている)か、どちらか先に来るほうを含めてそこまでにあるすべてものからなる。'@import' 以外のアットキーワードで始まるアットルールに遭遇したCSS1ユーザエージェントは、アットルール全体を無視して、その後を解析し続ける。'@import' で始まるアットルールでも、それがスタイルシートの先頭に発生せず、すなわち他のルール(無視されるルールであっても)の後に発生するならば、CSS1ユーザエージェントはそれを無視する。ここらに例がある。
CSS1パーサが
@import "subs.css";
H1 { color: blue }
@import "list.css";
というスタイルシートに遭遇したものとする。
CSS1によれば、2番目の '@import' は違法である。CSS1パーサはアットルール全体をスキップし、効果面ではスタイルシートをこのように縮小する。
@import "subs.css";
H1 {color: blue}
ブロックは、左中括弧 ({) で始まり、対応する右中括弧 (}) で終わる。この間にはどのようなキャラクタがあってもよい。ただし、括弧 (())、角括弧 ([])、中括弧 ({}) はつねに対応する対で発生するものであり、ネストしてもよい。単引用符 (') および二重引用符 (") も対応する対で発生し、その間にあるキャラクタは文字列として解析される(文字列の定義は 付録Bのトークナイザを見ること)。ここにあるのはブロックの例である。引用符の間にある右中括弧はブロックの開始中括弧と対応せず、また2つ目の単引用符はエスケープされたキャラクタであり、よって開始引用符と対応しないことに注意すること。
{ causta: "}" + ({7} * '\'') }
ルールセットは、セレクタ文字列に宣言ブロックが続いたものからなる。セレクタ文字列は、最初の左括弧(を含まずそこ)までのすべてのものからなる。正当なCSS1ではないセレクタ文字列で始まるルールセットはスキップされる。
たとえば、CSS1がこのスタイルシートに遭遇したとする。
H1 { color: blue }
P[align], UL { color: red; font-size: large }
P EM { font-weight: bold }
2行目には、CSS1では違法なセレクタ文字列が含まれている。CSS1ユーザエージェントはルールセットをスキップすることになり、スタイルシートをこのように縮小する。
H1 { color: blue }
P EM { font-weight: bold }
宣言ブロックは、左中括弧 ({) で始まり、対応する右中括弧 (}) で終わる。その間には0個またはそれ以上の宣言のリストがあり、宣言はセミコロン (;) で区切られる。
宣言は、プロパティ、コロン (:)、値からなる。これらのそれぞれの周囲には、空白があってもよい。プロパティは識別子であり、前に定義されている。値の中にはどのようなキャラクタが発生してもよいが、括弧 (())、角括弧 ([])、中括弧 ({})、単引用符 (')、二重引用符 (") は対応する対で来なければならない。括弧、各括弧、中括弧はネストしてよい。引用符の内側ではキャラクタは文字列として解析される。
将来において新しいプロパティや、既存のプロパティの新しい値を追加できることを保証するため、ユーザエージェントは不当なプロパティ名や不法な値をもつ宣言をスキップしなければならない。CSS1プロパティはプロパティごとに、受け入れる値について、自身の統語論的および意味論的な制約をもっている。
たとえば、CSS1パーサがこのスタイルシートに遭遇したと想定する。
H1 { color: red; font-style: 12pt }
P { color: blue; font-vendor: any; font-variant: small-caps }
EM EM { font-style: normal }
最初の行の2番目の宣言は '12pt' という不当な値をもっている。2行目の2番目の宣言は 'font-vendor' という未定義のプロパティを含んでいる。CSS1パーサはこれらの宣言をスキップすることになり、スタイルシートをこのように縮小する。
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
注釈(1.7 を見ること)は、空白が発生できる場所ならどこでも発生でき、空白とみなされる。CSS1は(値の内部といったような)空白が発生できる追加の場所を定義し、注釈も同様にその場所では許容される。
以下の規則はつねに効力がある。
注意:HTMLの CLASS アトリビュートは、クラス名の中において、上記のセレクタで認められているセットよりも多数のキャラクタを許容している。CSS1では、これらのキャラクタはエスケープされるか、Unicode 番号として書かれる必要がある。"B&W?" は "B\&W\?" や "B\26W\3F" と書くことができ、"κουρο?"(ギリシャ語:"kouros")は "\3BA\3BF\3C5\3C1\3BF\3C2" と書くことができる。CSSの後のバージョンではより多くのキャラクタが直接に入れられることと期待される。
付録B はCSS1のための文法を与える。
[1] ウェブスタイルシートに関するW3Cリソースページ (http://www.w3.org/pub/WWW/Style)
[2] 1997年のある時、我々は、スタイルシートや国際化をサポートする単一のHTML仕様書があることを期待する。この領域における進行中の作業の中にあるのが、 "HTML3 and Style Sheets" (http://www.w3.org/pub/WWW/TR/WD-style) と "Cougar DTD" (http://www.w3.org/pub/WWW/MarkUp/Cougar/HTML.dtd) である。
[3] T Berners-Lee, D Connolly: "Hypertext Markup Language - 2.0", RFC 1866, MIT/W3C,1995年11月. 仕様書はハイパーテキスト形式 (http://www.w3.org/pub/WWW/MarkUp/html-spec/html-spec_toc.html) でも入手可能である。
[4] F Yergeau, G Nicol, G Adams, M Dürst: "Internationalization of the Hypertext Markup Language" (ftp://ietf.org/internet-drafts/draft-ietf-html-i18n-05.txt).
[5] ISO 8879:1986. Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML)
[6] ISO/IEC 10179:1996 Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL). 仕様書はハイパーテキスト形式 (http://occam.sjf.novell.com:8080/dsssl/dsssl96) でも入手可能である。
[7] ISO/IEC 9899:1990 Programming languages -- C.
[8] The Unicode Consortium, "The Unicode Standard -- Worldwide Character Encoding -- Version 1.0", Addison-Wesley, Volume 1, 1991, Volume 2, 1992.
[9] M Anderson, R Motta, S Chandrasekar, M Stokes: "Proposal for a Standard Color Space for the Internet - sRGB" (http://www.hpl.hp.com/personal/Michael_Stokes/srgb.htm)
[10] CIE Publication 15.2-1986, "Colorimetry, Second Edition", ISBN 3-900-734-00-3 (http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html)
[11] T Berners-Lee, L Masinter, M McCahill: "Uniform Resource Locators (URL)", RFC 1738, CERN, Xerox Corporation, University of Minnesota, 1994年12月
[12] "PNG (Portable Network Graphics) Specification, Version 1.0 specification" (http://www.w3.org/pub/WWW/TR/REC-png-multi.html)
[13] Charles A. Poynton: "Gamma correction on the Macintosh Platform" (ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)
[14] International Color Consortium: "ICC Profile Format Specification, version 3.2", 1995年 (ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)
[15] S C Johnson: "YACC - Yet another compiler compiler", Technical Report, Murray Hill, 1975年
[16] "Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213
HTMLのまだ短い人生の間にも、この提案が多くを負うスタイルシートの提案がいつくもあった。とりわけ、Robert Raisch、Joe English、Pei Wei からの提案は有力であった。
多数の人々にCSS1の開発に貢献いただいた。感謝の意を表したい。Terry Allen、Murray Altheim、Glenn Adams、Walter Bender、Tim Berners-Lee、 Yves Bertot、Scott Bigham、Steve Byrne、Robert Cailliau、James Clark、 Daniel Connolly、Donna Converse、Adam Costello、Todd Fahrner、Todd Freter、 Roy Fielding、Neil Galarneau、Wayne Gramlich、Phill Hallam-Baker、 Philipp Hoschka、Kevin Hughes、Scott Isaacs、Tony Jebson、William Johnston、 Gilles Kahn、Philippe Kaplan、Phil Karlton、Evan Kirshenbaum、Yves Lafon、 Murray Maloney、Lou Montulli、Colas Nahaboo、Henrik Frystyk Nielsen、 David Perrell、William Perry、Scott Preece、Paul Prescod、Liam Quin、 Vincent Quint、Jenny Raggett、Thomas Reardon、C馗ile Roisin、 Michael Seaton、David Seibert、David Siegel、David Singer、Benjamin Sittler、 Jon Smirl、Charles Peyton Taylor、Ir鈩e Vatton、Daniel Veillard、 Mandira Virmani、Greg Watkins、Mike Wexler、Lydja Williams、Brian Wilson、 Chris Wilson、Lauren Wood、Stephen Zilles.
この3人の方々は特筆に値する。Dave Raggett(激励とHTML3に関する作業について)、 Chris Lilley(特に色およびフォントの領域におけるたゆまぬ貢献について)、 Steven Pemberton(創造的技量のみならぬ組織的技量について)
(この付録は参考であって、規範的ではない。)
以下のスタイルシートは、HTML 2.0 [3] 仕様書内で示唆されているレンダリングに従って書かれたものである。たとえば色のように、いくつかのスタイルは完全性のために追加されている。下記のものに似たスタイルシートがユーザエージェントのデフォルトとして使われることが示唆される。
BODY {
margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
color: black;
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR { display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bolder } /* 親エレメントとの相対比較 */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 } /* タイトなフォーマット */
LI { margin-left: 3em }
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }
HR { border-top: solid } /* 'border-bottom' も使えたところである */
A:link { color: blue } /* 未訪問リンク */
A:visited { color: red } /* 既訪問リンク */
A:active { color: lime } /* アクティブリンク */
/* IMG エレメントの周りのアンカーボーダーの設定には
文脈的セレクタが必要である */
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
(この付録は規範的である。)
すべての実装がサポートする必要がある最低限のCSS(すなわち、どのバージョンのCSSでも)文法は 7 で定義されている。下記の文法は、それよりはるかに小さい言語、すなわちCSS1の統語論を定義するものである。
しかしながら、ある意味、これはなおCSS1の上位セットである。この文法内で表現できない追加的な意味論的制約がある。適合的なユーザエージェントは、前方互換的解析規則 (7.1)、プロパティおよび値の表記 (5)、単位表記 (6) にも執着しなければならない。加えて、HTMLが、たとえば CLASS アトリビュートの取りうる値などに制約を課す。
下記の文法は LL(1) である(が、CSS1の統語論を表現するだけであり、解析慣習を表現してないので、ほとんどのユーザエージェントはこれを直接に使うべきではないということに注意すること)。生成規則の書式は人間の使用のために最適化されており、YACC [15] を超えた短縮表記が用いられている。
* : 0回またはそれ以上 + : 1回またはそれ以上 ? : 0回または1回 | : 選択肢を区切る [] : グループ化
生成規則は、次の通りである。
stylesheet
: [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]*
;
import
: IMPORT_SYM [STRING|URL] ';' /* 例. @import url(fun.css); */
;
unary_operator
: '-' | '+'
;
operator
: '/' | ',' | /* empty */
;
property
: IDENT
;
ruleset
: selector [ ',' selector ]*
'{' declaration [ ';' declaration ]* '}'
;
selector
: simple_selector+ [ pseudo_element | solitary_pseudo_element ]?
| solitary_pseudo_element
;
/* "id" は、P#p007 というように、その左側でエレメント型に
** 添付されるIDである。
** "solitary_id" は、#p007 というように、添付されないID
** である。
** クラスや擬似クラスについても同様である。
*/
simple_selector
: element_name id? class? pseudo_class? /* 例: H1.subject */
| solitary_id class? pseudo_class? /* 例: #xyz33 */
| solitary_class pseudo_class? /* 例: .author */
| solitary_pseudo_class /* 例: :link */
;
element_name
: IDENT
;
pseudo_class /* A:link といったもの */
: LINK_PSCLASS_AFTER_IDENT
| VISITED_PSCLASS_AFTER_IDENT
| ACTIVE_PSCLASS_AFTER_IDENT
;
solitary_pseudo_class /* :link といったもの */
: LINK_PSCLASS
| VISITED_PSCLASS
| ACTIVE_PSCLASS
;
class /* P.note といったもの */
: CLASS_AFTER_IDENT
;
solitary_class /* .note といったもの */
: CLASS
;
pseudo_element /* P:first-line といったもの */
: FIRST_LETTER_AFTER_IDENT
| FIRST_LINE_AFTER_IDENT
;
solitary_pseudo_element /* :first-line といったもの */
: FIRST_LETTER
| FIRST_LINE
;
/* id および solitary_id には、"#" の後の部分が合法な
** HTML ID 値でなくてはならないという制約がある。
** たとえば、"#x77" は大丈夫だが、"#77" は駄目である。
*/
id
: HASH_AFTER_IDENT
;
solitary_id
: HASH
;
declaration
: property ':' expr prio?
| /* 空 */ /* 文法エラーを避けている... */
;
prio
: IMPORTANT_SYM /* !important */
;
expr
: term [ operator term ]*
;
term
: unary_operator?
[ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
| IDENT | hexcolor | URL | RGB ]
;
/* color には、"#" の後に3つか6つの16進数字(すなわち
** [0-9a-fA-F])をもたなくてはならないという制約がある。
** たとえば、"#000" は大丈夫だが、"#abcd" は駄目である。
*/
hexcolor
: HASH | HASH_AFTER_IDENT
;
以下はトークナイザであり、flex [16] 表記法で書かれている。これは flex の8ビット実装を想定していることに注意すること。トークナイザは大文字小文字を区別しない(flex コマンドラインオプション -i)。
unicode \\[0-9a-f]{1,4}
latin1 [｡-]
escape {unicode}|\\[ -~｡-]
stringchar {escape}|{latin1}|[ !#$%&(-~]
nmstrt [a-z]|{latin1}|{escape}
nmchar [-a-z0-9]|{latin1}|{escape}
ident {nmstrt}{nmchar}*
name {nmchar}+
d [0-9]
notnm [^-a-z0-9\\]|{latin1}
w [ \t\n]*
num {d}+|{d}*\.{d}+
string \"({stringchar}|\')*\"|\'({stringchar}|\")*\'
%x COMMENT
%s AFTER_IDENT
%%
"/*" {BEGIN(COMMENT);}
<COMMENT>"*/" {BEGIN(0);}
<COMMENT>\n {/* ignore */}
<COMMENT>. {/* ignore */}
@import {BEGIN(0); return IMPORT_SYM;}
"!"{w}important {BEGIN(0); return IMPORTANT_SYM;}
{ident} {BEGIN(AFTER_IDENT); return IDENT;}
{string} {BEGIN(0); return STRING;}
{num} {BEGIN(0); return NUMBER;}
{num}"%" {BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm} {BEGIN(0); return LENGTH;}
{num}mm/{notnm} {BEGIN(0); return LENGTH;}
{num}cm/{notnm} {BEGIN(0); return LENGTH;}
{num}pc/{notnm} {BEGIN(0); return LENGTH;}
{num}in/{notnm} {BEGIN(0); return LENGTH;}
{num}px/{notnm} {BEGIN(0); return LENGTH;}
{num}em/{notnm} {BEGIN(0); return EMS;}
{num}ex/{notnm} {BEGIN(0); return EXS;}
<AFTER_IDENT>":"link {return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited {return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active {return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line {return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter {return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name} {return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name} {return CLASS_AFTER_IDENT;}
":"link {BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited {BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active {BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line {BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter {BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name} {BEGIN(AFTER_IDENT); return HASH;}
"."{name} {BEGIN(AFTER_IDENT); return CLASS;}
url\({w}{string}{w}\) |
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\) {BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\) {BEGIN(0); return RGB;}
[-/+{};,#:] {BEGIN(0); return *yytext;}
[ \t]+ {BEGIN(0); /* ignore whitespace */}
\n {BEGIN(0); /* ignore whitespace */}
\<\!\-\- {BEGIN(0); return CDO;}
\-\-\> {BEGIN(0); return CDC;}
. {fprintf(stderr, "%d: Illegal character (%d)\n",
lineno, *yytext);}
(この付録は参考であって、規範的ではない。)
HTML文書は、Unicode によって定義されている約3万の異なるキャラクタのどれを含んでいてもよい。多くの文書は数百しか必要としない。フォントも多くは数百の字形しか含んでいない。5.2 との組み合わせで、この付録は文書内のキャラクタやフォント内の字形がどのように照合されるを説明する。
HTML文書の中身は、一連のキャラクタとマークアップである。文書を「回線で」送るため、いくつかの取りうるエンコーディングのうちの1つを用いて、文書は一連のバイトとしてコード化される。HTML文書はキャラクタを見つけるためにデコードされる必要がある。たとえば、西欧では 224 というバイトを使って低アクセントつきのa (・ を表わすのが通例であるが、ヘブライ語ではアレフを表わすのに 224 というバイトを使うのがより一般的である。日本語では、あるバイトの意味はたいてい、それに先行するバイトに依存する。いくつかのエンコーディングでは、1つのキャラクタが2バイト(またはそれ以上)としてコード化される。
ユーザエージェントは、HTTPヘッダ内の "charset" パラメータを見て、どのようにバイトをデコードすべきかを知る。典型的なエンコーディング(charset の値)には、"ASCII"(英語向け)、"ISO-8859-1"(西欧向け)、"ISO-8859-8"(ヘブライ語向け)、"Shift-JIS"(日本語向け)がある。
HTML [2][4] は、約3万の異なるキャラクタ、すなわち Unicode によって定義されているキャラクタを許容する。その多くの異なったキャラクタを使う文書は多くなく、正しいエンコーディングを選択すればたいていは、文書が1キャラクタにつき1バイトしか必要としないことが保証されるであろう。エンコード範囲の外にある偶さかのキャラクタも、数的キャラクタ参照 (numerical character reference) として入れることができる。'Π' は、どのエンコーディングが使われていても、つねにギリシャ後の大文字のパイを意味することになる。このことから必然的に、ユーザエージェントは、たとえ数個のエンコーディングしか扱わないのであっても、どの Unicode キャラクタにも準備しておく必要があることになる。
フォントはキャラクタを含んでいるのではなく、字形(gryph:字形)として知られるキャラクタの画像を含んでいる。字形とは、キャラクタの特定の表現をアウトライン形式またはビットマップ形式で構成するものである。明示的であると黙示的であるとを問わず、各フォントは、フォントエンコーディングテーブルという、各字形についてそれがどのキャラクタの表現であるかを示す、フォントに関連づけられた表をもっている。Type 1 フォントでは、テーブルはエンコーディングベクター (encoding vector) といわれている。
実は、同じキャラクタを表わす数個の字形を含むフォントは多い。これらの字形のどれが用いられるべきかは、その言語の規則や設計者の好みによる。
たとえばアラビア語では、すべての文字に、文字が単語の先頭で使われるか、中間か、末尾か、独立して使われるかによって異なる4つの形がある。これはどの場合でも同じキャラクタであって、したがってHTML文書内には1つのキャラクタしかないが、印字されるときにはその都度異なって見えるのである。
提供されているさまざまな代替的形式の中からの選択をグラフィックデザイナーに委ねるフォントもある。残念ながら、CSS1はまだそうした代用品を選択する手段を提供していない。現在のところは、そうしたフォントから選ばれるのはつねにデフォルトの形である。
1つの文書内のキャラクタや1つのエレメント内のキャラクタでさえもすべてを表示するためには単一のフォントでは充分でない場合があるという問題を処理するため、CSS1はフォントセット (font set) の使用を認める。
CSS1のフォントセットとは、同じスタイルとサイズのものすべてを集めたフォントの一覧であり、あるキャラクタを表わす字形が含まれているかが順々に調べられる。数学記号が混ざった英語のテキストを含むエレメントは、2つのフォントのフォントセットを必要とする場合がある。一つは文字と数字を含んでいるものであり、もう一つは数学記号を含んでいるものである。フォントセットの選択機構の詳しい説明は 5.2 を見ること。
ここにあるのは、ラテン文字、日本語文字、数学記号のあるテキストを含むと考えられるテキストに適したフォントセットの例である。
BODY { font-family: Baskerville, Mincho, Symbol, serif }
Baskerville フォント(ラテン文字だけのフォント)で利用可能なキャラクタは、そのフォントから取られ、日本語は Mincho から取られ、数学記号は Symbol から来ることになる。その他のキャラクタは(うまくいけば)一般的 (generic) フォントファミリーの 'serif' から来ることになる。他のフォントの1つまたはそれ以上が利用不能であっても、'serif' フォントファミリーが用いられることになる。
(この付録は参考であって、規範的ではない。)
もしガンマ問題にまだ馴染みがないのであれば、PNG仕様書 [12] の Gamma Tutorial を見ること。
計算時には、CRT上に表示をするユーザエージェントは、理想的なCRTを想定し、ディザリングによって引き起こされる見掛けのガンマの影響を無視してもよい。それは、現行のプラットフォーム上でユーザエージェントがなす必要がある最小限の処理がこの通りだという意味である。
「ガンマ値を適用する」とは、R、G、Bの3つそれぞれを、OSに渡す前に、R'=Rgamma、G'=Ggamma、B'=Bgamma に変換しなければならないという意味である。
ブラウザ呼び出し時にこのように256要素の早見表を一度に作ることによって、これを迅速に処理してもよい。
for i := 0 to 255 do
raw := i / 255;
corr := pow (raw, gamma);
table[i] := trunc (0.5 + corr * 255.0)
end
そうすれば、色アトリビュートごと、ましてやピクセルごとに超絶的数学をこなす必要は避けられる。
(この付録は参考であって、規範的ではない。)
CSS1に関する作業の目的は、HTML文書向けの簡素なスタイルシート機構を作り出すことである。現行の仕様書は、スタイルシートをウェブ上で実現するために必要な簡潔性と、より豊富な視覚的制御を求める制作者からの圧力との間の均衡である。CSS1が提供するもの。
<H1>H<FONT SIZE=-1>EADLINE</FONT></H1>
という視覚的マークアップと、このスタイルシートとを比べてみること。
H1 { font-style: small-caps }
<H1>Headline</H1>
CSS1が提供しないもの。
我々はいくつかの方面でCSSの拡張が見られることを期待する。
我々はCSSがこういう方向に進化することを期待しない。
Copyright(C)1996 W3C(マサチューセッツ工科大学、フランス国立情報処理自動化研究所、慶應義塾大学).すべての権利が留保されている. W3Cの 免責 (liability)、 商標 (trademark))、 文書利用 (document use)、 ソフトウェア使用許諾 (software licensing) 規則が適用される。