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

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

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

翻訳の最終更新日: 2001 年 2 月 11 日


W3C

CSS Mobile Profile 1.0

草案 2001 年 1 月 29 日

このバージョン:
http://www.w3.org/TR/2001/WD-css-mobile-20010129
最新バージョン:
http://www.w3.org/TR/css-mobile
前のバージョン:
http://www.w3.org/TR/2000/WD-css-mobile-20001013
著者:
Ted Wugofski、Openwave [ted.wugofski@openwave.com]
Doug Dominiak、Motorola [doug.dominiak@motorola.com]
Peter Stark、Ericsson [peter.stark@ecs.ericsson.se]

概要

この仕様は、モバイル機器の要件や制限に合わせて調整された、 Cascading Style Sheets Level 2 仕様の サブセットを定義するものです。

この文書の位置付け

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

この文書は CSS ワーキンググループ (スタイルアクティビティの一環) で制作されました。 この文書は W3C の 最終呼集草案 (Last Call Working Draft) です。最終呼集とは、 本ワーキンググループがこの仕様の準備が完了したと考えており、 これをコメントの最終呼集にしたいと思っているということです。 フィードバックが好反応であれば、本ワーキンググループは W3C 勧告候補 (Candidate Recommendation) としての検討を提案する段階に入ります。 コメントは 2001 年 3 月 1 日までにお送りください。

この最終呼集に関する決定は、11 月 6 日に行われた ワーキンググループの会合でなされました。この会合については、議事録 (会員専用リンク) を参照してください。

ただし、この文書は W3C 草案 (Working Draft) であるため、 いつでもほかの文書によって更新、置換、破棄される可能性があります。 W3C 草案を基準資料として使用したり、「未完成品」以外のものとして 引用したりするのは適切ではありません。W3C 草案の内容を実装する場合は、 仕様を変更するかどうかを決定する際に早期実装によって制限を受けることを ワーキンググループは認めないということをご理解ください。 草案の公開は、W3C 会員組織あるいは CSS ワーキンググループのメンバーによる 支持を示すものではありません。

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

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

目次

1. 概論

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

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

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

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

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

2. 適合条件

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

  1. CSS Mobile Profile に適合するユーザエージェント (MP-UA) は、CSS2 のメディアタイプ all および handheld をサポートしなければなりません (MUST)。MP-UA は、この他の CSS2 メディアタイプについてもサポートしてもかまいません (MAY)。
  2. MP-UA は、各ソース文書について、関連づけられているスタイルシートのうち、サポートしているメディアタイプに合うものはすべて、取得しようとしなければなりません (MUST)。
  3. MP-UA はこの仕様に従ってスタイルシートの構文解析を行わなければなりません (MUST)。具体的には、MP-UA は、CSS Mobile Profile の @ 規則、ブロック、宣言、セレクタをすべて認識しなければなりません (mustMUST)。MP-UA は、サポートしているメディアタイプに適用されるプロパティを見つけたら、そのプロパティの定義に従って値を構文解析しなければなりません (mustMUST)。すなわち、MP-UA は、有効な値をすべて受け入れなければならず (mustMUST)、無効な値を含む宣言は無視しなければなりません (mustMUST)。MP-UA は、サポートしないメディアタイプに適用される規則を無視しなければなりません (mustMUST)。
  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 Mobile Profile でのセレクタの構文をまとめたものです。 これらのセレクタに加えて、CSS Mobile Profile では、 CSS2 のグループ化機構 ([CSS2] 5.2.1 節を参照) も サポートするものとします含まれます

パターン 意味 セレクタの種類 CSS Mobile
* あらゆる要素と一致する 汎用セレクタ はい
E あらゆる E 要素 (すなわち、型 E の要素) と一致する 型セレクタ はい
E F あらゆる F 要素のうち、E 要素の子孫であるものと一致する 子孫セレクタ はい
E > F あらゆる F 要素のうち、要素 E の子であるものと一致する 子セレクタ いいえ
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 あらゆる F 要素のうち、要素 E が直前にあるものと一致する。 隣接セレクタ いいえ
E[foo] あらゆる E 要素のうち、"foo" 属性が設定されているもの (値は問わない) と一致する。 属性セレクタ いいえ
E[foo="warning"] あらゆる E 要素のうち、"foo" 属性の値が "warning" とちょうど等しいものと一致する。 属性セレクタ いいえ
E[foo~="warning"] あらゆる E 要素のうち、"foo" 属性の値がスペースで区切った値のリストで、その値のひとつが "warning" とちょうど等しいものと一致する。 属性セレクタ いいえ
E[lang|="en"] あらゆる E 要素のうち、"lang" 属性の値がハイフンで区切った値のリストで、その最初 (左から数える) の値が "en" であるものと一致する。 属性セレクタ いいえ
div.warning div[class~="warning"] と同じ クラスセレクタ はい
E#myid あらゆる E 要素のうち、ID が "myid" に等しいものと一致する。 ID セレクタ はい

4. プロパティ

次の表は、CSS Mobile Profile のプロパティとプロパティ値を まとめたものです。プロパティや値の定義については、 [CSS2] を参照してください。

名前 CSS Mobile 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、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 Mobile Profile は、[CSS2] で 規定されているのと同じ構文を使用します。CSS Mobile Profile は、 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 Mobile Profile では、適合するユーザエージェントに対して、 [CSS2] で規定された文字符号化機構をサポートする ことを必須とします。具体的には次のとおりです。

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

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

全体的に、CSS Mobile Profile では 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 Mobile Profile に適合するユーザエージェントは、 CSS2 ([CSS2] 7 節) で規定されているように、 メディア依存のスタイルシートを処理できなければなりません (mustMUST)。 具体的には次のとおりです。

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

MP-UA は、メディアタイプ handheld に付随する CSS2 の適合性条文 ([CSS2] 7.3.1 節を参照) を満たす必要はありません。MP-UA が満たす必要があるのは、この仕様の適合性条文だけです。

付録 A. 参照文献

[CSS2]
"Cascading Style Sheets, level 2"、Bos B. ほか、1998 年 3 月 12 日。入手先は http://www.w3.org/TR/REC-CSS2/ です。
[CSS1]
"Cascading Style Sheets, level 1"、Lie H.W. と Bos B.、1996 年 12 月 17 日。入手先は http://www.w3.org/TR/REC-CSS1-961217.html です。
[HTML4]
"HTML 4.0 Specification"、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>