From 9fa002007a8cd794e30aad26d0d02ea5fd99c46f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 23 Sep 2021 00:08:36 +0900 Subject: Web/CSS/content を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Markdown に変換 - 2021/09/10 時点の英語版に同期 --- files/ja/web/css/content/index.md | 318 +++++++++++++++++++------------------- 1 file changed, 159 insertions(+), 159 deletions(-) (limited to 'files/ja/web/css/content') diff --git a/files/ja/web/css/content/index.md b/files/ja/web/css/content/index.md index d9f7c7b0eb..a3fd67aa1b 100644 --- a/files/ja/web/css/content/index.md +++ b/files/ja/web/css/content/index.md @@ -7,31 +7,34 @@ tags: - CSS プロパティ - 生成コンテンツ - Reference + - recipe:css-property +browser-compat: css.properties.content translation_of: Web/CSS/content --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の content プロパティは、要素を生成された値で置き換えます。 content プロパティを使用して挿入されたオブジェクトは、無名の置換要素になります。

+**`content`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ある要素を生成された値で置き換えます。 `content` プロパティを使用して挿入されたオブジェクトは、**無名の[置換要素](/ja/docs/Web/CSS/Replaced_element)** になります。 -
/* 他の値と組み合わせることができないキーワード */
+```css
+/* 他の値と組み合わせることができないキーワード */
 content: normal;
 content: none;
 
-/* <image> 値 */
+/*  値 */
 content: url("http://www.example.com/test.png");
 content: linear-gradient(#e66465, #9198e5);
 
-/* 生成コンテンツの代替テキスト、第3水準の仕様書で追加 */
+/* 生成コンテンツの代替テキスト、レベル 3 の仕様書で追加 */
 content: url("http://www.example.com/test.png") / "This is the alt text";
 
-/* 以下の値は ::before および ::after を使用して生成されたコンテンツにのみ適用 */
-
-/* <string> 値 */
+/*  値 */
 content: "prefix";
 
-/* <counter> 値 */
+/*  値、任意で  */
 content: counter(chapter_counter);
+content: counter(chapter_counter, upper-roman);
 content: counters(section_counter, ".");
+content: counters(section_counter, ".", decimal-leading-zero);
 
 /* HTML 属性値にリンクした attr() 値 */
 content: attr(value string);
@@ -43,77 +46,90 @@ content: no-open-quote;
 content: no-close-quote;
 
 /* normal と none を除き、複数の値が同時に使用可 */
-content: open-quote chapter_counter;
+content: open-quote counter(chapter_counter);
 
 /* グローバル値 */
 content: inherit;
 content: initial;
+content: revert;
 content: unset;
-
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
none
-
擬似要素は生成されません。
-
normal
-
:before および :after 擬似要素では none として計算されます。
-
{{cssxref("<string>")}}
-
要素の「代替テキスト」を指定します。この値は任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスを使用してエンコードする必要があります。例えば、 \000A9 は著作権記号を表します。
-
{{cssxref("<image>")}}
-
{{cssxref("<url>")}} または {{cssxref("<gradient>")}} データ型で示された {{cssxref("<image>")}}、または表示するコンテンツを記述する {{cssxref("element", "element()")}} 関数で定義されたウェブページの一部です。
-
{{cssxref("<counter>")}}
-
CSS カウンターの値で、通常は数値です。 {{cssxref("counter")}} または {{cssxref("counters")}} 関数を使用して表示することができます。
-
-

{{cssxref("counter")}} 関数には、 'counter(名前)' または 'counter(名前, スタイル)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前の最も内側のカウンターです。指定されたスタイルで整形されます (decimal が既定値です)。

- -

{{cssxref("counters")}} 関数も、 'counters(名前, 文字列)' または 'counters(名前, 文字列, スタイル)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前のすべてのカウンターの値であり、外側から内側に向けて、指定された文字列で区切られます。カウンターは指定されたスタイルで表示されます(decimal が既定値です)。

-
-
attr(x)
-
要素の属性の値 x を文字列として返します。属性 x が存在しない場合は、空文字列が返されます。属性名の大文字と小文字が区別されるかどうかは、文書の言語に依存します。
-
open-quote | close-quote
-
これらの値は {{cssxref("quotes")}} プロパティの対応する文字列に置き換えられます。
-
no-open-quote | no-close-quote
-
内容はありませんが、引用符の入れ子の階層を増加 (または減少) させます。
-
- -

形式文法

+``` + +## 構文 + +### 値 + +- `none` + - : 擬似要素に適用された場合は、その擬似要素は生成されません。要素に適用された場合は、この値は効果がありません。 +- `normal` + - : `::before` および `::after` 擬似要素では `none` として計算されます。 +- {{cssxref("<string>")}} + - : 要素の「代替テキスト」を指定します。この値は任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスを使用してエンコードする必要があります。例えば、 `\000A9` は著作権記号を表します。 +- {{cssxref("<image>")}} + - : {{cssxref("<image>")}} です。 {{cssxref("url()")}} または {{cssxref("<gradient>")}} データ型、または {{cssxref("element()", "element()")}} 関数で定義されるウェブページの一部です。 +- {{cssxref("counter()")}} + + - : [CSS カウンター](/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)の値で、通常は {{cssxref("<counter-reset>")}} および {{cssxref("<counter-increment>")}} プロパティで定義され、計算によって生み出される数値です。 {{cssxref("counter()")}} または {{cssxref("counters()")}} 関数を使用して表示することができます。 + + {{cssxref("counter()")}} 関数には、 'counter(_名前_)' または 'counter(_名前_, スタイル)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前の最も内側のカウンターです。{{cssxref("<list-style-type>")}} で指定されたスタイルで整形されます (`decimal` が既定値です)。 + + {{cssxref("counters()")}} 関数も、 'counters(_名前_, _文字列_)' または 'counters(_名前_, _文字列_, _スタイル_)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前のすべてのカウンターの値であり、外側から内側に向けて、指定された文字列で区切られます。カウンターは指定されたスタイルで表示されます(`decimal` が既定値です)。 + +- `attr(x)` + - : 要素の属性の値 `x` を文字列として返します。属性 `x` が存在しない場合は、空文字列が返されます。属性名の大文字と小文字が区別されるかどうかは、文書の言語に依存します。 +- `open-quote` | `close-quote` + - : これらの値は {{cssxref("quotes")}} プロパティの対応する文字列に置き換えられます。 +- `no-open-quote` | `no-close-quote` + - : 内容はありませんが、引用符の入れ子の階層を増加 (または減少) させます。 + +## アクセシビリティの考慮 + +CSS で生成されるコンテンツは、 [DOM](/ja/docs/Web/API/Document_Object_Model/Introduction) には含まれません。そのため、これは[アクセシビリティツリー](/ja/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis)では表現されず、支援技術とブラウザーの組み合わせによってはアナウンスされないことがあります。そのコンテンツがページの目的を理解する上で重要な情報を含んでいるのであれば、メイン文書に含めたほうが適切です。 + +- [Accessibility support for CSS generated content – Tink](https://tink.uk/accessibility-support-for-css-generated-content/) +- [WCAG の解説、ガイドライン 1.3 – MDN](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways) +- [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

見出しと引用符

+

見出しと引用符

-

この例では引用部分の周りに引用符を挿入し、見出しの前に "Chapter" の語を追加します。

+この例では引用部分の周りに引用符を挿入し、見出しの前に "Chapter" の語を追加します。 -

HTML

+#### HTML -
<h1>5</h1>
-<p>According to Sir Tim Berners-Lee,
-  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
+```html
+
5

+
According to Sir Tim Berners-Lee,
+  I was
     lucky enough to invent the Web at the time when the Internet
-    already existed - and had for a decade and a half.</q>
+    already existed - and had for a decade and a half.
   We must understand that there is nothing fundamentally wrong
   with building on the contributions of others.
-</p>
+

 
-<h1>6</h1>
-<p>According to the Mozilla Manifesto,
-  <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
+
6

+
According to the Mozilla Manifesto,
+  Individuals
     must have the ability to shape the Internet and
-    their own experiences on the Internet.</q>
+    their own experiences on the Internet.
   Therefore, we can infer that contributing to the open web
   can protect our own individual experiences on it.
-</p>
+

+``` -

CSS

+#### CSS -
q {
+```css
+q {
   color: blue;
 }
 
@@ -127,77 +143,89 @@ q::after {
 
 h1::before  {
   content: "Chapter ";  /* 最後の空白は、追加コンテンツと
-                           残りのコンテンツの間を隔てる
+                           残りのコンテンツの間を区切る
                            ものです */
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample('Headings_and_quotes', '100%', 200)}}

+

{{EmbedLiveSample('Headings_and_quotes', '100%', 200)}} -

テキストと組み合わせる画像

+

テキストと組み合わせる画像

-

この例はリンクの前に画像を挿入します。画像が見つからなければ、代わりにテキストを挿入します。

+この例はリンクの前に画像を挿入します。画像が見つからなければ、代わりにテキストを挿入します。 -

HTML

+#### HTML -
<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>
+```html +Mozilla Home Page +``` -

CSS

+#### CSS -
a::before {
-  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: ";
+```css
+a::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") / " MOZILLA: ";
   font: x-small Arial, sans-serif;
   color: gray;
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample('Image_combined_with_text', '100%', 60)}}

