CSS3生成・置換内容モジュール(邦訳)

摘要

This CSS3 Module describes how to insert and move content around a document, in order to create footnotes, endnotes, section notes. Inserted content can also introduce counters and strings, which can be used for running headers and footers, section numbering, and lists. Finally, techniques for declaring replaced images, as well as scaling and cropping them using CSS, are described.

このCSS3モジュールは文書の内容の挿入または移動について述べている。 それは脚注(footnote)、endnote、section noteの生成のためである。 挿入される内容はカウンタ、文字列を使うことができ、ヘッダや脚注、章節への採番、リストに利用できる。 最後に、置換画像を指定するための技術、またそれの伸縮、クロッピングをCSSでどのように指定するのかを述べる。

この文書の状態

This is a working draft of a CSS level 3 module. It aspires to eventually become a CSS3 Recommendation.

これはCSSレベル3モジュールの草案である。 最終的にはCSS3勧告とする。

This document is written in the context of the CSS working group which is part of the style activity (see summary).

この文書はスタイル作業 (概要参照) の一部であるCSSワーキンググループの文書として書かれている。

Comments on, and discussions of this draft can be sent on the (archived) public mailing list www-style@w3.org (see instructions). W3C Members can also send comments directly to the CSS working group.

この草案へのコメント、意見は 一般公開しているメーリングリストwww-style@w3.org (instructions参照) (アーカイブ) に送ることができる。 W3CメンバーはまたCSSワーキンググループに直接コメントを送ることができる。

This is a working draft and may therefore be updated, replaced or rendered obsolete by other W3C documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". Its publication does not imply endorsement by the W3C membership or the CSS Working Group (members only).

この文書は草案であり、そのために更新されるかもしれないし、 いつでも他のW3C文書によって廃止、変更されるかもしれない。 W3C草案をリファレンスとしたり、草案であることを明記せずに引用することは不適当である。 また発表内容はW3Cメンバー、もしくはCSSワーキンググループによって保証されるわけではない。 (会員専用ページ)

Patent disclosures relevant to CSS may be found on the Working Group's public patent disclosure page.

CSSにとって適切な特許開示情報は、 ワーキンググループの特許開示ページにて参照できる。

To find the latest version of this working draft, please follow the "Latest version" link above, or visit the list of W3C Technical Reports.

この草案の最新版を参照する場合、 "最新の版"にリンクして欲しい。 もしくは、W3C 技術報告のリストに訪れて欲しい。

This document may be available in translations in the future. The English version of this specification is the only normative version.

この文書は将来、翻訳されて読むことができるかもしれない。 しかしこの仕様書の英語版のみが標準のものである。

勧告候補クリア基準

For this specification to exit the CR stage, the following conditions must be met:

この仕様書がCRステージをクリアするには、次の状態にならなくてはいけない:

1. There must be at least two interoperable implementations implementing all the features. For the purposes of this criterion, we define the following terms:

   feature

   a section, subsection, assertion, or other testable aspect of the specification.

   interoperable

   passing the respective test case(s) in the test suite, or, if the implementation is not a web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a UA is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publicly available for the purposes of peer review.

   implementation

   a user agent which:

   1. implements the feature.
   2. is available (i.e. publicly downloadable or available through some other public point of sale mechanism). This is the "show me" requirement.
   3. is shipping (i.e. development, private or unofficial versions are insufficient).
   4. is not experimental (i.e. is intended for a wide audience and could be used on a daily basis).

2. A minimum of six months of the CR period must have elapsed. This is to ensure that enough time is given for any remaining major errors to be caught.

3. Features will be dropped if two or more interoperable implementations are not found by the end of the CR period.

4. Features will also be dropped if sufficient and adequate tests (by judgment of the working group) have not been produced for those features by the end of the CR period.

目次

• この文書の状態
  • 勧告候補クリア基準
• 1. 依存するモジュール
• 2. 導入
  • 2.1. 要求一致
• 3. 用語
• 4. 疑似要素(Pseudo-elements)
  • 4.1. 文法
  • 4.2. 要素への内容挿入: '::before'、'::after'疑似要素
    • 4.2.1. ネストされた'::before'、'::after'疑似要素の挿入
    • 4.2.2. 複数の'::before'、'::after'疑似要素の挿入
  • 4.3. '::outside'疑似要素で要素をラッピング
    • 4.3.1. '::outside'と'::before'、'::after'の絡み
  • 4.4. '::alternate'で新しい内容をドキュメントツリーに挿入する
    • 4.4.1. '::alternate'と'::outside'、'::before'、'::after'の絡み
  • 4.5. ブロックマーカー: '::marker'疑似要素
  • 4.6. ラインマーカー: '::line-marker'疑似要素
• 5. ドキュメント内で内容を後ろへ移動する: 'move-to'プロパティ
• 6. 'display'プロパティ
• 7. 'quotes'プロパティによる 引用符の定義
  • 7.1. 'content'プロパティによる引用符の挿入
• 8. 自動カウンタと採番: 'counter-increment'、'counter-reset'プロパティ
  • 8.1. カウンタのネストと範囲
  • 8.2. カウンタの書式
  • 8.3. 'display: none'である要素のカウンタ
  • 8.4. 予約済みカウンタ名
• 9. 名前付き文字列(Named strings)
• 10. '@counter'と'@string'
  • 10.1. '@counter'
  • 10.2. '@string'
  • 10.3. カウンタかstring-setのどちらを使用するか決定する: 'page-policy'プロパティ
• 11. 'content'プロパティによる 内容の挿入・置換
• 12. 置換内容
  • 12.1. 'crop'プロパティ
  • 12.2. 内在寸法
• 13. 例
  • 13.1. 脚注(footnote)要素
  • 13.2. 脚注(footnote)属性
  • 13.3. 脚注のデザイン
  • 13.4. ひとつの要素に複数のスタイル
  • 13.5. 部分メモ(section notes)
  • 13.6. 上寄せ
• 14. Test suite
• 15. Profiles
• Acknowledgments
• References
  • Normative references
  • Other references
• Index
• Property index

1. 依存するモジュール

This CSS3 module depends on the following other CSS3 modules:

このCSS3モジュールは次のCSS3モジュールに依存する:

• CSS3 module: 文法 [CSS3SYN]
• CSS3 module: 値と単位 [CSS3VAL]
• CSS3 module: 選択子(セレクタ) [SELECT]
• CSS3 module: リスト [CSS3LIST]
• CSS3 module: ブロックボックスモデル [CSS3BOX]
• CSS3 module: インラインボックスモデル [CSS3LINE]
• CSS3 module: ページドメディア [CSS3PAGE]

2. 導入

In some cases, authors may want user agents to render content that does not come from the document tree. One familiar example of this is a numbered list; the author does not want to mark the numbers up explicitly, he or she wants the user agent to generate them automatically. Counters and markers are used to achieve these effects.

いくつかのケースにおいて、著者はユーザエージェントがドキュメントツリーに無い内容を表示して欲しいということがあるかもしれない。 よく知られた例としてひとつ、自動採番リストがある。 著者は明白に番号を記述したくない場合、著者はユーザエージェントが自動的にそれを生成することを期待する。 カウンタとマーカーを用いることでこれらの効果を実現する。

ol { counter-reset: item; }
li { display: list-item; counter-increment: item; }
li::marker { content: counter(item, decimal) '.'; }

A simpler way to write this is:

単純な書き方はこれである:

li { display: list-item; list-style: decimal; }

Similarly, authors may want the user agent to insert the word "Figure" before the caption of a figure, or "Chapter 7" on a line before the seventh chapter title.

似た例で、著者はユーザエージェントに図の標題の前に"図"という言葉を挿入してもらいたい場合や、 7つ目の章の題の前の行に"7章"という言葉を挿入してもらいたいこともあるだろう。

figure > caption::before { content: "図: "; }
chapter:nth-child(7) > title::before { content: "7章\A"; }

The last example could also be written in a more generic way using counters:

最後の例はカウンタを使った、より一般的な書き方もできる:

chapter { counter-increment: chapter; }
chapter > title::before { content: counter(chapter) "章\A"; }

Another common effect is replacing elements with images or other multimedia content. Since not all user agents support all multimedia formats, fallbacks may have to be provided.

他の一般的な効果として、要素が画像やその他のマルチメディアコンテンツによって置換されるものがある。 必ずしも全てのユーザエージェントが全てのマルチメディアフォーマットをサポートする訳ではないので、 代替内容を提供する必要があるだろう。

/* <logo>要素をUAがサポートしているフォーマットのサイトのロゴで置換する */
logo { content: url(logo.mov), url(logo.mng), url(logo.png), none; }

/* <figure>要素を参照している文書で置換する。
 * もしくはそれができないのであればalt属性の値、
 * alt属性が無ければその要素の内容で置換する。 */
figure[alt] { content: attr(href, url), attr(alt); }
figure:not([alt]) { content: attr(href, url), contents; }

Authors may also wish to move content to a later position in a document, for instance placing images at the bottom (or top) of the page.

著者はドキュメントの後方に内容を移動したいと思うかもしれない。 たとえばページの下部(もしくは上部)に画像をおくといったことだ。

img { move-to: page-top; } /* "page-top"に画像を移動する */
@page { padding-top: 10em; } /* ページの一番上部に余白を作る */
body:after { /* 各ページの状態にボックスを配置する */
  position: fixed; top: 0; left: 0; right: 0; height: 10em;
  content: pending(page-top); /* "page-top"に移動された画像を挿入する */
}

In some cases, content may be inserted, alternate content moved to a later place in the flow, and a list marker inserted next to this alternate content. For example, footnotes or endnotes.

代替内容をフローの後方に移動したり、 リストマーカーをこの代替内容の次に挿入したりと、 いくつかのケースにおいて、内容は挿入されるかもしれない。 次の例は脚注もしくは章末の注意書きの例である。

a[href]::after {
  counter-increment: footnote-number;
  content: counter(footnote-number, footnotes);
}
a[href]::after::alternate {
  display: list-item;
  content: attr(href);
  move-to: footnotes;
}
a[href]::after::alternate::marker {
  content: counter(footnote-number, footnotes);
}
@page {
  counter-reset: footnote-number;
  @footnote {
    content: pending(footnotes);
  }
}

Using initial values, the last example can also be written as:

初期値を使うなら、最後の例は次のようにも書ける:

a[href]::after { content: footnote; }
a[href]::after::alternate { content: attr(href); }

For simpler cases, e.g. where an element is simply to be used as an endnote directly, only a single declaration is required.

似た例として、例えばある要素が単純に、直接章末の注意書きとして使われるなら、 つぎの1行のみでよい。

p.note { content: endnote; }

The initial values of the other properties are set up so that the result is as expected.

他のプロパティの初期値は予想通りのものである。

Another effect commonly requested by authors is that of line numbering. This module introduces the '::line-marker' pseudo-element that is attached to the front of every line box, which can be used for this purpose.

その他に著者からよくある効果に行番号がある。 このモジュールで紹介する'::line-marker'疑似要素は、 このために各行ボックスの前に(内容を)付けてくれる。

pre { counter-reset: line; }
pre::line-marker { counter-increment: line; content: counter(line) "."; }

This pseudo-element can also be used to simulate the indentation style found in e-mail communication:

この疑似要素はeメールで見られるようなギザギザのデザインに似た効果にも使うことができる。

blockquote { margin: 0; padding: 0 0 0 2em; } 
blockquote > blockquote { margin-left: -1em; }
blockquote::line-marker { width: 2em; text-align: left; content: ">"; }

