From 151be036663b16c27c2af6f7c41c45d755082a89 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 22 Sep 2021 15:39:20 +0900 Subject: Web/CSS/content の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/content/index.html | 294 ----------------------------------- files/ja/web/css/content/index.md | 295 ++++++++++++++++++++++++++++++++++++ 2 files changed, 295 insertions(+), 294 deletions(-) delete mode 100644 files/ja/web/css/content/index.html create mode 100644 files/ja/web/css/content/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/content/index.html b/files/ja/web/css/content/index.html deleted file mode 100644 index a19cfaf20f..0000000000 --- a/files/ja/web/css/content/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: content -slug: Web/CSS/content -tags: - - CSS - - CSS プロパティ - - CSS 生成コンテンツ - - Reference -translation_of: Web/CSS/content ---- -
{{CSSRef}}
- -

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

- -
/* 他の値と組み合わせることができないキーワード */
-content: normal;
-content: none;
-
-/* <image> 値 */
-content: url("http://www.example.com/test.png");
-content: linear-gradient(#e66465, #9198e5);
-
-/* 生成コンテンツの代替テキスト、第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: counters(section_counter, ".");
-
-/* HTML 属性値にリンクした attr() 値 */
-content: attr(value string);
-
-/* 言語や位置に依存したキーワード */
-content: open-quote;
-content: close-quote;
-content: no-open-quote;
-content: no-close-quote;
-
-/* normal と none を除き、複数の値が同時に使用可 */
-content: open-quote chapter_counter;
-
-/* グローバル値 */
-content: inherit;
-content: initial;
-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
-
内容はありませんが、引用符の入れ子の階層を増加 (または減少) させます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

見出しと引用符

- -

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

- -

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
-    lucky enough to invent the Web at the time when the Internet
-    already existed - and had for a decade and a half.</q>
-  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
-    must have the ability to shape the Internet and
-    their own experiences on the Internet.</q>
-  Therefore, we can infer that contributing to the open web
-  can protect our own individual experiences on it.
-</p>
- -

CSS

- -
q {
-  color: blue;
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-h1::before  {
-  content: "Chapter ";  /* 最後の空白は、追加コンテンツと
-                           残りのコンテンツの間を隔てる
-                           ものです */
-}
- -

結果

- -

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

- -

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

- -

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

- -

HTML

- -
<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>
- -

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)}}

- -

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

- -

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

- -

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>
- -

CSS

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

結果

- -

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

- -

画像および要素の属性

- -

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

- -

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>
- -

CSS

- -
a {
-  text-decoration: none;
-  border-bottom: 3px dotted navy;
-}
-
-a::after {
-  content: " (" attr(id) ")";
-}
-
-#moz::before {
-  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;
-}
-
-#mdn::before {
-  content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
-}
-
-li {
-  margin: 1em;
-}
-
- -

結果

- -

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

- -

要素の置き換え

- -

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

- -

HTML

- -
<div id="replaced">Mozilla</div>
-
- -

CSS

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

結果

- -

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

- -

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

- -

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

- - - -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/content/index.md b/files/ja/web/css/content/index.md new file mode 100644 index 0000000000..d9f7c7b0eb --- /dev/null +++ b/files/ja/web/css/content/index.md @@ -0,0 +1,295 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS + - CSS カウンター + - CSS プロパティ + - 生成コンテンツ + - Reference +translation_of: Web/CSS/content +--- +
{{CSSRef}}
+ +

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

+ +
/* 他の値と組み合わせることができないキーワード */
+content: normal;
+content: none;
+
+/* <image> 値 */
+content: url("http://www.example.com/test.png");
+content: linear-gradient(#e66465, #9198e5);
+
+/* 生成コンテンツの代替テキスト、第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: counters(section_counter, ".");
+
+/* HTML 属性値にリンクした attr() 値 */
+content: attr(value string);
+
+/* 言語や位置に依存したキーワード */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* normal と none を除き、複数の値が同時に使用可 */
+content: open-quote chapter_counter;
+
+/* グローバル値 */
+content: inherit;
+content: initial;
+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
+
内容はありませんが、引用符の入れ子の階層を増加 (または減少) させます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

見出しと引用符

+ +

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

+ +

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
+    lucky enough to invent the Web at the time when the Internet
+    already existed - and had for a decade and a half.</q>
+  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
+    must have the ability to shape the Internet and
+    their own experiences on the Internet.</q>
+  Therefore, we can infer that contributing to the open web
+  can protect our own individual experiences on it.
+</p>
+ +

CSS

+ +
q {
+  color: blue;
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+h1::before  {
+  content: "Chapter ";  /* 最後の空白は、追加コンテンツと
+                           残りのコンテンツの間を隔てる
+                           ものです */
+}
+ +

結果

+ +

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

+ +

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

+ +

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

+ +

HTML

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

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)}}

+ +

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

+ +

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

+ +

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>
+ +

CSS

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

結果

+ +

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

+ +

画像および要素の属性

+ +

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

+ +

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>
+ +

CSS

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

結果

+ +

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

+ +

要素の置き換え

+ +

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

+ +

HTML

+ +
<div id="replaced">Mozilla</div>
+
+ +

CSS

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

結果

+ +

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

+ +

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

+ +

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

+ + + +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf