この文書は、W3C 標準情報 (TR) の草案 (Working Draft)、"CSS Mobile Profile 1.0" (2000 年 10 月 13 日付)
なお、この文書の翻訳にあたり、JIS 標準情報 (TR) の「段階スタイルシート 水準2(CSS2)」を参考にしました。いくつかの個所では、引用も行っていますが、技術的内容を変えない範囲で記号や用語、言い回しを変更しています。
誤訳・誤植を発見された方は ToyFish.Net までお知らせください。
翻訳の最終更新日: 2000 年 10 月 21 日
Copyright ©2000 W3C ® (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
この仕様は、モバイル機器の要求や制限に合わせた、 カスケーディングスタイルシート・レベル 2 (Cascading Style Sheets Level 2) 仕様の サブセットを定義するものです。
このセクションは、公開時点でのこの文書の位置付けについて 述べたものです。他の文書がこの文書を置き換えることがあります。 この文書群の最新の位置付けのものは、W3C で管理されています。
これは、CSS モバイルプロファイル仕様の草案です。 変更は保証されています。この草案を実装する人は、 私たちがこの仕様を変更するか決定する際に初期実装によって 制限を受けるつもりはないということをご理解ください。
この仕様は W3C 会員およびその他の利害関係者によるレビューのために 作成された、CSS 作業グループ (スタイル関連活動の一環) の 草案です。草案の公開は、W3C 会員組織や、 CSS 作業グループメンバーの同意を示すものではありません。 W3C 草案の通例として、この文書はいつでも他の文書によって 更新、置換、破棄される可能性があります。W3C 草案を 参照資料として使ったり、「進行中の作業」以外のものとして引用するのは 適切ではありません。
この草案や、スタイル分野のその他のドラフトについての 議論には、メーリングリスト www-style@w3.org (使い方参照) をご利用ください。
W3C が現在公開している勧告その他の技術文書の一覧は、 http://www.w3.org/TR にあります。
この文書は、携帯電話などのモバイル機器に適した、 カスケーディングスタイルシート・レベル 2 (Cascading Style Sheets, level 2; CSS2) 仕様の プロファイルを規定するものです。このプロファイルへ適合するというのは、 ユーザエージェントが CSS2 適合要件のうち少なくともこの仕様で定義された機能を サポートしていることを表します。この点については、 この後の 2 節、適合性で説明しています。
[CSS2] では次のように定義されています。
CSS2 はスタイルシート言語であり、これによって、文書作成者及び利用者が、 フォント、スペーシング、聴覚キューなどのスタイルを、HTML 文書、 XML アプリケーションなどの構造化文書に付加することができます。 文書の内容から文書の表示スタイルを分離することによって、 CSS2 はウェブ作成及びサイト保守を簡便化します。 CSS2 は CSS1 に依存し ([CSS1] 参照)、 すべて妥当な CSS1 スタイルシートは妥当な CSS2 スタイルシートであって、 その例外はほとんどありません。CSS2は、メディア固有のスタイルシートをサポートし、 それによって文書作成者は文書の表示を視覚的ブラウザ、聴覚装置、プリンタ、 点字装置、ハンドヘルド装置などに合わせられます。
要するに、CSS2 では、複数の機器やメディアタイプで 文書を表示できるスタイルシートを開発者が制作する方法を 規定しています。これは非常に重要なことですが、 様々な機器でどの機能がサポートされるかについて 制作者が知ることも重要です。また、同じような機器は同じような方法で 処理を行うことも重要です。さもないと、制作者は 機器ごとに専用バージョンのスタイルシートを開発しなければ ならなくなるでしょう -- コンテンツ開発のコストは上昇し、 相互運用性が減少することになります。
CSS モバイルプロファイルは、モバイル機器向けの適合条件プロファイルを 規定し、プロパティ、値、選択子、カスケーディング規則の最小限のセットを 決定ます。そうして得られる CSS モバイルプロファイルは、 CSS1 によく似たものになっています。
プロファイルというものの第一の役割は、相互運用性について 最小限の保証を行う、機能群のサブセットを定義することです。 CSS モバイルプロファイルの場合、上記の保証にあたるのは、 適合するユーザエージェントが、CSS2 の適合性条項 ([CSS2] の 3.2 節) に 従ってこの仕様で定義され、改めて定められ、下記に要約された機能を サポートするということです。
CSS2 同様、この適合性条項には付則があります。
ページ制作者は、この適合性プロファイルを使って 前方互換性を活用することが推奨されます。ページ制作者は、 カスケーディング規則が正しく処理されることや、 未知のプロパティや値は無視されることを理解した上で スタイルプロパティを使用できるはずです。 例を示します。
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 指定は無視します。
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 選択子 | はい |
次の表は、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 |
CSS モバイルプロファイルは、[CSS2] で 規定されているのと同じ書式を使用します。CSS モバイルプロファイルでは CSS2 で使われている値のサブセットを使用します。具体的には次のとおりです。
同様に、CSS モバイルプロファイルでは、適合するユーザエージェントが [CSS2] で規定された文字符号化機構をサポートする ことを必須とします。具体的には、次のとおりです。
一般に、CSS モバイルプロファイルでは CSS2 と同じカスケーディング規則を 使用します。具体的には次のとおりです。
CSS モバイルプロファイルに適合するユーザエージェントは、 CSS2 ([CSS2] 7 章) で規定されているように、 メディア依存のスタイルシートを処理できなければなりません。 具体的には次のとおりです。
handheld
を対象とするスタイルシートを受け入れ、処理するものとします (SHALL)。screen
や print
など) を処理してもかまいません (MAY) が、必ずしもそうする必要はありません。MP-UA は、メディアタイプ handheld に関係する CSS2 適合性指令を満たす必要はありません。MP-UA が満たす必要があるのは、、この仕様の適合性指令だけです。
[訳注: 各仕様の日本語訳については、http://www.w3.org/Consortium/Translation/Japanese に情報がまとめられています]