Generated content based on the cite and datetime attributes can create introductions or citations on the fly as well.

citeとdatetime属性を使った生成内容は、 同時に紹介または引用を生成することができる。

2.1. 要求一致

Finally, in this document, requirements are expressed using the key words "MUST", "MUST NOT", "REQUIRED", "SHALL" and "SHALL NOT". Recommendations are expressed using the key words "SHOULD", "SHOULD NOT" and "RECOMMENDED". "MAY" and "OPTIONAL" are used to indicate optional features or behavior. These keywords are used in accordance with [RFC2119]. For legibility these keywords are used in lowercase form.

最後に、この文書において、要求は"MUST"、"MUST NOT"、"REQUIRED"、"SHALL"、"SHALL NOT"というキーワードで表現している。 推薦は"SHOULD"、"SHOULD NOT"、"RECOMMENDED"で表現している。 "MAY"と"OPTIONAL"は選択が自由であることを示す。 これらのキーワードは[RFC2119]のものと同じように使っている。 ただし、可読性のためにこれらのキーワードは小文字で記述している。

3. 用語

This module introduces several pseudo-elements and allows them to nest in certain predefined ways. In order to explain the relationships between these nested pseudo-elements, three new terms have been coined.

このモジュールではいくつかの疑似要素を紹介しているが、それらは予め定義された方法でネストすることができる。 そのネストされた疑似要素の関係を説明するために3つの新しい用語を加えた。

優勢親要素(superior parent)

A pseudo-element's superior parent is the element or pseudo-element to which it is associated. e.g. the superior parent of the pseudo-element matched by '::before::after' is the pseudo-element matched by '::before', and that pseudo-element's superior parent is the element itself. The suporior parent of an '::outside(n)' pseudo-element is the '::outside(n-1)' pseudo-element. Note that an element never has a superior parent, and a pseudo-element always has exactly one.

疑似要素の優勢親要素は要素かそれに関連する疑似要素である。 例えば、'::before::after'にマッチする疑似要素の優勢親要素は'::before'にマッチする疑似要素で、 そしてその疑似要素の優勢親要素は要素自身である。 '::outside(n)'疑似要素の優勢親要素は'::outside(n-1)'疑似要素である。 要素は優勢親要素を持つことはないし、疑似要素は常に優勢親要素を持つということに注意。

優勢兄要素(superior siblings)

The '::before' or '::after' pseudo-elements that have lower numeric arguments. e.g. '::before(2)' is a superior sibling of '::before(5)'. Only '::before' and '::after' pseudo-elements with numeric arguments greater than 1 have superior siblings.

'::before'もしくは'::after'疑似要素でそれより小さい数値を持つものが優勢兄要素である。 例えば、'::before(2)'は'::before(5)'の優勢兄要素である。 ただし、優勢兄要素を持つのは1より大きい数値を持つ'::before'と'::after'疑似要素のみである。

優勢要素(superior)

Any element or pseudo-element that is either a superior parent or superior sibling.

優勢親要素か優勢兄要素のどちらかである要素もしくは疑似要素。

These terms are horrible, but they were the only ones I could think of that didn't confusingly clash with DOM terminology. Example of the horridness of the terms: the superior parent of an '::outside' pseudo-element is its rendering tree child, whose rendering hree sibling '::before' has the '::outside' pseudo-element as its superior parent.

これらの用語は酷いものだ、しかしこれらは私が考えた中でDOM用語と衝突しない唯一のものだった。 忌まわしい例: '::outside'疑似要素の優勢親要素は、レンダリングツリーの子要素であり、 そのレンダリングツリーでは兄弟要素の'::befoer'疑似要素はそれの優勢親要素として'::outside'疑似要素を持つ。

We need a term which means "element or pseudo-element".

"要素もしくは疑似要素"を指す用語が必要だ。

4. 疑似要素(Pseudo-elements)

At the heart of generated content lies pseudo-elements. Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements also provide style sheet designers a way to assign style to content that does not exist in the source document.

生成内容の肝は疑似要素である。 疑似要素は文書言語によって定義されたドキュメントツリーに抽象的なものをつくる。 その実体は文書言語はある要素の内容の最初の文字もしくは最初の行にアクセスするメカニズムを提案しない。 CSS疑似要素はスタイルシートデザイナにこれを参照できるようにするが、 それ以外の場合はこれにアクセスできない。 疑似要素は元文書に存在しない内容にスタイルを割り当てる方法を提供する。

4.1. 文法

Certain combinations of multiple pseudo-elements per selector are allowed. All pseudo-elements must appear in a single chain at the end of the selector, with no intervening combinators.

セレクタごとに複数の疑似要素の組み合わせることができる。 全ての疑似要素は間に結合子が入らないように、セレクタの末尾でひとつに繋がって出現しなくてはいけない。

The pseudo-element part of the selector consists of an optional set of "structural" pseudo-elements, optionally followed by a single formatting pseudo-element.

セレクタの疑似要素は"構造"疑似要素のオプションセットから成り、 任意にひとつに書式疑似要素が次に続く。

The structural pseudo-elements are alternating sets of an '::outside' pseudo-element and one or more '::before', '::after', or '::alternate' pseudo-elements. (So basically any number of '::outside', '::before', '::after', and '::alternate' pseudo-elements, so long as no two '::outside' pseudo-elements are adjacent, as that is meaningless.)

構造疑似要素はひとつの'::outside'疑似要素とひとつ以上の'::before'、'::after'、 '::alternate'疑似要素のセットである。 (だから基本的には、かなり多くの'::outside'、'::before'、'::after'、 '::alternate'疑似要素並ぶが、意味が無いので2つの'::outside'疑似要素は連続して並ばない。)

The formatting pseudo-elements are '::first-line', '::first-letter', '::marker', '::line-marker', and '::selection'. Only one of these may occur, and if present, it must be the last pseudo-element in the chain.

書式疑似要素は'::first-line'、'::first-letter'、'::marker'、'::line-marker'そして'::selection'である。 これらの一つだけがあるかもしれない。 もし存在するならそれは一連のつながりの最後の疑似要素ではなくてはならない。

The allowed order for pseudo-elements is formally described by the following pseudo-BNF grammar:

疑似要素の正式な出現可能順序は次の定義文の通りとする:

pseudo-elements := structural-pseudo-elements? formatting-pseudo-element?

structural-pseudo-elements :=
  ( '::outside'? [ '::before' | '::after' | '::alternate' ] )* '::outside'?

formatting-pseudo-element := 
  '::first-line' | '::first-letter' | '::marker' | '::line-marker' | '::selection'

The '::outside', '::before', and '::after' pseudo-elements have two forms, '::outside', '::before', and '::after' and '::outside(n)', '::before(n)', and '::after(n)', where n is an integer. If the parameter part is omitted then '1' is implied. For example, '::before(1)' is the same as '::before'.

'::outside'、'::before'そして'::after'疑似要素は2つの書式があり、 '::outside'、'::before'、'::after'もしくは、 '::outside(n)'、'::before(n)'、'::after(n)'である。 nは整数が入る。 もしこの引数が省略された場合は'1'があるものとする。 例えば'::before(1)'は'::before'と同じ意味になる。

For compatability with previous levels of CSS, the '::before', '::after', '::first-line' and '::first-letter' pseudo-elements do not require two colons. This does not apply to any other pseudo-element. Authors are encouraged to use the new two-colon forms.

以前のCSSとの互換性のために'::before'、'::after'、'::first-line'、 '::first-letter'疑似要素には2つのコロン(:)は必要ではない。 これは他の疑似要素には当てはまらない。 著者は新しい2コロンの書式を使うことが推奨される。

4.2. 要素への内容挿入: '::before'、'::after'疑似要素

The '::before' and '::after' pseudo-elements are used to insert content immediately before and immediately after the content of an element (or other pseudo-element). The 'content' propety is used to specify the content to insert.

'::before'、'::after'疑似要素はある要素(もしは他の疑似要素)の直前、 もしくは直後に内容を挿入する際に用いる。 そしてその内容は'content'プロパティによって指定される。

abbr { content: attr(title); }

P.note:before { content: "Note: " }

The formatting objects (e.g., boxes) generated by an element include generated content. So, for example, changing the above style sheet to:

整形オブジェクト(例えばボックス)は生成内容を含んでいるかのように生成する。 例えば、次のように上記のスタイルシートを変更してみると、

P.note:before { content: "Note: " }
P.note        { border: solid green }

...would cause a solid green border to be rendered around the entire paragraph, including the initial string.

この場合、緑の枠線は最初の内容を含む、段落全体を囲むように表示されるだろう。

Typically, the '::before' and '::after' pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached. In the general case, they inherit their properties from their superior parent.

基本的に、'::before'、'::after'疑似要素は継承可能なプロパティを ドキュメントツリーの親ノードにあたる要素から継承する。 一般的には、親要素のプロパティを継承することになる。 基本的に、'::before'、'::after'疑似要素は継承可能なプロパティを ドキュメントツリーにあるそれが付けられた要素から継承する。 一般的には、優勢親要素からそのプロパティを継承する。

For a '::before' or '::after' pseudo-element to be generated, all of the elements and pseudo-elements leading to it must be generated, and the pseudo-element must not have its 'content' property set to 'inhibit' or its 'display' property set to 'none'. Note that for '::before' and '::after' pseudo-elements, the initial value of 'content' computes to 'inhibit'.

'::before'や'::after'疑似要素が生成される場合、 それに至る全ての要素もしくは疑似要素は生成されなくてはいけない、 更にその疑似要素の'content'プロパティは'inhibit'以外で、 'display'プロパティは'none'以外でなくてはいけない。 '::before'、'::after'疑似要素の'content'プロパティの初期値は'inhibit'と算出されることに注意。

Using a '::before' pseudo-element in the context of the anonymous table elements works exactly as if an actualy element had been introduced. For example:

'::before'疑似要素を匿名のテーブル要素のコンテキストとして使用すると、 あたかも実際にその要素があったかのように表示される。

.example::before { content: "D" }

<table>
 <tr>
  <td>A</td> <td>B</td> <td>C</td>
 </tr>
 <tr class="example">
             <td>E</td> <td>F</td>
 </tr>
</table>

An anonymous table cell box is generated around the '::before' content in this case, resulting in a 3×2 table.

この例の場合、匿名テーブルセルボックスが'::before'疑似要素の内容の周囲に生成され、 3×2のテーブルになる。

4.2.1. ネストされた'::before'、'::after'疑似要素の挿入

The selector '::before::before' represents a pseudo-element contained at the start of a pseudo-element contained at the start of an element.

'::before::before'というセレクタは要素の最初に含まれた疑似要素の最初に含まれた疑似要素を表す。

For example, the following rules:

例えば次の例の場合、

div { content: 'A' }
div::before { content: 'B'; }
div::before::before { content: 'C'; }

...would result in the following rendering objects:

次のようにオブジェクトが表示されるだろう。

