この文書は、W3C 標準情報 (TR) の草案 (Working Draft)、"CSS Mobile Profile 1.0" (2000 年 10 月 13 日付) ToyFish.Net が独自に翻訳したものです。この仕様書の正式なものは W3C のサイトにある英語版であり、その著作権は W3C が保有しています。また、翻訳に誤りがある可能性に留意してください。

なお、この文書の翻訳にあたり、JIS 標準情報 (TR) の「段階スタイルシート 水準2(CSS2)」を参考にしました。いくつかの個所では、引用も行っていますが、技術的内容を変えない範囲で記号や用語、言い回しを変更しています。

誤訳・誤植を発見された方は ToyFish.Net までお知らせください。

翻訳の最終更新日: 2000 年 10 月 21 日


W3C

CSS モバイルプロファイル 1.0

草案 2000 年 10 月 13 日

この版:
http://www.w3.org/TR/2000/WD-css-mobile-20001013
最新版:
http://www.w3.org/TR/css-mobile
前の版:
(なし)
著者:
Ted Wugofski、Phone.com <ted.wugofski@corp.phone.com>
Doug Dominiak、Motorola <doug.dominiak@motorola.com>
Peter Stark、Ericsson <peter.stark@ecs.ericsson.se>

概要

この仕様は、モバイル機器の要求や制限に合わせた、 カスケーディングスタイルシート・レベル 2 (Cascading Style Sheets Level 2) 仕様の サブセットを定義するものです。

この文書の位置付け

このセクションは、公開時点でのこの文書の位置付けについて 述べたものです。他の文書がこの文書を置き換えることがあります。 この文書群の最新の位置付けのものは、W3C で管理されています。

これは、CSS モバイルプロファイル仕様の草案です。 変更は保証されています。この草案を実装する人は、 私たちがこの仕様を変更するか決定する際に初期実装によって 制限を受けるつもりはないということをご理解ください。

この仕様は W3C 会員およびその他の利害関係者によるレビューのために 作成された、CSS 作業グループ (スタイル関連活動の一環) の 草案です。草案の公開は、W3C 会員組織や、 CSS 作業グループメンバーの同意を示すものではありません。 W3C 草案の通例として、この文書はいつでも他の文書によって 更新、置換、破棄される可能性があります。W3C 草案を 参照資料として使ったり、「進行中の作業」以外のものとして引用するのは 適切ではありません。

この草案や、スタイル分野のその他のドラフトについての 議論には、メーリングリスト www-style@w3.org (使い方参照) をご利用ください。

W3C が現在公開している勧告その他の技術文書の一覧は、 http://www.w3.org/TR にあります。

目次

1. 概観

この文書は、携帯電話などのモバイル機器に適した、 カスケーディングスタイルシート・レベル 2 (Cascading Style Sheets, level 2; CSS2) 仕様の プロファイルを規定するものです。このプロファイルへ適合するというのは、 ユーザエージェントが CSS2 適合要件のうち少なくともこの仕様で定義された機能を サポートしていることを表します。この点については、 この後の 2 節、適合性で説明しています。

[CSS2] では次のように定義されています。

CSS2 はスタイルシート言語であり、これによって、文書作成者及び利用者が、 フォント、スペーシング、聴覚キューなどのスタイルを、HTML 文書、 XML アプリケーションなどの構造化文書に付加することができます。 文書の内容から文書の表示スタイルを分離することによって、 CSS2 はウェブ作成及びサイト保守を簡便化します。 CSS2 は CSS1 に依存し ([CSS1] 参照)、 すべて妥当な CSS1 スタイルシートは妥当な CSS2 スタイルシートであって、 その例外はほとんどありません。CSS2は、メディア固有のスタイルシートをサポートし、 それによって文書作成者は文書の表示を視覚的ブラウザ、聴覚装置、プリンタ、 点字装置、ハンドヘルド装置などに合わせられます。

要するに、CSS2 では、複数の機器やメディアタイプで 文書を表示できるスタイルシートを開発者が制作する方法を 規定しています。これは非常に重要なことですが、 様々な機器でどの機能がサポートされるかについて 制作者が知ることも重要です。また、同じような機器は同じような方法で 処理を行うことも重要です。さもないと、制作者は 機器ごとに専用バージョンのスタイルシートを開発しなければ ならなくなるでしょう -- コンテンツ開発のコストは上昇し、 相互運用性が減少することになります。

