この文書は、W3C の草案 (Working Draft)、"CSS Mobile Profile 1.0" (2001 年 1 月 29 日付) を ToyFish.Net が独自に翻訳したものです。この仕様書の正式なものは W3C のサイトにある英語版であり、その著作権は W3C が保有しています。また、翻訳に誤りがある可能性に留意してください。
なお、この文書の翻訳にあたり、JIS 標準情報 (TR) の「段階スタイルシート 水準2(CSS2)」を参考にしました。いくつかの個所では、引用も行っていますが、技術的内容を変えない範囲で記号や用語、言い回しを変更しています。
誤訳・誤植を発見された方は ToyFish.Net までお知らせください。
翻訳の最終更新日: 2001 年 2 月 11 日
Copyright ©2001 W3C ® (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
この仕様は、モバイル機器の要件や制限に合わせて調整された、 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 にあります。
この文書は、携帯電話などのモバイル機器に適した、 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 によく似たものになっています。
プロファイルというものの主な役割は、機能群のサブセットを定義し、 相互運用性について最小限の保証を行うことです。 CSS Mobile Profile の場合、ここでいう保証にあたるのは、 適合するユーザエージェントが、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 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 セレクタ | はい |
次の表は、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 |
CSS Mobile Profile は、[CSS2] で 規定されているのと同じ構文を使用します。CSS Mobile Profile は、 CSS2 で使われる値のサブセットを使用します。具体的には次のとおりです。
同様に、CSS Mobile Profile では、適合するユーザエージェントに対して、 [CSS2] で規定された文字符号化機構をサポートする ことを必須とします。具体的には次のとおりです。
全体的に、CSS Mobile Profile では CSS2 と同じカスケーディング規則を 使用します。具体的には次のとおりです。
CSS Mobile Profile に適合するユーザエージェントは、 CSS2 ([CSS2] 7 節) で規定されているように、 メディア依存のスタイルシートを処理できなければなりません (mustMUST)。 具体的には次のとおりです。
handheld
を対象とするスタイルシートを受け入れ、処理するものとします (SHALL)。all
を対象にしたスタイルシートを受け入れ、処理するものとします (SHALL)。screen
や print
など) を処理してもかまいません (MAY) が、必ずしもそうする必要はありません。MP-UA は、メディアタイプ handheld に付随する CSS2 の適合性条文 ([CSS2] 7.3.1 節を参照) を満たす必要はありません。MP-UA が満たす必要があるのは、この仕様の適合性条文だけです。
[訳注: 各仕様の日本語訳については、http://www.w3.org/Consortium/Translation/Japanese に情報がまとめられています]