,-----------------------.
| ,---------.           |
| | ,---.   |           |
| | | C | B | A         |
| | `---'   |           |
| `---------'           |
`-----------------------'

4.2.2. 複数の'::before'、'::after'疑似要素の挿入

In contrast with the previous section, the selector '::before(2)' represents a pseudo-element before another, both of which are contained at the start of an element.

前セクションとは対照的に、'::before(2)'というセレクタは2つの疑似要素が共に要素の最初に含まれることを表す。

For example, the following rules:

例えば次の例の場合、

div { content: 'A' }
div::before { content: 'B'; }
div::before(2) { content: 'C'; }

...would result in the following rendering objects:

次のようにオブジェクトが表示されるだろう。

,-----------------------.
| ,---. ,---.           |
| | C | | B | A         |
| `---' `---'           |
`-----------------------'

The '::before' selector is exactly equivalent to '::before(1)'.

'::before'セレクタは'::before(1)'と同じ意味である。

A pseudo-element only exists if all the elements and pseudo-elements leading up to it exist. For instance, in the following example, only one pseudo-element is generated, the first one:

疑似要素はそれに至る全ての要素と疑似要素が存在している場合にのみ存在する。 例えば、次の例では最初の疑似要素のみが存在する。

div { content: 'A' }
div::before { content: 'B'; }
div::before(2) { content: inhibit; }
div::before(3) { content: 'C'; }

It would result in the following rendering objects:

これは次のように表示されるだろう。

,-----------------------.
| ,---.                 |
| | B | A               |
| `---'                 |
`-----------------------'

4.3. '::outside'疑似要素で要素をラッピング

An '::outside' pseudo-element is one that is generated immediately outside the pseudo-element's superior.

'::outside'疑似要素は優勢要素の外側に生成される。

When given a parameter, '::outside(n)' represents an nth pseudo-element generated immediately around the n-1th pseudo-element.

'::outside(n)'のようにパラメータが与えられている場合、 n-1番目の疑似要素の周りに生成されたn番目の疑似要素を表す。

For example, the following rules:

例えば次の例の場合、

div { display: block; border: dashed; }
div::outside { display: block; border: dashed; }
div::outside(2) { display: block; border: dashed; }

...would result in the following rendering objects:

次のようにオブジェクトが表示されるだろう。

,-----------------------.   <-- ::outside(2)の枠線
| ,-------------------. |   <-- ::outsideの枠線
| | ,---------------. | |   <-- DIVの枠線
| | | DIV           | | |
| | `---------------' | |
| `-------------------' |
`-----------------------'

A similar result would be achieved by using three nested DIV elements (except of course that would require changing the document source, which is not always possible).

似た結果を得られるのは、3つのネストされたDIV要素を用いた場合だろう (もちろんドキュメントソースを変更する必要があり、それがかなわない場合の除く)。

One difference between using elements and using pseudo-elements is that the pseudo-elements inherit from the elements (or pseudo-elements) that generate them, not from those they are contained within.

要素を使った場合と、疑似要素を使った場合にはひとつ違いがある。 それは疑似要素は要素(もしくは疑似要素)から継承して生成されるが、 (要素の場合は)その中に含まれる要素から(の継承)ではない。

For example, if we assume the following rules:

例えば、もし次のようなスタイル指定の場合:

   div { display: block; border: green solid; }
   div::outside(1) { display: block; border: inherit; }
   div::outside(2) { display: block; border: red solid; }

...then the outermost border (from the '::outside(2)') will be red, but the middle border (from '::outside(1)') will be the same colour as the inner most border (from the element itself), namely green.

最外周の枠線('::outside(2)'の枠線)は赤になるだろう。 しかし、中央の枠線('::outside(1)')の枠線は最も内側にある(DIV要素自身の)枠線と同じ色、 つまり緑になるだろう。

For an '::outside' pseudo-element to be generated, all of the elements and pseudo-elements leading to it must be generated, and the pseudo-element itself must not have its 'display' property set to 'none'. Note that the initial value of 'display' computes to 'none' on '::outside' pseudo-elements.

'::outside'疑似要素が生成されるためには、それに至る全ての要素と疑似要素が生成されていなくてはいけないし、 疑似要素自身は'display'プロパティに'none'が設定されていてはいけない。 '::outside'疑似要素における'display'プロパティの初期値は'none'であることに注意。

It is possible to float an element and then give it an '::outside' pseudo-element, in which case the pseudo-element is in-flow, not floated.

'::outside'疑似要素に指定することによって要素を浮動させることができるが、 次のケースの場合、疑似要素はそのフロー内にあり、浮動しない。

For example:

例:

  p { float: right; color: green; }
  p::outside { display: inline; border: solid; }

...results in an empty inline element with a solid green border being placed in the flow at the point where the float is taken out of flow.

この例は、緑の枠線を持つ空のインライン要素はそのフロー内に配置されるものの、 浮動体はフロー外に配置される。

When an element is moved with the 'move-to' property, however, '::outside' pseudo-elements are moved too.

しかし、'move-to'プロパティで要素が移動する場合、 '::outside'疑似要素も共に移動する。

The 'content' property does not apply to '::outside' pseudo-elements.

'content'プロパティは'::outside'疑似要素には適用されない。

4.3.1. '::outside'と'::before'、'::after'の絡み

An '::outside' pseudo-element can have any number of '::before' or '::after' pseudo-elements of its own. They are inserted before and after the '::outside' pseudo-element's contents (the element or pseudo-element that generated the '::outside' pseudo-element).

'::outside'疑似要素は'::before'や'::after'疑似要素をいくつでも持つことができる。 それらは'::outside'疑似要素の内容(その'::outside'疑似要素を生成した要素もしくは疑似要素)の前後に挿入される。

For example, the following rules:

その例として、次のようなスタイル指定の場合:

span                     { content: "span"; }
span::before             { content: "B";    }
span::outside(1)         { display: inline; }
span::outside(1)::before { content: "A";    }
span::outside(2)         { display: inline; }
span::outside(2)::after  { content: "C";    }

...would result in the following rendering objects (including construction lines for clarity):

この場合、次のように表示されるだろう(わかりやすくするために枠線を付けている):

,--------------------------------.   <-- ::outside(2)の枠線
| ,----------------------.       |   <-- ::outside(1)の枠線
| | ,---. ,-+---+------. | ,---. |   <-- spanの枠線, ::beforeと
| | | A | | | B | span | | | C | |          ::afterのボックス
| | `---' `-+---+------' | `---' |
| `----------------------'       |
`--------------------------------'

This can be used to leave markers in the flow, as in:

次の例はそのフロー内にマーカーを残すことができる:

  note { float: right; }
  note::outside { display: inline; }
  note::outside::before { content: " (サイドバー参照) "; }

Care must be taken when styling cases like this. If the note element was given a smaller 'font-size' or a different 'color', then, by default, the generated in-flow text would end up inheriting it.

このようなデザインにする場合は注意が必要だ。 もし、note要素が小さい'font-size'か異なった'color'を指定した場合、 生成されるテキストは結局それを継承してしまうからだ。

4.4. '::alternate'で新しい内容をドキュメントツリーに挿入する

This pseudo-element is created by setting its 'move-to' property to an identifier. It is rendered at the next occurrence of 'pending()' in a 'content' property.

この疑似要素は'move-to'プロパティは'move-to'プロパティで識別子を設定することによって生成される。 'content'プロパティに'pending()'があることによって表示される。

In other respects it is just like a normal pseudo-element.

他の普通の疑似要素とは違った点がある。

Note that '::alternate' pseudo-elements inherit from their associated pseudo-element or element, not from the element in which they are inserted. (The same applies to any content moved using 'move-to'). This is discussed in the section on the 'pending()' value

'::alternate'疑似要素は関連する要素または疑似要素から継承され、挿入される場所で継承するのではない (同じことは'move-to'によって移動された内容についても言える)。 これは'pending()'値のセクションに記載している。

For an '::alternate' pseudo-element to be generated, all of the elements and pseudo-elements leading to it must be generated, and the pseudo-element must not have its 'display' property set to 'none', its 'content' property set to 'inhibit', or its 'move-to' property set to 'here'. Note that on '::alternate' pseudo-elements the initial value of 'move-to' is 'here' and the initial value of 'content' is 'inhibit'.

'::alternate'疑似要素が生成されるには、そこに至る全ての要素、疑似要素が生成されていなくてはならず、 疑似要素の'display'プロパティが'none'であってはならないし、 'content'プロパティが'inhibit'、もしくは'move-to'プロパティが'here'であってもならない。 '::alternate'疑似要素の'move-to'プロパティの初期値は'here'、 'content'プロパティの初期値は'inhibit'であることに注意。

4.4.1. '::alternate'と'::outside'、'::before'、'::after'の絡み

An '::alternate' pseudo-element can have any number of '::outside', '::before', or '::after' pseudo-elements of its own, and each of these four structural pseudo elements can have an '::alternate' pseudo-element of its own.

'::alternate'疑似要素は'::outside'、'::before'、'::after'疑似要素を持つことができる。 そして、4つの疑似要素はひとつの'::alternate'疑似要素を持つことができる。

For example, the following rules:

その例として、次の場合:

span                     { content: "span"; color: green; }
span::alternate          { content: "alternate1"; move-to: example1; }
span::alternate::before  { content: "before1"; }
span::after              { content: "after1" pending(example1); color: navy; }
span::after::alternate   { content: "alternate2"; move-to: example2; }
span::after(2)           { content: "after2" pending(example2); color: purple; }

...would result in the following rendering objects (including construction lines for clarity):

これの表示結果は次のようになる(わかりやすくするために枠線を付けている):