CSS モバイルプロファイルは、モバイル機器向けの適合条件プロファイルを 規定し、プロパティ、値、選択子、カスケーディング規則の最小限のセットを 決定ます。そうして得られる CSS モバイルプロファイルは、 CSS1 によく似たものになっています。

2. 適合性

プロファイルというものの第一の役割は、相互運用性について 最小限の保証を行う、機能群のサブセットを定義することです。 CSS モバイルプロファイルの場合、上記の保証にあたるのは、 適合するユーザエージェントが、CSS2 の適合性条項 ([CSS2] の 3.2 節) に 従ってこの仕様で定義され、改めて定められ、下記に要約された機能を サポートするということです。

  1. CSS モバイルプロファイルに適合するユーザエージェント (MP-UA) は、CSS2 のメディアタイプ handheld をサポートしなければなりません (MUST)。
  2. MP-UA は、各ソース文書について、サポートしているメディア型に適した関連するスタイルシートをすべて検索してみなければなりません (MUST)。
  3. MP-UA は、この仕様に従ってスタイルシートの構文解析を行わなければなりません (MUST)。特に、CSS モバイルプロファイルの @ 規則、ブロック、宣言、選択子をすべて認識しなければなりません (must)。MP-UA は、サポートしているメディアタイプに適用するプロパティを見つけたら、プロパティの定義に従って値を構文解析しなければなりません (must)。MP-UA は、サポートしないメディアタイプに適用される規則を無視しなければなりません (must)。
  4. 文書ツリーの各要素については、MP-UA は、プロパティの定義ならびにカスケーディングおよび継承の規則に従って、値を適用可能なすべてのプロパティに割り当てなければなりません (MUST)。
  5. ソース文書に代替スタイルシート (HTML 4.0 [HTML40] でキーワード "alternate" が付いているものなど) が付けられている場合は、MP-UA はユーザにこれらのスタイルシートからひとつを選択させ、選択されたスタイルシートを適用しなければなりません (MUST)。

CSS2 同様、この適合性条項には付則があります。

  1. MP-UA で必要とする場合には、値を近似してもかまいません (MAY)。
  2. 特定の機器の制限 (例えば、MP-UA が色をモノクロのモニタやページにレンダリングできない) のためにこの仕様の一部を実装できない場合には、適合しないとは言わないものとします (SHALL NOT)。

ページ制作者は、この適合性プロファイルを使って 前方互換性を活用することが推奨されます。ページ制作者は、 カスケーディング規則が正しく処理されることや、 未知のプロパティや値は無視されることを理解した上で スタイルプロパティを使用できるはずです。 例を示します。

  body {
    background-position: center center;
    background-position: 45% 55%;
  }
  

background-position プロパティでパーセント値を処理できる MP-UA は、 最初の background-position 指定を処理した後、2 つめの background-position 指定の値を 「上書き」します。パーセント値を処理できない MP-UA は、最初の background-position 指定を 処理し、2 つめの background-position 指定は無視します。

3. 選択子

CSS2 では、文書ツリー内の要素にどのスタイル規則を適用するか、 パターンマッチ規則で決定します [CSS2]。

次の表は、CSS モバイルプロファイルの選択子書式をまとめたものです。 これらの選択子に加えて、CSS モバイルプロファイルでは、 CSS2 のグループ化機構 ([CSS2] 5.2.1 節を参照) も サポートするものとします。