+{{EmbedLiveSample('Image_combined_with_text', '100%', 60)}} -

クラスのターゲッティング

+

クラスのターゲッティング

-

この例はリストの特定の項目の後に追加のテキストを挿入します。

+この例はリストの特定の項目の後に追加のテキストを挿入します。 -

HTML

+#### HTML -
<h2>Paperback Best Sellers</h2>
-<ol>
-  <li>Political Thriller</li>
-  <li class="new-entry">Halloween Stories</li>
-  <li>My Biography</li>
-  <li class="new-entry">Vampire Romance</li>
-</ol>
+```html +

Paperback Best Sellers

+
    +
  1. Political Thriller
    2. +
  2. Halloween Stories
    3. +
  3. My Biography
    4. +
  4. Vampire Romance
    5. +
+``` -

CSS

+#### CSS -
.new-entry::after {
+```css
+.new-entry::after {
   content: " New!";  /* 先頭の空白は、追加コンテンツと
-                        残りのコンテンツの間を隔てる
+                        残りのコンテンツの間を区切る
                         ものです */
   color: red;
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample('Targeting_classes', '100%', 160)}}

+{{EmbedLiveSample('Targeting_classes', '100%', 160)}} -

画像および要素の属性

+

画像および要素の属性

-

この例はそれぞれのリンクの前に画像を挿入し、後に id 属性を追加します。

+この例はそれぞれのリンクの前に画像を挿入し、後に `id` 属性を追加します。 -

HTML

+#### HTML -
<ul>
-  <li><a id="moz" href="http://www.mozilla.org/">
-    Mozilla Home Page</a></li>
-  <li><a id="mdn" href="https://developer.mozilla.org/">
-    Mozilla Developer Network</a></li>
-</ul>
+```html + +``` -

CSS

+#### CSS -
a {
+```css
+a {
   text-decoration: none;
   border-bottom: 3px dotted navy;
 }
@@ -207,89 +235,61 @@ a::after {
 }
 
 #moz::before {
-  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
 }
 
 #mdn::before {
-  content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
+  content: url("mdn-favicon16.png");
 }
 
 li {
   margin: 1em;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample('Images_and_element_attributes', '100%', 160)}}

+{{EmbedLiveSample('Images_and_element_attributes', '100%', 160)}} -

要素の置き換え

+

要素の置き換え

-

この例は要素の内容を画像で置き換えます。要素の内容を {{cssxref("<url>")}} または {{cssxref("<image>")}} の値のどちらかで置き換えることができます。 ::before または ::after で追加された内容は、要素の中身が置き換えられるときは生成されません。

+この例は、要素の内容を画像で置き換えます。要素の内容を {{cssxref("url()")}} または {{cssxref("<image>")}} の値のどちらかで置き換えることができます。 `::before` または `::after` で追加された内容は、要素の中身が置き換えられるときは生成されません。 -

HTML

+#### HTML -
<div id="replaced">Mozilla</div>
-
+```html +
Mozilla
+``` -

CSS

+#### CSS -
#replaced {
-  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+```css
+#replaced {
+  content: url("mdn.svg");
 }
 
 #replaced::after { /* 要素の置換に対応している場合は表示されない */
   content: " (" attr(id) ")";
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample('Element_replacement', '100%', 200)}}

+{{EmbedLiveSample('Element_replacement', '100%', 200)}} -

アクセシビリティの考慮事項

+## 仕様書 -

CSS の生成コンテンツは DOM に含まれません。そのため、アクセシビリティツリーに現れず、支援技術とブラウザーの組み合わせによってはアナウンスされません。コンテンツがページの目的を理解する上で重要な情報を持つのであれば、文書本体に含めた方が適切です。

+{{Specifications}} - +## ブラウザーの互換性 -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Content", "#content-property", "content")}}{{Spec2("CSS3 Content")}}代替テキストの対応を追加
{{SpecName("CSS2.1", "generate.html#content", "content")}}{{Spec2("CSS2.1")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.content")}}

- -

関連情報

+{{Compat}} - +## 関連情報 + +- [置換要素](/ja/docs/Web/CSS/Replaced_element) +- {{Cssxref("::after")}} +- {{Cssxref("::before")}} +- {{Cssxref("::marker")}} +- {{Cssxref("quotes")}} +- {{cssxref("url()", "url()")}} 関数 -- cgit v1.2.3-54-g00ecf