,----------------------------------------------------------------------.
|      ,-----------------------------------.                           |
|      |        ,------------------------. | ,-----------------------. |
|      |        | ,---------.            | | |        ,------------, | |
| span | after1 | | before1 | alternate1 | | | after2 | alternate2 | | |
|      |        | `---------'            | | |        `------------' | |
|      |        `------------------------' | '-----------------------' |
|      `-----------------------------------'                           |
`----------------------------------------------------------------------'

4.5. ブロックマーカー: '::marker'疑似要素

For a '::marker' pseudo-element to be generated, its superior parent must have a computed 'display' value of 'list-item'.

'::marker'疑似要素は優勢親要素の'display'プロパティの値が'list-item'の場合にだけ生成される。

For further details on the rendering model for list markers, see the CSS3 Lists module.

リストマーカーのレンダリングモデルについてのそれ以上の詳細はCSS3リストモジュールを参照。

4.6. ラインマーカー: '::line-marker'疑似要素

The '::line-marker' pseudo-element is positioned in exactly the same way as the '::marker' pseudo-element, but appears on every line, not just the first.

'::line-marker'疑似要素は'::marker'疑似要素と同じ方法で配置される。 しかし、全ての行で出現し、最初の行だけではない。

Line boxes are responsible for generating '::line-marker' pseudo-elements. For each line, one such marker is created for every block ancestor in the current formatting context. (Formatting contexts are created by the root element, floats, positioned content, cells, and inline-blocks. See the CSS3 Box Model module for more information. [CSS3BOX]) In addition, the '::line-marker' pseudo-element itself must have a 'content' property that has a computed value other than 'none' or 'inhibit'.

行ボックスが'::line-marker'疑似要素を生成しなくてはいけない。 それぞれの行のために、ひとつのマーカーが現在のフォーマッティングコンテキストで各ブロックの先祖として生成される。 (フォーマッティングコンテキストはルート要素、浮動体、配置、セル、インラインブロックによって生成される。 詳細はCSS3ボックスモデルモジュールを参照。[CSS3BOX]) 更に、'::line-marker'疑似要素自身'content'プロパティの算出値が'none'と'inhibit'以外の値を持たなくてはいけない。

5. ドキュメント内で内容を後ろへ移動する: 'move-to'プロパティ

The 'move-to' property causes the element or pseudo-element to be removed from the flow and reinserted at a later point in the document. The content is reinserted using the 'pending()' value of the 'content' property.

'move-to'プロパティは要素または疑似要素をフローから取り除き、 文書の末尾に挿入する。挿入された内容は'content'プロパティの'pending()'の値として用いられる。

This property applies to all elements as well as the '::before', '::after', and '::alternate' pseudo-elements. The '::alternate' pseudo-element in fact exists exclusively for the purpose of being moved by this property, e.g. in the creation of footnotes.

このプロパティは全ての要素と'::before'、'::after'、'::alternate'疑似要素に適用される。 '::alternate'疑似要素はこのプロパティで移動される目的のために存在する。 例えば、脚注を生成するためだ。

normal

For '::alternate' pseudo-elements, if the superior parent uses the 'footnote' counter in its 'content' property then the computed value of 'move-to' is 'footnotes'.

'::alternate'疑似要素に対する場合で、 優勢親要素が'footnote'カウンタを'content'プロパティで使っているなら、算出値を'footnotes'とする。

For '::alternate' pseudo-elements, if the superior parent uses the 'endnote' counter in its 'content' property then the computed value of 'move-to' is 'endnotes'.

'::alternate'疑似要素に対する場合で、 優勢親要素が'endnote'カウンタを'content'プロパティで使っているなら、算出値を'endnotes'とする。

For '::alternate' pseudo-elements, if the superior parent uses the 'section-note' counter in its 'content' property then the computed value of 'move-to' is 'section-notes'.

'::alternate'疑似要素に対する場合で、 優勢親要素が'section-note'カウンタを'content'プロパティで使っているなら、算出値を'section-notes'とする。

Otherwise the computed value of the move-to property is 'here'.

それ以外の場合、算出値は'here'とする。

here

The element or pseudo-element is not moved. This value inhibits the creation of '::alternate' pseudo-elements and any pseudo-elements that have such a pseudo-element as a superior.

要素または疑似要素は移動しない。 この値は'::alternate'疑似要素とこれを優勢要素とする疑似要素の生成を抑制する。

<identifier>

The element is not displayed at the current location, but at the next occurrence of 'pending(<identifier>)' (where the identifiers match), with all other elements moved to that point, in document order. If at the end af the document (after the '::after' pseudo-elements of the root element) there are outstanding elements, then they are all inserted in document order at that point.

要素はその場に表示されないが、'pending(<identifier>)'の次に(識別子が一致する場合)、 他の全ての移動された要素と共に、文書内での順番通りで表示される。 もし文書の終端(ルート要素の'::after'疑似要素の後)まで出現しなかった場合、 そこに文書内での順番通りで挿入される。

Note that elements and pseudo-elements that have been moved using 'move-to' still inherit from their associated pseudo-element or element, and not from the element in which they are inserted. This is discussed in the section on the 'pending()'. value

'move-to'を使って移動された要素や疑似要素は関連する疑似要素や要素から継承し、 それが挿入された要素から継承するわけではないことに注意。 このことは'pending()'セクションにも書いている。

6. 'display'プロパティ

Note: all values apply to the four pseudo-elements listed. Thus you can create entire tables, insert rubies, or generate other complex layouts using only generated content. This differs from CSS2 which only allowed a limited subset of values to apply to each pseudo-element.

メモ: 全ての値がリストアップされた4つの疑似要素に適用される。 従って、全体のテーブルを作って、ルビを挿入して、 あるいは単に生成された内容を利用した他の複雑なレイアウトを作ることができる。 これは限定された値しか疑似要素に適用できなかったCSS2との違いだ。

normal

For elements, '::before', and '::after', computes to 'inline'.

要素、'::before'、'::after'の場合、算出値は'inline'になる。

For '::alternate': if the superior parent's 'content' property uses the 'footnote', 'endnote', or 'section-note' property then it computes to 'list-item', otherwise it computes to 'block'. Note that if the 'move-to' property doesn't compute to an identifier then the '::alternate' pseudo-element isn't generated in the first place and therefore the value of 'display' is not relevant. In those cases, 'normal' still computes as described above but the result does not affect layout.

'::alternate'の場合、もし優勢親要素が'content'プロパティで'footnote'、 'endnote'、'section-note'を使用している場合、算出値は'list-item'に、 それ以外の場合は'block'になる。 もし'move-to'プロパティの算出値が識別子ではない場合、'::alternate'疑似要素は元の場所に生成されないので、 'display'プロパティの値は適切なものではないことに注意。 そのような場合に'normal'ならば上で述べたようにレイアウトに影響しない。

For '::outside', computes to 'none'. This prevents the generation of the pseudo-element, but does not stop the pseudo-element's superior parent from being generated (as it would if the '::outside' pseudo-element was replaced by a real element in an attempt to produce the same layout).

'::outside'の場合、算出値は'none'になる。 これは疑似要素の生成を妨げるが、疑似要素の優勢親要素の生成は妨げない ('::outside'疑似要素の代わりに実際に要素を用いて同じレイアウトを試みるとそうなるだろう)。

none

On elements, this inhibits the element, including any children and any pseudo-elements which have this element as a superior parent, from being rendered, anywhere.

要素の場合、その要素と子孫要素、それらを優勢親要素とする疑似要素も含めて生成を抑制する。

On pseudo-elements, this inhibits the creation of the element and furthermore prevents the creation of any pseudo-elements which have this pseudo-element as a superior.

疑似要素の場合、その疑似要素とそれを優勢要素とする疑似要素の生成を抑制する。

list-item

To declare a list item, the 'display' property should be set to 'list-item'. This, in addition to generating a '::marker' pseudo-element and enabling the properties described in the Lists module, causes that element to increment the list item counter 'list-item'. (This does not affect the specified or computed values of the counter properties.)

リスト項目を宣言するために、 'display'プロパティ値を'list-item'にセットするべきだ。 これにより、'::marker'疑似要素が生成され、リストモジュールで述べられた機能が有効になり、 その要素によってリストアイテムのカウンタ'list-item'がインクリメントされる。 (これはカウンタプロパティの指定値、あるいは計算値に影響するわけではない。)

The 'list-item' counter is a real counter, and can be directly affected using the 'counter-increment' and 'counter-reset' properties. It can also be used in the 'counter()' and 'counters()' function forms.

'list-item'カウンタは実在するカウンタで、 'counter-increment'、 'counter-reset'プロパティの影響を受ける。 また、'counter()'や'counters()'関数でも利用できる。

The CSS3 box module may define other 'display' values which generate a list marker. These should also affect the 'list-item' counter.

CSS3ボックスモジュールは他の'display'値でリストマーカーを生成するかもしれない。 それらは'list-item'カウンタに影響するべきである。

Note that the new list marker model makes the 'marker' display type redundant. That display type is therefore obsolete in the CSS3 Lists model.

新たらしいリストマーカーモデルで'marker'というdisplay値は必要なくなった。 そのためこのdisplay値をCSS3リストモデルでは廃止としたことに注意。

Note that while this property doesn't apply to '::marker' pseudo-elements, they only get generated if thir superior parent has a computed 'display' value of 'list-item', and they are always rendered as if they had an 'inline-block' display type.

このプロパティ値は'::marker'疑似要素に適用されず、 それらは優勢親要素の'display'の算出値が'list-item'の場合にのみ生成され、 'inline-block'をdisplay値に持つかのように表示される。

Similarly, while this property applies to '::before', '::after', '::alternate', '::outside' those pseudo-elements only get generated if they have no superiors with computed values of 'display' that are 'none' or superiors with computed values of 'content' that are 'inhibit'.

これは、'::before'、'::after'、'::alternate'、'::outside'疑似要素が 'display'算出値が'none'や、'content'算出値が'inhibit'の優勢要素ではない場合にのみ生成されることに似ている。

7. 'quotes'プロパティによる 引用符の定義

This property specifies quotation marks for any number of embedded quotations. Values have the following meanings:

このプロパティはいくつかにネストした引用の引用符を定義する。 値は次のような意味を持つ:

none

The 'open-quote' and 'close-quote' values of the 'content' property produce no quotations marks, as if they were 'no-open-quote' and 'no-close-quote' respectively.

'content'プロパティの'open-quote'と'close-quote'値は それぞれ'no-open-quote'、'no-close-quote'と同じように引用符を生成しない。

[ <string> <string> ]+

Values for the 'open-quote' and 'close-quote' values of the 'content' property are taken from this list of pairs of quotation marks (opening and closing). The first (leftmost) pair represents the outermost level of quotation, the second pair the first level of embedding, etc. The user agent must apply the appropriate pair of quotation marks according to the level of embedding.

'content'プロパティの'open-quote'と'close-quote'の値はこの引用符の対のリストである(開始、終了の順)。 最初の(一番左の)ペアは引用の一番外側のレベルで用いられ、 2つめのペアはネストされた最初のレベルで用いられる。 ユーザエージェントはネストレベルに応じた引用符のペアを適用していかなくてはいけない。

/* 2つの言語で2つのレベルの引用符を定義する */
:lang(en) > q { quotes: '"' '"' "'" "'" }
:lang(no) > q { quotes: "+" ";" "<" ">" }

/* Q要素の前後に引用符を挿入する */
q::before { content: open-quote }
q::after  { content: close-quote }

<HTML lang="en">
  <HEAD>
    <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Quote me!</Q>
  </BODY>
</HTML>

"Quote me!"

<HTML lang="no">
  <HEAD>
    <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
  </BODY>
</HTML>

+Trøndere gråter når <Vinsjan på kaia> blir deklamert.;

7.1. 'content'プロパティによる引用符の挿入

Quotation marks are inserted in appropriate places in a document with the 'open-quote' and 'close-quote' values of the 'content' property. Each occurrence of 'open-quote' or 'close-quote' is replaced by one of the strings from the value of 'quotes', based on the depth of nesting.

引用符は'content'プロパティにの'open-quote'と'close-quote'値によって文書の適切な場所へ挿入することができる。 'open-quote'か'close-quote'があるとネストレベルに応じて'quotes'の値の中からひとつの文字列を取り出して挿入する。

'Open-quote' refers to the first of a pair of quotes, 'close-quote' refers to the second. Which pair of quotes is used depends on the nesting level of quotes: the number of occurrences of 'open-quote' in all generated text before the current occurrence, minus the number of occurrences of 'close-quote'. If the depth is 0, the first pair is used, if the depth is 1, the second pair is used, etc. If the depth is greater than the number of pairs, the last pair is repeated.

'open-quote'は引用符のペアの1つ目を参照し、 'close-quote'は引用符のペアの2つ目を参照する。 どの引用符のペアが使われるかは引用のネストレベルに依存する: 現在位置より手前で'open-quote'によってテキストが生成された回数から、 'close-quote'の回数を引いたもの。 もし引用レベルが0なら最初のペアが使われ、引用レベルが1なら2番目のペアが使われる。 もし、引用レベルがペアの数を超えた場合は最後のペアを繰り返し使う。

Note that this quoting depth is independent of the nesting of the source document or the formatting structure.

引用符のネストレベルはformatting structureか文書ソースによって独立していることに注意。

Some typographic styles require open quotation marks to be repeated before every paragraph of a quote spanning several paragraphs, but only the last paragraph ends with a closing quotation mark. In CSS, this can be achieved by inserting "phantom" closing quotes. The keyword 'no-close-quote' decrements the quoting level, but does not insert a quotation mark.

印刷時のスタイルで開始引用符はいくつかの段落にまたがって各段落ごとに付けるものの、 最後の段落のみに終了引用符を付けるものがある。 CSSでは"見えない"終了引用符を挿入することで実現できる。 'no-close-quote'キーワードは引用レベルをデクリメントするが、引用符は挿入しない。

BLOCKQUOTE P:before     { content: open-quote }
BLOCKQUOTE P:after      { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }

BLOCKQUOTE P:after            { content: no-close-quote }
BLOCKQUOTE P:last-child:after { content: close-quote }

For symmetry, there is also a 'no-open-quote' keyword, which inserts nothing, but increments the quotation depth by one.

反対に、'no-open-quote'キーワードもあり、 これは引用符を挿入せずに引用レベルをインクリメントする。

:lang(fr) > * { quotes: "+" ";" "\2039" "\203A" }
:lang(en) > * { quotes: "\201C" "\201D" "\2018" "\2019" }

:lang(fr) > * { quotes: "+" ";" "‹" "›" }
:lang(en) > * { quotes: "“" "”" "‘" "’" }

8. 自動カウンタと採番: 'counter-increment'、'counter-reset'プロパティ

Automatic numbering in CSS2 is controlled with two properties, 'counter-increment' and 'counter-reset'. The counters defined by these properties are used with the 'counter()' and 'counters()' functions of the the 'content' property.

CSS2の自動採番は'counter-increment'と'counter-reset'の2つのプロパティで操作される。 これらのプロパティで定義されたcountersは'content'プロパティの 'counter()'と'counters()'関数で使える。

The 'counter-increment' property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default increment is 1. Zero and negative integers are allowed.

'counter-increment'プロパティはひとつ以上のカウンタ名(識別子)と、 オプションとしてそれぞれに整数をつけることができる。 整数はその要素が出現する度にいくつインクリメントするのかを指定できる。 そのデフォルト値は1。 ゼロやマイナス値も許可されている。

The 'counter-reset' property also contains a list of one or more names of counters, each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0.

'counter-reset'プロパティもまたひとつ以上のカウンタ名のリストを持ち、 オプションとしてそれぞれに整数を付けることができる。 整数はその要素の出現によってそのカウンタにセットされる値である。 デフォルト値は0。

If 'counter-increment' refers to a counter that is not in the scope (see below) of any 'counter-reset', the counter is assumed to have been reset to 0 by the root element.

もし'counter-increment'がどの'counter-reset'の範囲(後述)にも含まれていない場合、 そのカウンタはルート要素で0にリセットされているものとする。

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

If an element or pseudo-element resets or increments a counter and also uses it (in its 'content' property), the counter is used after being reset or incremented.

もし要素か疑似要素がカウンタをリセットもしくはインクリメントし、 しかもそれを('content'プロパティで)使っている場合、 そのカウンタは使用された後でリセット、もしくはインクリメントされる。

If an element or pseudo-element both resets and increments a counter, the counter is reset first and then incremented.

もしある要素か疑似要素でカウンタをリセット、インクリメント同時にする場合、 そのカウンタはリセットしてからインクリメントする。

The 'counter-reset' property follows the cascading rules. Thus, due to cascading, the following style sheet:

'counter-reset'プロパティはカスケード規則に従う。 つまり次のスタイルシートでは:

H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

will only reset 'imagenum'. To reset both counters, they have to be specified together:

'imagenum'だけがリセットされる。 両方のカウンタをリセットするなら、これらが同時に指定されていなくてはいけない:

H1 { counter-reset: section -1 imagenum 99 }

8.1. カウンタのネストと範囲

Counters are "self-nesting", in the sense that re-using a counter in a child element automatically creates a new instance of the counter. This is important for situations like lists in HTML, where elements can be nested inside themselves to arbitrary depth. It would be impossible to define uniquely named counters for each level.

カウンタは"自身を入れ子可能"であり、 子要素がカウンタを再び必要とする場合は子要素が自動的に新しいカウンタのインスタンスを生成する。 これはHTMLのリストのように自身の内部で何重にもネストできる場合には重要な考え方である。 それぞれのカウンタに対してユニークな名前を定義することは難しいからである。

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

The self-nesting is based on the principle that every element or pseudo-element that has a 'counter-reset' for a counter X, creates a fresh counter X, the scope of which is the element or pseudo-element, its following siblings, and all the descendants of the element or pseudo-element and its following siblings.

カウンタXに対する'counter-reset'を持つ要素または疑似要素は自身を入れ子可能であるという原則に基づくと、 それは新しいカウンタXを生成し、その範囲はその要素または疑似要素、 それらの弟要素、それら全ての子孫の要素、疑似要素と弟要素になる。

In the example above, an OL will create a counter, and all children of the OL will refer to that counter.

上記の例では、OLがカウンタを生成し、その全ての子要素はそのカウンタを使用する。

<OL>               <!-- (set item[0] to 0          -->
  <LI>item         <!--  increment item[0] (= 1)   -->
  <LI>item         <!--  increment item[0] (= 2)   -->
    <OL>           <!--  (set item[1] to 0         -->
      <LI>item     <!--   increment item[1] (= 1)  -->
      <LI>item     <!--   increment item[1] (= 2)  -->
      <LI>item     <!--   increment item[1] (= 3)  -->
        <OL>       <!--   (set item[2] to 0        -->
          <LI>item <!--    increment item[2] (= 1) -->
        </OL>      <!--   )                        -->
        <OL>       <!--   (set item[3] to 0        -->
          <LI>     <!--    increment item[3] (= 1) -->
        </OL>      <!--   )                        -->
      <LI>item     <!--  increment item[0] (= 3)   -->
  <LI>item         <!--  increment item[0] (= 4)   -->
</OL>              <!-- )                          -->
<OL>               <!-- (reset item[4] to 0        -->
  <LI>item         <!--  increment item[4] (= 1)   -->
  <LI>item         <!--  increment item[4] (= 2)   -->
</OL>              <!-- )                          -->

The 'counters()' function generates a string composed of the values of all counters with the same name, separated by a given string.

'counters()'関数は与えられた文字列を区切りとして、同名の全てのカウンタの値からなる文字列を生成する。

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }

8.2. カウンタの書式

By default, counters are formatted with decimal numbers, but all the styles available for the 'list-style-type' property are also available for counters. The notation is:

デフォルトでは、カウンタは10進数である。 しかし、'list-style-type'プロパティにある全ての書式はカウンタでもまた利用可能だ。 次のように記述すると:

counter(name)

for the default style, or:

デフォルトのスタイルだが、次のように記述すると:

counter(name, <'list-style-type'>)

All the styles are allowed, including the glyph types such as 'disc', 'circle', and 'square'. The 'none' value is also allowed, and causes the counter to generate nothing.

全てのスタイルが利用でき、そこには'square'や'circle'、'disc'のようなグリフも含まれる。 'none'値もまた利用でき、その場合カウンタは何も生成しない。

H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) } /* 何も挿入しない */

8.3. 'display: none'である要素のカウンタ

An element that is not displayed ('display' set to 'none') cannot increment or reset a counter.

表示されない('display'に'none'が設定されている)要素はカウンタをインクリメントやリセットすることができない。

H2.secret {counter-increment: count2; display: none}

Elements with 'visibility' set to 'hidden', on the other hand, do increment counters.

'visibility'に'hidden'が設定されている要素、 この場合ならばカウンタをインクリメントする。

8.4. 予約済みカウンタ名

The 'list-item', 'section-note', 'endnote', and 'footnote' counters are not reserved. They are ordinary counters that happen to be incremented and used by other properties as well as the counter properties.

'list-item'、'section-note'、'endnote'そして'footnote'カウンタは予約済みではない。 これらは普通のカウンタで、インクリメントもされるし、 カウンタのプロパティと同様に他のプロパティにも使用される。

The 'total-pages' counter, however, is reserved. Resetting or increasing this counter has no effect. See the Paged Media module [CSS3PAGE] for more information on this counter.

'total-pages'カウンタ、これは予約済みである。 リセットやインクリメントをこのカウンタに行おうとしてもそれはできない。 このカウンタについての詳細はページドメディアモジュールを参照すること[CSS3PAGE]。

9. 名前付き文字列(Named strings)

CSS3 introduces 'named strings', which are the textual equivalent of counters and which have a distinct namespace from counters. Named strings follow the same nesting rules as counters. The 'string-set' property accepts values similar to the 'content' property, including the extraction of the current value of counters.

CSS3の'名前付き文字列'について紹介する。 これはカウンタと同じようなものだが、カウンタとは異なる名前空間を持っている。 また名前付き文字列はカウンタのネスト仕様と同じである。 'string-set'プロパティのとる値は'content'プロパティのそれと似ていて、 カウンタの現在の値の取得もそれに含まれる。

Named strings are a convenient way to pull metadata out of the document for insertion into headers and footers. In HTML, for example, META elements contained in the document HEAD can set the value of named strings. In conjunction with attribute selectors, this can be a powerful mechanism:

名前付き文字列はヘッダやフッタにその文書のメタデータを挿入する場合に便利なものだ。 HTMLで例に挙げると、文書のHEADに含まれているMETA要素は名前付き文字列の値に設定することができる。 属性セレクタと組み合わせることによって、非常に強力なものとなる:

META[author] { string-set: author attr(author); }
HEAD > TITLE { string-set: title contents; }
@page:left {
  @top {
    text-align: left;
    vertical-align: middle;
    content: string(title);
  }
}
@page:right {
  @top {
    text-align: right;
    vertical-align: middle;
    content: string(author);
  }
}

This section is missing a property definition.

このセクションにはプロパティ定義が無い。

This section is missing a definition of the string() function.

このセクションにはstring()関数の定義が無い。

H1 { string-set: chapter contents; }

10. '@counter'と'@string'

It's possible that the page in question itself contains multiple elements that set counters or increment strings. Should the formatter use the value at the start of the page or at the end of the page? To address this question, authors may use @counter or @string declaration blocks and the 'page-policy' property, which applies only to strings and counters.

問題のページがそれ自身でカウンタあるいはインクリメント文字列を設定した多数の要素を含むことができる。 フォーマッタはページの最初、もしくはページの最後で値を使うべきか? この問題に対応するために著者は@counterか@string定義ブロックと、 stringsとcountersにのみ適用できる'page-policy'プロパティを使うかもしれない。

What about counter-policy and string-policy

counter-policyとstring-policyというのはどうだろうか

10.1. '@counter'

This 'list-style-type' property can be used with an '@counter' rule to change the counter's default counter style. This is typicially used to change, for example, the footnote style:

'list-style-type'プロパティは'@counter'と共に使われることによって、 カウンタのデフォルトの書式の規則を変更できる。 これは一般的に脚注の書式を変更するのに使われる:

@counter footnote {
   list-style-type: super-decimal;
}

The default list style types for counters is 'decimal' except for the 'footnote' counter which defaults to 'footnotes'.

デフォルトのリストのカウンタの書式は'footnotes'の'footnote'カウンタを除けば'decimal'である。

Syntax still to come.

文法は後日。

10.2. '@string'

Syntax still to come.

文法は後日。

10.3. カウンタかstring-setのどちらを使用するか決定する: 'page-policy'プロパティ

'page-policy' determines which page-based occurance of a given element is applied to a counter or string value:

start

Takes the value of the counter or string at the beginning of the page (before applying style to the elements of the page, but after applying it to the @page context itself).

first

Takes the value after the first state change in the counter or string during processing of the page.

last

Takes the value following the final state change on the page.

@string chapter { page-policy: last; }
@page { 
  size: 21.0cm 29.7cm; /* A4 */
  @top { 
    text-align: right;
    vertical-align: center;
    content: string (chapter);
  }
}

To use the chapter name as it was when the processing of the page started, the designer would specify a 'page-policy' of 'start' instead of 'last'. Designers can also use the value of a string or counter after its first state change on a page by specifying 'first'.

11. 'content'プロパティによる 内容の挿入・置換

The 'content' property dictates what is rendered inside the element or pseudo-element. It takes a comma separated list of URIs followed by a space separated list of tokens. If there are multiple URIs provided, then each is tried in turn until a value which is both available and supported is found. The last value is used as a fallback if the others fail.

'content'プロパティは要素もしくは疑似要素の内容に表示すべきかを指定する。 その値はカンマ区切りのURIのリスト、それに続けてスペース区切りのトークンのリストという形をとる。 もし複数のURIがある場合、利用可能で対応しているものが見つかるまで表示を試みる。 もし全ての表示に失敗した場合は最後の値を表示する。

<uri>

If the value is the only value in the list, as the two URIs in the example below are:

もし2つのURIのリストのみを値に持つ場合、次のようになる:

h1 { content: url(header/mng), url(header/png); }

...then if the URI is available and the format is supported, then the element or pseudo-element becomes a replaced element, otherwise, the next item in the comma separated list is used, if any. In the example above, if 'header/mng' wasn't in a supported format, then 'header/png' would have been used instead. If no alternatives exist, then 'none' is used as a final fallback, so in the example above, if 'header/png' wasn't available either, then the <h1> element would be empty.

もしURIを利用可能で、そのフォーマットに対応している場合、 その要素もしくは疑似要素は置換要素になり、 そうでない場合、(もしあるなら)カンマ区切りリストの次の値が使われる。 上記例の場合、もし'header/mng'がサポートできていないフォーマットだった場合、 代わりに'header/png'が使われる。 もし代わりが無ければ、最後の値を'none'とする。 上記の例で言えば、もし'header/png'も利用できなかったら<h1>要素は空になる。

Thus to make an element fallback on its contents, you have to explicitly give 'contents' as a fallback:

要素の内容を代替内容にするには、最後の値で'contents'を明示する必要がある。

content: url(1), url(2), url(3), contents;

If the URI is not the only value in the list, as the second URI in the following example:

URIは単体ではない場合もあり、それは次の例の2番目のURIである:

h1 { content: url(welcome), "Welcome to: " url(logo); }

...then if the file is available and the format is supported, then an anonymous replaced inline element is inserted, otherwise the image is ignored (as if it hadn't been given at all).

もしそのファイルが利用可能で対応していたら、 匿名置換インライン要素として挿入され、そうでない場合は画像が無視される。

When a URI is used as replaced content, it affects the generation of '::before' and '::after' pseudo-elements.

URIを置換内容として利用する場合、 それは'::before'、'::after'疑似要素の生成に影響する。

normal

For an element, this computes to 'contents'.

要素の場合、算出値は'contents'とする。

For '::alternate', if the superior parent uses the 'footnote', 'endnote', or 'section-note' counter in its 'content' property then the computed value of 'content' is 'contents', otherwise it computes to 'inhibit'.

'::alternate'の場合、優勢親要素が'footnote'、'endnote'、 'section-note'カウンタを自身の'content'プロパティに使っている場合、算出値を'contents'とする。 それ以外の場合は算出値を'inhibit'とする。

For '::before', '::after', and '::line-marker' this computes to 'inhibit'.

'::before'、'::after'、'::line-marker'の場合、算出値は'inhibit'とする。

For '::marker', if the superior parent's superior parent uses 'footnote' in its 'content' property then 'normal' computes to the computed value of the 'list-style-image' property if the list-style-image is not 'none', otherwise 'counter(footnote, <list-style-type>) "suffix"' where <list-style-type> is the computed value of the 'list-style-type' property if that property is not 'none' and suffix is the suffix appropriate for that list style type, otherwise 'inhibit'.

'::marker'の場合で、優勢親要素の(更に)優勢親要素の'content'プロパティに'footnote'があるなら、 'normal'は('list-style-image'プロパティが'none'ではない場合)'list-style-image'の値が算出値となる。 それ以外の場合で、'counter(footnote, <list-style-type>) "接尾辞"'であるなら、 'list-style-type'が'none'ではなく接尾辞もlist style typeに適当なものであればそれを算出値とする。 それ以外の場合は'inhibit'となる。

For '::marker', if the superior parent's superior parent uses 'endnote' in its 'content' property then 'normal' computes to the computed value of the 'list-style-image' property if the list-style-image is not 'none', otherwise 'counter(endnote, <list-style-type>) "suffix"' where <list-style-type> is the computed value of the 'list-style-type' property if that property is not 'none' and suffix is the suffix appropriate for that list style type, otherwise 'inhibit'.

'::marker'の場合で、優勢親要素の(更に)優勢親要素の'content'プロパティに'endnote'があるなら、 'normal'は('list-style-image'プロパティが'none'ではない場合)'list-style-image'の値が算出値となる。 それ以外の場合で、'counter(endnote, <list-style-type>) "接尾辞"'であるなら、 'list-style-type'が'none'ではなく接尾辞もlist style typeに適当なものであればそれを算出値とする。 それ以外の場合は'inhibit'となる。

For '::marker', if the superior parent's superior parent uses 'section-note' in its 'content' property then 'normal' computes to the computed value of the 'list-style-image' property if the list-style-image is not 'none', otherwise 'counter(section-note, <list-style-type>) "suffix"' where <list-style-type> is the computed value of the 'list-style-type' property if that property is not 'none' and suffix is the suffix appropriate for that list style type, otherwise 'inhibit'.

'::marker'の場合で、優勢親要素の(更に)優勢親要素の'content'プロパティに'section-note'があるなら、 'normal'は('list-style-image'プロパティが'none'ではない場合)'list-style-image'の値が算出値となる。 それ以外の場合で、'counter(section-note, <list-style-type>) "接尾辞"'であるなら、 'list-style-type'が'none'ではなく接尾辞もlist style typeに適当なものであればそれを算出値とする。 それ以外の場合は'inhibit'となる。

Otherwise, for '::marker', if the computed value of 'display' for the superior parent is 'list-item' then 'normal' computes to the computed value of the 'list-style-image' property if the list-style-image is not 'none', otherwise 'counter(list-item, <list-style-type>) "suffix"' where <list-style-type> is the computed value of the 'list-style-type' property if that property is not 'none' and suffix is the suffix appropriate for that list style type, otherwise 'inhibit'.

'::marker'でそれ以外の場合、優勢親要素の'display'の算出値が'list-item'であれば、 'normal'は('list-style-image'プロパティが'none'ではない場合)'list-style-image'の値が算出値となる。 それ以外の場合で、'counter(list-item, <list-style-type>) "接尾辞"'であるなら、 'list-style-type'が'none'ではなく接尾辞もlist style typeに適当なものであればそれを算出値とする。 それ以外の場合は'inhibit'となる。

For the '@footnote' area, it computes to 'pending(footnote)'.

'@footnote'ブロックの場合、算出値は'pending(footnote)'とする。

For margin areas, it computes to 'none'.

余白の場合、算出値は'none'とする。

none

On elements, this inhibits the children of the element from being rendered as children of this element, as if the element was empty.

要素なら内容が無かったかのように子要素の描画を抑制する。

On pseudo-elements it causes the pseudo-element to have no content.

疑似要素ならその疑似要素の内容は無いことになる。

In neither case does it prevent any pseudo-elements which have this element or pseudo-element as a superior from being generated.

どちらの場合でもそれを優勢要素として生成される疑似要素の生成は抑制されない。

inhibit

On elements, this inhibits the children of the element from being rendered as children of this element, as if the element was empty.

要素なら内容が無かったかのように子要素の描画を抑制する。

On pseudo-elements, this inhibits the creation of the pseudo-element, as if 'display' computed to 'none'.

疑似要素なら'display'の算出値が'none'になったかのように、 疑似要素の生成は抑制される。

In both cases, this further inhibits the creation of any pseudo-elements which have this pseudo-element as a superior.

共にこれを優勢要素とする疑似要素の生成は抑制される。

<content-list>

[ pending(<identifier>) | <string> | contents | footnote | endnote | section-note | list-item | <counters> | <strings> | open-quote | close-quote | no-open-quote | no-close-quote | <glyph> | <uri> | <date> | document-url | <target> ]+

One or more of the following values, concatenated.

次の値がひとつ以上連結される。

pending(<identifier>)

This causes all elements and pseudo-elements whose 'move-to' property computes to the specified identifier to be inserted as children of the current element (or pseudo-element). Note: This doesn't change the DOM, and elements and pseudo-elements that have been moved inherit from their position in the DOM, not from their new position.

'move-to'プロパティの算出値がpending関数に渡された識別子と同じ全ての要素、 もしくは疑似要素を現在の要素(もしくは疑似要素)の子として挿入する。 メモ: これによってDOMは変更されず、要素・疑似要素のDOM上の位置で継承を行い、新しい場所で継承するわけではない。

This must be the case, because otherwise it would be impossible to determine the value of 'move-to'. Unfortunately, this can cause some unfortunate discontinuities, such as adjacent footnotes using different fonts because they were moved from elements with different fonts. It is therefore important that moved content be styled with the new location in mind.

そうではない場合、'move-to'の値を決めることが不可能となるであろうからそうに違いない。 しかし不運にも、隣り合った複数の脚注が、それぞれ異なるフォントの要素から移動された場合、 複数のフォントで分割されて表示されることになる。 だから移動された内容は新しい場所でスタイル指定をすることが重要なのだ。

最後の一文のin mindがわかりません。 これはどのように訳すのが正しいのでしょうか?

Note that only elements and pseudo-element that have not yet been reinserted into content are moved. For example:

まだ挿入されていない要素と疑似要素のみが移動することに注意。 例:

moved { move-to: insert; }
insert { content: pending(insert); }

<root>
  <moved> A </moved>
  1
  <insert/>
  2
  <moved> B </moved>
  3
  <insert/>
</root>

...would result in "1 A 2 3 B".

この例は"1 A 2 3 B"と表示されるだろう。

If used on an element or pseudo-element (particularly '::alternate') which has a 'move-to' property with a computed value other than 'here', the content pending at the pseudo-element's superior's position is inserted, not the content pending at the element or pseudo-element's insertion point. Similarly if used on a child of an element that has been moved: the 'content' property is evaluated before the element is inserted in its new position. This should prevent an element ever being inserted into itself or other such existential conundrums.

もし要素か疑似要素(特に'::alternate')で使うにあたり、 'move-to'プロパティが'here'以外の算出値を持つ場合、 疑似要素の優勢親要素の位置に保留内容は挿入され、 要素または疑似要素の挿入位置に保留内容が挿入されるわけではない。 また似た例として移動された要素の子で使っていた場合: 'content'プロパティは新しい位置に挿入される前に評価される。 これはその要素自身へ挿入されることや、他の問題を防ぐことができる。

Counters on content that is moved in this way are evaluated at the point of origin, not the insertion point.

カウンタを含む内容が移動された場合でも(カウンタの値は)元の位置で評価され、 挿入位置で評価されるのではない。

The identifiers 'here' and 'normal' are valid, in that they do not cause a parse error and are not ignored, but they are useless as the 'move-to' property cannot ever be set to an identifier with either of those values.

'here'と'normal'という識別子は妥当であり、 これらはパースエラーにならないし、無視もされない。 しかし、これらは'move-to'プロパティには設定できないので役には立たない。

Need to define exactly how this interacts with 'position:fixed'. Does 'position:fixed' cause multiple rendering objects to be created, one per page? If so where does 'move-to' on a 'position:fixed' element move from?

'position:fixed'とどのように絡むのか定義する必要がある。 'position:fixed'はページ毎に複数のレンダリングオブジェクトが作られるだろう? もしそうなら、'position:fixed'の要素の'move-to'はそこから移動するのか?

"" (空文字列)

If the element or pseudo-element's 'display' property computes to anything but 'inline' then the element or pseude-element contains an empty anonymous inline box, otherwise the element contains an empty string.

要素か疑似要素の'display'プロパティの算出値が'inline'以外のときは、 その要素または疑似要素は空のインラインボックスを持ち、 それ以外の場合は空の文字列を持つ。

(This is a formal way of saying that an empty string is different from 'none' in that it forces the creation of a line box, even if the line box would be empty.)

(これは空文字列は強制的に(空の)行ボックスを作る点が'none'とは違うということを意味する。)

<string>

The element or pseudo-element contains the specified string. Occurrences of line-feed or space characters in the string are handled according to the properties given in the Text module.

要素または疑似要素は指定された文字列を持つ。 改行や空白文字が文字列内にあればテキストモジュールのプロパティにあわせて処理される。

contents

The element's descendents. Since this can only be used once per element (you can't duplicate the children if, e.g., one is a plugin or form control), it is handled as follows:

要素の子孫を意味する。 要素毎に一回だけ利用することができ(子を重複できない。例えばプラグインやフォームコントロール)、 以下のようになる:

要素の場合:

Always honoured. Note that this is the default, since the initial value of 'content' is 'normal' and 'normal' computes to 'contents' on an element.

(元々の)与えられた内容である。 これは初期値であることに注意。 'content'プロパティの初期値は'normal'だが、'normal'の算出値が'contents'になるからである。

'::marker'または'::line-marker'疑似要素の場合:

Evaluates to nothing (like 'none').

無しと解釈する('none'と同様)。

それ以外の疑似要素の場合:

Check to see that it is not set on a "previous" pseudo-element, in the following order, depth first:

次のリストの順序で、"先"の疑似要素で使われていないかチェックせよ。

1. 要素自身
2. ::alternate
3. ::before
4. ::after

If it is already used, then it evaluates to nothing (like 'none'). Only pseudo-elements that are actually generated are checked. Thus

それがすでに使われているなら無しと考える('none'と同様)。 実際に生成される疑似要素だけで調べられる。 例えば次のように、

/* ::after(2) { content: inhibit; } /* 初期値 */
::after(9999) { content: contents }

...would typically not change anything.

しかし一般的にはこのような使い方はしないだろう。

So for example, in the following case:

例えば、次のような場合:

foo { content: none; }
foo::before { content: '[' counter(footnote) ']' contents; }
foo::alternate { content: counter(footnote) '. ' contents; }

...the '::before' pseudo-element's contents would become '[1]', and the footnote would contain '1. ' followed by the element's contents, because the '::alternate' takes priority over the '::before' pseudo-element at the same depth.

'::before'疑似要素の内容は'[1]'になるだろう、 そして脚注は'1. 'を含めて要素の内容が次に続く。 なぜなら同じレベルでは'::alternate'が'::before'疑似要素よりも優先順位が高いからだ。

However, in the following case:

また、次の場合:

/* foo { content: normal; }   /* 初期値 */
foo::after { content: contents; }

...the element's 'content' property would compute to 'contents' and the after pseudo element would have no contents (equivalent to 'none') and thus would not appear.

要素の'content'プロパティは'contents'と算出され、 その後の疑似要素は内容を持たない('none'と同等)ので表示されないだろう。

Note that while it is useless to include 'contents' twice in a single 'content' property, that is not a parse error. The second occurrence simply has no effect, as it has already been used. It is also not a parse error to use it on a marker pseudo-element, it is only during the rendering stage that it gets treated like 'none'.

ひとつの'content'プロパティに2つの'contents'を含んでも意味はなさないが、 パースエラーにはならないことに注意。 2番目のものは既に使われたために効果は出ない。 またmarker疑似要素で使われてもパースエラーではないが、 表示に関しては'none'と同様に扱われることになる。

footnote

Shorthand for 'counter(footnote, normal)'. This is intended to be used on the in-flow part of a footnote.

'counter(footnote, normal)'の簡略値である。 これはfootnoteの流入部分で使うためのものである。

endnote

Shorthand for 'counter(endnote, normal)'. This is intended to be used on the in-flow part of a endnote.

'counter(endnote, normal)'の簡略値である。 これはendnoteの流入部分で使うためのものである。

section-note

Shorthand for 'counter(section-note, normal)'. This is intended to be used on the in-flow part of a section-note.

'counter(section-note, normal)'の簡略値である。 これは脚注(section-note)の流入部分で使うためのものである。

list-item

Shorthand for 'counter(list-item, normal)'. Note that this is not equivalent to 'normal' when set on a '::marker' pseudo-element that has a superior with 'display' set to 'list-item', as it ignores the 'list-style' properties.

'counter(list-item, normal)'の簡略値である。 これは優勢要素の'display'が'list-item'である'::marker'疑似要素に'normal'を設定した場合とは異なることに注意せよ。 'list-style'関連プロパティを無視するからだ。

<counters>

Counters may be specified with two different functions: 'counter()' or 'counters()'. The former has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the named counter at this point in the formatting structure; it is formatted in the indicated style (the default is specified using '@counter' rules). The latter function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name at this point in the formatting structure, separated by the specified string. The counters are rendered in the indicated style (the default is again specified using '@counter' rules). See the section on automatic counters and numbering for more information.

countersは'counter()'と'counters()'の2つの関数で指定されるかもしれない。 前者には'counter(name)'と'counter(name, style)'の2つの書式がある。 生成されるテキストはそのformatting structureのその時点での名前付きカウンタの値だ。 そしてその書式は指定されたスタイルで表示される(初期値は'@counter'で指定できる)。 後者の関数もまた'counters(name, string)'と'counters(name, string, style)'の2つの書式がある。 生成されるテキストは、そのformatting structureのその時点での指定された名前と同名のカウンタの値、 全てを指定された区切り文字で連結したものだ。 そのカウンタは指定されたスタイルで表示される(その初期値もやはり'@counter'で指定する)。 詳細は自動カウンタと採番を参照。

<strings>

Set strings may be specified with the 'string(name)' expression. The generated text is the value of the named string at this point in the formatting structure. See the section on named strings for more information.

stringsは'string(name)'という表現で指定されるかもしれない。 生成されるテキストはそのformatting structureのその時点での名前付き文字列の値である。 詳細は名前付き文字列を参照。

open-quote と close-quote

These values are replaced by the appropriate string from the 'quotes' property.

これらの値は'quotes'プロパティから適当な文字列で置換される。

no-open-quote と no-close-quote

Inserts nothing (as in 'none'), but increments (decrements) the level of nesting for quotes.

('none'のように)何も挿入しない。 しかし、引用レベルはインクリメント(もしくはデクリメント)する。

<glyph>

Inserts the specified symbol. The available symbols are:

指定された記号を挿入する。利用できるのは:

box

A hollow square. (like □ U+25A1 WHITE SQUARE, ◻ U+25FB WHITE MEDIUM SQUARE, or ◽ U+25FD WHITE MEDIUM SMALL SQUARE)

中抜きの正方形。 (□ U+25A1 WHITE SQUARE、◻ U+25FB WHITE MEDIUM SQUAREもしくは◽ U+25FD WHITE MEDIUM SMALL SQUAREのようなもの)

check

A check mark. On interactive media, it is suggested that the same glyph which is used on the platform to render a checked menu item be used for 'check'. (like ✓ U+2713 CHECK MARK)

チェックマーク。 双方向メディアではそのプラットフォームでチェックされたメニュー項目として表示される記号と同じものが示される。 (✓ U+2713 CHECK MARKのようなもの)

circle

A hollow circle. (like ◦ U+25E6 WHITE BULLET)

中抜きの円。(◦ U+25E6 WHITE BULLETのようなもの)

diamond

A filled diamond. On interactive media, it is suggested that the same glyph which is used on the platform next to a selected menu item be used for 'diamond'. On some platforms, this is similar to 'disc'. (like ◆ U+25C6 BLACK DIAMOND or ♦ U+2666 BLACK DIAMOND SUIT)

塗りつぶされたダイヤモンド。 双方向メディアではそのプラットフォームで次に選択されるメニューアイテムに用いられるダイヤモンドマーク。 'disc'のようなマークのプラットフォームもある。 (◆ U+25C6 BLACK DIAMOND や ♦ U+2666 BLACK DIAMOND SUITのようなもの)

disc

A filled circle. (like • U+2022 BULLET)

塗りつぶされた円。(• U+2022 BULLETのようなもの)

hyphen

A hyphen bullet. (like ⁃ U+2043 HYPHEN BULLET or – U+2013 EN DASH)

ハイフン。(⁃ U+2043 HYPHEN BULLET や – U+2013 EN DASHのようなもの)

square

A filled square. (like ■ U+25A0 BLACK SQUARE, ◼ U+25FC BLACK MEDIUM SQUARE, or ◾ U+25FE BLACK MEDIUM SMALL SQUARE)

塗りつぶされた正方形。(■ U+25A0 BLACK SQUARE、◼ U+25FC BLACK MEDIUM SQUARE や ◾ U+25FE BLACK MEDIUM SMALL SQUAREのようなもの)

For more information on the list of symbols and their definitions, see the Lists module [CSS3LIST].

リストの記号や定義についての詳細は、リストモジュール[CSS3LIST]を参照。

<date>

The 'date(format)' expression returns the current date and/or time, formatted according to the specified formatting string. Formatting strings will be defined in a future version of this draft and may be based on POSIX date formatting strings.

'date(format)'で現在日付もしくは時間が返され、 指定されたフォーマット文字列の書式で表示される。 フォーマット文字列はこの草案の今後の版で定義するが、 それはPOSIX日付フォーマットをベースとしたものになるかもしれない。

document-url

The URI of the current document. For local files, this may simply be the local file name.

当該文書のURI。 ローカルファイルの場合、単にローカルファイル名かもしれない。

<target>

Using the target expressions, authors can write cross-references. Need to write this up.

targetを使って、著者はクロスリファレンスを書くことができる。 これを詳しく書く必要あり。

12. 置換内容

If the computed value of the part of the 'content' property that ends up being used is a single URI, then the element or pseudo-element is a replaced element. The box model defines different rules for the layout of replaced elements than normal elements. Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.

'content'プロパティの算出値がURI単体の値であるとき、 その要素もしくは疑似要素は置換要素である。 ボックスモデルは通常の要素とは異なる、置換要素のレイアウト規則を定義している。 置換要素は'::before'、'::after'疑似要素を持たない (置換内容の場合、'content'プロパティはその要素のボックス全体の内容を置換するためである)。

To insert text around replaced content, '::outside::before' and '::outside::after' may be used.

置換内容の周囲にテキストを挿入したい場合、'::outside::before'、'::outside::after'を使えば良い。

12.1. 'crop'プロパティ

This property allows a replaced element to be just a rectangular area of an object, instead of the whole object.

このプロパティはオブジェクトの全体の代わりに、 オブジェクトの一部の矩形を置換要素にすることができる。

The 'crop' property adds a step when determining the intrinsic dimensions of an element. With 'crop', the notion of computed intrinsic width and height are introduced. When the layout algorithms reference the "intrinsic width" (and/or height), they are referring to the computed intrinsic width and height.

'crop'プロパティは要素の内在寸法を決める時ために1ステップ加える。 'crop'によって、"算出された"固有の幅と高さの概念が導入される。 レイアウトアルゴリズムが"固有の幅"(もしくは高さ)を参照する際には、 算出固有幅、もしくは算出固有高を参照する。

The computed intrinsic width and height of an element are the result of applying the crop to the actual intrinsic width and height of the element.

ある要素の算出固有幅と算出固有高は、 その要素にcropが適用された実効固有幅と実効固有高である。

'auto'

The element's computed intrinsic width and height are the same as its actual intrinsic width and height.

その要素の算出固有幅と算出固有高はその実効固有幅と実効固有高と同じである。

rect(top, right, bottom, left)

Each of the four arguments can be a <length> or a <percentage>. All percentage values are computed relative to the intrinsic dimensions of the element, if there is one. Values are offsets relative to the top left of the element. The computed intrinsic width and height of the element are determined by subtracting the left from the right for the width, and similarly top from bottom for the height. However, if this computation results in a negative value, it is considered to be zero.

4つの引数それぞれが<length>、もしくは<percentage>をとる。 全てのパーセント値はその要素に内在寸法があれば内在寸法との相対値で算出される。 各値はその要素の左上からのオフセットである。 その要素の算出固有幅と算出固有高はそれぞれ、 rightからleftを引いたものが幅、同様にbottomからtopを引いたものが高さとなる。 しかし、もし算出結果が負の値になれば、それはゼロと読み替える。

inset-rect(top, right, bottom, left)

Like rect(), except that the values are offsets relative to the respective edges of the element.

rect()と似ていて、違うのはその値がその要素のそれぞれの辺からのオフセットである点である。

If the element does not have an intrinsic width, the UA may in some cases be able to infer the intrinsic width that the style sheet writer assumed. First the UA must find the computed 'width' and computed 'height' and then the intrinsic width can be found as follows (the intrinsic height is analogous):

もし要素が固有幅を持たない場合、 UAはスタイルシート作者の想定した固有幅を他の内容から推測できるかもしれない。 第一にUAは算出された'width'、算出された'height'、それから固有幅を見つけなくてはいけないが、 それは次のように見つけることができる(固有高も同様):

1. If 'crop' is 'auto', the assumed intrinsic width is the same as the computed value of 'width'

   もし'crop'が'auto'なら、 想定される幅は'width'の計算値と同じである。

2. If 'crop' is 'rect(t, r, b, l)' and r is a percentage, the intrinsic width can be solved from the equation: r = computed 'width' + l

   もし'crop'が'rect(t, r, b, l)'でrがパーセント値なら、 固有幅は次の等式から解くことができる: r = 'width'の算出値 + l

3. If 'crop' is 'rect(t, r, b, l)' and r is not a percentage, the intrinsic width cannot be computed and the result is UA dependent.

   もし'crop'が'rect(t, r, b, l)'でrがパーセント値ではないなら、 固有幅は算出不可能なのでUA依存となってしまう。

4. If 'crop' is 'inset-rect(t, r, b, l)', then the intrinsic width can always be solved from the equation intrinsic width = l + computed 'width' + r

   もし'crop'が'inset-rect(t, r, b, l)'なら、 固有幅は常に次の等式から求めることができる: 固有幅 = l + 'width'の算出値 + r

Note: 'crop' does not impact the scaling, stretching, tiling or positioning of the replaced element. 'crop' simply allows the author to essentially use a part of a replaced element in place of the element itself for all intents and purposes.

メモ: 'crop'は置換要素の縮尺、拡大、タイリングもしくは配置に影響しない。 'crop'は単純に著者がその要素内での置換要素の一部だけを使うことを意図している。

.thumbnail { crop: rect(0px, 115px, 85px, 30px) }

<p>Here is Woolly, the CSS sheep。
<img src="woolly" alt="Woolly">
<p>And here he is as a thumbnail:
<img src="woolly" class="thumbnail" alt="Woolly thumbnail">

12.2. 内在寸法

Replaced content may have intrinsic dimensions, such as: an intrinsic width and an intrinsic height, a fixed intrinsic ratio, or a ratio calculable from a specified width or height.

置換内容は内在寸法を持っているかもしれない、例えば: 固有の幅、固有の高さ、固定的な固有の縦横比、もしくは定義された幅もしくは高さから算出される縦横比である。

The 'height' and 'width' properties' 'auto' values change meaning when applied to a replaced element with intrinsic dimensions.

'height'と'width'プロパティに'auto'値が置換要素に設定された場合、 その意味は内在寸法とする。

If applied to both dimensions, then if the replaced content has an intrinsic width, the width computes to the actual width of the content, otherwise if the replaced content has an intrinsic height, the height computes to the actual height of the content, otherwise the width is UA-defined. The remaining dimension is then calculated so as to preserve the aspect ratio. (This paragraph assumes a vertical block progression direction. In a horizontal block progression direction context, the 'height' property is done first.)

もし両方に適用された場合、 置換内容が固有の幅を持つ場合は幅を実際の内容の幅とし、 置換内容が固有の高さを持つ場合は高さを実際の内容の高さとし、 それ以外の場合、幅をUAが決める。 残った次元は元々の縦横比から計算する。 (この段落は文書の方向が垂直な場合を前提としている。 文書の方向が水平な場合、先に'height'プロパティが決定される。)

If applied to only one of the two properties only, then if the element has any intrinsic dimensions at all, the property is calculated to preserve the aspect ratio, otherwise the property is given a UA-specific value.

もし2つのプロパティのうちひとつだけが設定された場合、 内在寸法を持っているのであればプロパティは元々の縦横比から計算される。 そうでなければプロパティはUAが定義する値となる。

13. 例

13.1. 脚注(footnote)要素

To make an element into a footnote, leaving a marker behind:

脚注に要素を作るためにマーカーをその場に残す:

fn { content: footnote; }

By carefully defining the computation rules of initial values, this causes the following:

初期値の算出規則を注意深く限定することによって次のようになる:

/* 要素を脚注を示すカウンタに置換する */
fn { content: counter(footnote, footnotes); }

/* '::alternate'疑似要素に要素の内容を移動し、
   そしてその疑似要素を脚注へと移動する */
fn::alternate { content: contents; move-to: footnotes; }

/* 脚注のマーカーを生成して、脚注のカウンタを表示する */
fn::alternate::marker { content: counter(footnote, footnotes); }

/* 脚注の領域に、脚注を取り込むよう宣言する。 */
@footnote { content: pending(footnotes); }

Note that there is no magic involved, the computation rules are simply carefully designed to compute as described above.

これは魔法のように複雑な話ではなく、 算出規則は単に上述のように注意深くデザインされたものであることに注意。

13.2. 脚注(footnote)属性

To make an element's attribute into a footnote:

脚注で要素の属性は生成される:

[href]::after { content: footnote; }
[href]::after::alternate { content: attr(href); }

13.3. 脚注のデザイン

To use numbers for footnotes instead of symbols:

記号の代わりに脚注に番号を使う:

@counter footnote {
    list-style-type: decimal-super;
}

13.4. ひとつの要素に複数のスタイル

To put three borders around an element:

要素の周りに3つの枠線を表示する:

h1 { border: solid blue; }
h1::outside(1) { border: solid green; display: block; }
h1::outside(2) { border: solid red; display: block; }

To put a background in each corner:

各角に背景画像を表示する:

body::outside(1) { display: block; background: top left url(tl); }
body::outside(2) { display: block; background: top right url(tr); }
body::outside(3) { display: block; background: bottom left url(bl); }
body::outside(4) { display: block; background: bottom right url(br); }

13.5. 部分メモ(section notes)

To use all title attributes as section numbered notes:

全てのtitle属性をセクション内で採番したメモとして使う:

section > [title]::after { content: section-note; }
section > [title]::after::alternate { content: attr(title); }
section::after { content: 'メモ: ' pending(section-notes); }

Note how setting 'content' to 'section-note' on the '::after' pseudo-element automatically sets 'move-to' on the '::after::alternate' pesudo-element to 'section-notes', due to the definition of the initial value of 'move-to'.

'move-to'の初期値の定義により、 '::after'疑似要素の'content'に'section-note'が設定されたことによって、 '::after::alternate'疑似要素の'move-to'に'section-notes'が自動的に設定されていることに注意。

13.6. 上寄せ

Top floats (assuming fixed position elements are positioned relative is the page area's border edge):

上寄せ(固定配置要素がページの辺に配置されるとした場合):

img {
  move-to: top-floats;
}
:root::before {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10em;
  content: pending(top-floats);
}
@page {
  padding-top: 10em;
}

14. Test suite

A test suite checking many of the more involved of this specifiation, as well as the basics, will be created and used to establish whether the CR exit criteria have been met.

15. Profiles

There will be several profiles: Level 1 (equivalent to the CSS1 model), Level 2 (not quite identical to the CSS2 model), and Full.

An implementation can implement a superset of the features and claim conformance to the profile.

Acknowledgments

Stuart Ballard, David Baron, Bert Bos, and Tantek Çelı̇k provided invaluable suggestions used in this specification.

References

Normative references

[CSS3BOX]

Bert Bos. CSS3 module: box model. 26 July 2001. W3C working draft. (Work in progress.) URL: http://www.w3.org/TR/2001/WD-css3-box-20010726

[CSS3LINE]

Eric A. Meyer. CSS3 module: linebox model. (forthcoming). W3C working draft. (Work in progress.)

[CSS3LIST]

Tantek Çelik; Ian Hickson. CSS3 module: lists. 20 Feb 2002. W3C working draft. (Work in progress.) URL: http://www.w3.org/TR/2002/WD-css3-lists-20020220

[CSS3PAGE]

Robert Stevahn. CSS3 module: paged media. 28 Sep 1999. W3C working draft. (Work in progress) URL: http://www.w3.org/TR/1999/WD-css3-page-19990928

[CSS3SYN]

David Baron. CSS3 module: syntax. (forthcoming). W3C working draft. (Work in progress.)

[CSS3VAL]

Håkon Wium Lie. CSS3 module: values and units. (forthcoming). W3C working draft. (Work in progress.)

[RFC2119]

S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. Internet RFC 2119. URL: http://www.ietf.org/rfc/rfc2119.txt

[SELECT]

Daniel Glazman; Tantek Çelik; Ian Hickson; et al. Selectors. 13 Nov 2001. W3C Candidate Recommendation. URL: http://www.w3.org/TR/2001/CR-css3-selectors-20011113

Other references

Index

• box, #
• check, #
• circle, #
• close-quote, #
• content, #
• contents, #
• counter-increment, #
• counter-reset, #
• counters, #
• crop, #
• diamond, #
• disc, #
• display, #
• document-url, #
• endnote, #
• footnote, #
• here, #
• hyphen, #
• inhibit, #
• list-item, #, #
• <content-list>, #
• <counters>, #
• <strings>, #
• move-to, #
• no-close-quote, #
• none, #, #, #
• no-open-quote, #, #
• normal, #, #, #
• open-quote, #
• page-policy, #
• pending(<identifier>), #
• quotes, #
• scope, #
• section-note, #
• square, #
• superior, #
• superior parent, #
• superior siblings, #

Property index