パターン 意味 選択子の種類 CSS モバイル
* すべての要素に一致する 汎用選択子 はい
E あらゆる E 要素 (すなわち、型 E の要素) に一致する 型選択子 はい
E F E 要素の子孫となるあらゆる F 要素に一致する 子孫選択子 はい
E > F 要素 E の子となるあらゆる F 要素に一致する 子選択子 いいえ
E:first-child 要素 E が親の最初の子の場合に要素 E と一致する :first-child 擬似クラス いいえ
E:link
E:visited
要素 E がハイパーリンクのソースアンカであって、そのハイパーリンクのターゲットがまだ訪問されていない (:link) か又は既に訪問された (:visited)ものである場合に、要素 E と一致する。 リンク擬似クラス Yes
E:active ある利用者の動作中に、E と一致する。 動的擬似クラス はい
E:hover ある利用者の動作中に,Eと一致する。 動的擬似クラス いいえ
E:focus ある利用者の動作中に,Eと一致する。 動的擬似クラス はい
E:lang(c) 型 E の要素が (人間の使う) 言語 c で表されている (文書言語が言語を決定する方法を指定する) 場合に、その要素と一致する。 :lang() 擬似クラス いいえ
E + F 要素 E が直前にあるあらゆる F 要素と一致する。 隣接選択子 いいえ
E[foo] "foo" 属性集合 (値は問わない) をもつあらゆる E 要素と一致する。 属性選択子 いいえ
E[foo="warning"] "foo" 属性値が "warning" とちょうど等しくなるあらゆる E 要素と一致する。 属性選択子 いいえ
E[foo~="warning"] "foo" 属性値がスペースで区切った値のリストであって、それら値の一つが "warning" とちょうど等しいあらゆる E 要素と一致する。 属性選択子 いいえ
E[lang|="en"] "lang" 属性が左から "en" で始まる値のハイフンで区切ったリストをもつあらゆる E 要素と一致する。 属性選択子 いいえ
div.warning div[class~="warning"] と同じ クラス選択子 はい
E#myid IDが"myid"に等しいあらゆるE要素と一致する。 ID 選択子 はい

4. プロパティ

次の表は、CSS モバイルプロファイルのプロパティおよびプロパティ値を まとめたものです。プロパティや値の定義については、 [CSS2] を参照してください。

名前 CSS モバイル CSS 値 初期値
'azimuth' いいえ <angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit center
'background' はい ['background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit 個々のプロパティを参照
'background-attachment' scroll および inherit scroll | fixed | inherit scroll
'background-color' はい <color> | transparent | inherit transparent
'background-image' はい <uri> | none | inherit none
'background-position' はい [ [ <percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit 0% 0%
'background-repeat' はい repeat | repeat-x | repeat-y | no-repeat | inherit repeat
'border' はい [ 'border-width' || 'border-style' || color ] | inherit 個々のプロパティを参照
'border-collapse' いいえ collapse | separate | inherit collapse
'border-color' はい <color>{1,4} | transparent | inherit 個々のプロパティを参照
'border-spacing' いいえ <length> <length>? | inherit 0
'border-style' はい <border-style>{1,4} | inherit 個々のプロパティを参照
'border-top' 'border-right' 'border-bottom' 'border-left' はい [ 'border-top-width' || 'border-style' || <color> ] | inherit 個々のプロパティを参照
'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color' はい <color> | inherit 'color' プロパティの値
'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style' はい <border-style> | inherit none
'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' はい <border-width> | inherit medium
'border-width' はい <border-width>{1,4} | inherit 個々のプロパティを参照
'bottom' いいえ <length> | <percentage> | auto | inherit auto
'caption-side' いいえ top | bottom | left | right | inherit top
'clear' はい none | left | right | both | inherit none
'clip' いいえ <shape> | auto | inherit auto
'color' はい <color> | inherit ユーザエージェントによる
'content' いいえ [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit 空文字列
'counter-increment' いいえ [ <identifier> <integer>? ]+ | none | inherit none
'counter-reset' いいえ [ <identifier> <integer>? ]+ | none | inherit none
'cue' いいえ [ 'cue-before' || 'cue-after' ] | inherit 個々のプロパティを参照
'cue-after' いいえ <uri> | none | inherit none
'cue-before' いいえ <uri> | none | inherit none
'cursor' いいえ [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit auto
'direction' いいえ ltr | rtl | inherit ltr
'display' inline | block | list-item | none inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit inline
'elevation' いいえ <angle> | below | level | above | higher | lower | inherit level
'empty-cells' いいえ show | hide | inherit show
'float' はい left | right | none | inherit none
'font' はい [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit 個々のプロパティを参照
'font-family' はい [[ <family-name> | <generic-family> ],]* [ <family-name> | <generic-family> ] | inherit ユーザエージェントによる
'font-size' はい <absolute-size> | <relative-size> | <length> | <percentage> | inherit medium
'font-size-adjust' いいえ <number> | none | inherit none
'font-stretch' いいえ normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit normal
'font-style' はい normal | italic | oblique | inherit normal
'font-variant' はい normal | small-caps | inherit normal
'font-weight' はい normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal
'height' <length>、auto、inherit <length> | <percentage> | auto | inherit auto
'left' いいえ <length> | <percentage> | auto | inherit auto
'letter-spacing' いいえ normal | <length> | inherit normal
'line-height' いいえ normal | <number> | <length> | <percentage> | inherit normal
'list-style' はい [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit 個々のプロパティを参照
'list-style-image' はい <uri> | none | inherit none
'list-style-position' はい inside | outside | inherit outside
'list-style-type' disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha ,none, and inherit disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit disc
'margin' はい <margin-width>{1,4} | inherit 個々のプロパティを参照
'margin-top' 'margin-right' 'margin-bottom' 'margin-left' はい <margin-width> | inherit 0
'marker-offset' いいえ <length> | auto | inherit auto
'marks' いいえ [ crop || cross ] | none | inherit none
'max-height' いいえ <length> | <percentage> | none | inherit none
'max-width' いいえ <length> | <percentage> | none | inherit none
'min-height' いいえ <length> | <percentage> | inherit 0
'min-width' いいえ <length> | <percentage> | inherit ユーザエージェントによる
'orphans' いいえ <integer> | inherit 2
'outline' いいえ [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit 個々のプロパティを参照
'outline-color' いいえ <color> | invert | inherit invert
'outline-style' いいえ <border-style> | inherit none
'outline-width' いいえ <border-width> | inherit medium
'overflow' いいえ visible | hidden | scroll | auto | inherit visible
'padding' はい <padding-width>{1,4} | inherit 個々のプロパティを参照
'padding-top' 'padding-right' 'padding-bottom' 'padding-left' はい <padding-width> | inherit 0
'page' いいえ <identifier> | auto auto
'page-break-after' いいえ auto | always | avoid | left | right | inherit auto
'page-break-before' いいえ auto | always | avoid | left | right | inherit auto
'page-break-inside' いいえ avoid | auto | inherit auto
'pause' いいえ [ [<time> | <percentage>]{1,2} ] | inherit ユーザエージェントによる
'pause-after' いいえ <time> | <percentage> | inherit ユーザエージェントによる
'pause-before' いいえ <time> | <percentage> | inherit ユーザエージェントによる
'pitch' いいえ <frequency> | x-low | low | medium | high | x-high | inherit medium
'pitch-range' いいえ <number> | inherit 50
'play-during' いいえ <uri> mix? repeat? | auto | none | inherit auto
'position' いいえ static | relative | absolute | fixed | inherit static
'quotes' いいえ [ <string><string>]+ | none | inherit ユーザエージェントによる
'richness' いいえ <number> | inherit 50
'right' いいえ <length> | <percentage> | auto | inherit auto
'size' いいえ <length>{1,2} | auto | portrait | landscape | inherit auto
'speak' いいえ normal | none | spell-out | inherit normal
'speak-header' いいえ once | always | inherit once
'speak-numeral' いいえ digits | continuous | inherit continuous
'speak-punctuation' いいえ code | none | inherit none
'speech-rate' いいえ <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit medium
'stress' いいえ <number> | inherit 50
'table-layout' いいえ auto | fixed | inherit auto
'text-align' left | right | center | justify | inherit left | right | center | justify | <string> | inherit ユーザエージェントと書字方向による
'text-decoration' none、underline、inherit none | [ underline || overline || line-through || blink ] | inherit none
'text-indent' <length> および inherit <length> | <percentage> | inherit 0
'text-shadow' いいえ none | [<color> || <length> <length> <length>? ,]* [ <color> || <length> <length> <length>?] | inherit none
'text-transform' はい capitalize | uppercase | lowercase | none | inherit none
'top' いいえ <length> | <percentage> | auto | inherit auto
'unicode-bidi' いいえ normal | embed | bidi-override | inherit normal
'vertical-align' baseline、sub、super、inherit baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit baseline
'visibility' はい visible | hidden | collapse | inherit inherit
'voice-family' いいえ [[ <specific-voice> | <generic-voice> ],]* [ <specific-voice> | <generic-voice> ] | inherit ユーザエージェントによる
'volume' いいえ <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit medium
'white-space' はい normal | pre | nowrap | inherit normal
'widows' いいえ <integer> | inherit 2
'width' <length>、auto、inherit <length> | <percentage> | auto | inherit auto
'word-spacing' いいえ normal | <length> | inherit normal
'z-index' いいえ auto | <integer> | inherit auto

5. CSS 書式

CSS モバイルプロファイルは、[CSS2] で 規定されているのと同じ書式を使用します。CSS モバイルプロファイルでは CSS2 で使われている値のサブセットを使用します。具体的には次のとおりです。

  1. MP-UA は整数値と実数値をサポートするものとします (SHALL) ([CSS2] 4.3.1 項)。
  2. MP-UA は、以下の表記での長さをサポートするものとします (SHALL) ([CSS2] 4.3.2 項)。 MP-UA は他の表記の長さをサポートしてもかまいません (MAY)。
  3. MP-UA はパーセント値をサポートするものとします (SHALL) ([CSS2] 4.3.3 項)。
  4. MP-UA は URI 値をサポートするものとします (SHALL) ([CSS2] 4.3.4 項)。
  5. MP-UA はカウンタ値をサポートしてもかまいません (MAY) ([CSS2] 4.3.5 項)。
  6. MP-UA は以下の表記での色値をサポートするものとします (SHALL) ([CSS2] 4.3.6 項)。 MP-UA は他の表記の色をサポートしてもかまいません (MAY)。

同様に、CSS モバイルプロファイルでは、適合するユーザエージェントが [CSS2] で規定された文字符号化機構をサポートする ことを必須とします。具体的には、次のとおりです。

  1. MP-UA は、文書の文字符号化方式を判断する際に、[CSS2] で規定された優先順序をサポートするものとします (SHALL)。
  2. MP-UA は、CSS2 の @charset 規則をサポートするものとします (SHALL)。

6. プロパティ値の割り当て、カスケーディング、継承

一般に、CSS モバイルプロファイルでは CSS2 と同じカスケーディング規則を 使用します。具体的には次のとおりです。

  1. MP-UA は、CSS2 ([CSS2] 6.1 節) の記述どおりに値を割り当てるものとします (SHALL)。
  2. MP-UA は、CSS2 ([CSS2] 6.2 節) の記述どおりに継承をサポートするものとします (SHALL)。
  3. MP-UA は、CSS2 ([CSS2] 6.3 節) の規定どおりに CSS2 @import 規則をサポートするものとします (SHALL)。
  4. MP-UA は、スタイルシート制作者によるスタイルシートをサポートするものとします (SHALL)。MP-UA は、ユーザやユーザエージェントによるスタイルシート ([CSS2] 6.4 節) をサポートしてもかまいません (MAY)。
  5. MP-UA は、CSS2 カスケーディング規則 ([CSS2] 6.4.1 項〜6.4.4 項) をすべてサポートするものとします (SHALL)。

7. メディアタイプ

CSS モバイルプロファイルに適合するユーザエージェントは、 CSS2 ([CSS2] 7 章) で規定されているように、 メディア依存のスタイルシートを処理できなければなりません。 具体的には次のとおりです。

  1. MP-UA は、CSS2 ([CSS2] 7 章) の規定どおりに CSS2 @media 規則をサポートするものとします (SHALL)。
  2. MP-UA は、メディアタイプ handheld を対象とするスタイルシートを受け入れ、処理するものとします (SHALL)。
  3. MP-UA は、他の (handheld 以外の) メディア依存スタイルシートを含むスタイルシートを受け入れるものとします (SHALL)。
  4. MP-UA は、他のメディアタイプ (screenprint など) を処理してもかまいません (MAY) が、必ずしもそうする必要はありません。

MP-UA は、メディアタイプ handheld に関係する CSS2 適合性指令を満たす必要はありません。MP-UA が満たす必要があるのは、、この仕様の適合性指令だけです。

付録 A. 参照文献

[CSS2]
"Cascading Style Sheets, level 2 (カスケーディングスタイルシート・レベル 2)"、Bos B. ほか、1998 年 3 月 12 日。http://www.w3.org/TR/REC-CSS2/ で入手できます。
[CSS1]
"Cascading Style Sheets, level 1 (カスケーディングスタイルシート・レベル 1)"、Lie H.W. と Bos B.、1996 年 12 月 17 日。http://www.w3.org/TR/REC-CSS1-961217.html で入手できます。
[HTML4]
"HTML 4.0 Specification (HTML 4.0 仕様)"、D. Raggett、A. Le Hors、I. Jacobs、1997 年 7 月 8 日。http://www.w3.org/TR/REC-html40/ で入手できます。

[訳注: 各仕様の日本語訳については、http://www.w3.org/Consortium/Translation/Japanese に情報がまとめられています]


翻訳: ToyFish.Net <sardine@toyfish.net>