From 1ac7ad6a4bd080aae2574c491a69eacfec9ece23 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 6 Feb 2022 22:54:15 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/quotes/index.md | 184 ++++++++++++++++++--------------------- 1 file changed, 87 insertions(+), 97 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/quotes/index.md b/files/ja/web/css/quotes/index.md index 4138ffcf98..978f6f974f 100644 --- a/files/ja/web/css/quotes/index.md +++ b/files/ja/web/css/quotes/index.md @@ -5,59 +5,67 @@ tags: - CSS - CSS プロパティ - CSS 生成コンテンツ - - Reference + - リファレンス - ウェブ - レイアウト - 生成コンテンツ translation_of: Web/CSS/quotes --- -
{{CSSRef}}
+{{CSSRef}} -

quotes は CSS のプロパティで、引用符がどのように表示されるかを設定します。

+**`quotes`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 [`content`](/ja/docs/Web/CSS/content) プロパティの `open-quotes` や `close-quotes` を使用して追加された引用符をどのように表示するかを設定します。 -
{{EmbedInteractiveExample("pages/css/quotes.html")}}
+{{EmbedInteractiveExample("pages/css/quotes.html")}} - +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 quotes: none;
 quotes: auto;
 
-/* <string> 値 */
-quotes: "«" "»";           /* open-quote および close-quote をフランス語の引用符に設定 */
-quotes: "«" "»" "‹" "›";   /* ２レベルの引用符を設定 */
+/*  値 */
+quotes: "«" "»";           /* open-quote および close-quote をフランス語の引用符に設定 */
+quotes: "«" "»" "‹" "›";   /* 2 レベルの引用符を設定 */
 
 /* グローバル値 */
 quotes: inherit;
 quotes: initial;
+quotes: revert;
 quotes: unset;
-
+``` + +### 値 + +- `none` + - : {{cssxref("content")}} プロパティの `open-quote` および `close-quote` の値で引用符を生成しません。 +- `auto` + - : 選択された要素に設定された言語の値（すなわち、 {{htmlattrxref("lang")}} 属性）で使用される適切な引用符が使用されます。 +- `[ ]+` + - : `open-quote` および `close-quote` を表す {{cssxref("<string>")}} の 1 つ以上の組。最初の組は、引用符を表示する要素が入れ子になった際の、最上層のものの引用符を表します。以下、順次下位レベルの引用符に対応します。 -

値

+## 公式定義 -
-
none
-
{{cssxref("content")}} プロパティの open-quote および close-quote の値が引用符を生成しません。
-
auto
-
選択された用途に設定された言語の値 (すなわち、 {{htmlattrxref("lang")}} 属性) で使用される適切な引用符が使用されます。
-
[<string> <string>]+
-
open-quote および close-quote を表す {{cssxref("<string>")}} の１つ以上の組。最初の組は、引用符を表示する要素が入れ子になった際の、最上層のものの引用符を表す。以下、順次下位レベルの引用符に対応する。
-
+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

基本的な引用符

+### 基本的な引用符 -
<q>To be or not to be. That's the question!</q>
-
+#### HTML -
q {
+```html
+To be or not to be. That's the question!
+```
+
+#### CSS
+
+```css
+q {
   quotes: '"' '"' "'" "'";
 }
 q::before {
@@ -65,75 +73,57 @@ q::before {
 }
 q::after {
   content: close-quote;
-}
- -

{{EmbedLiveSample('Basic_quote_marks', "100%", 60)}}

- -

自動引用符

- -
<div lang="fr">
-  <q>Ceci est une citation française.</q>
-<div>
-<hr>
-<div lang="ru">
-  <q>Это русская цитата</q>
-<div>
-<hr>
-<div lang="ja">
-  <q>これは日本語の引用符です。</q>
-<div>
-<hr>
-<div lang="en">
-  <q>This is an English quote.</q>
-<div>
-
- -
/*q {
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample('Basic_quote_marks', "100%", 60)}}
+
+### 自動引用符
+
+多くのブラウザーでは、 `quotes` の既定値は `auto` (Firefox 70 以降)、またそれ以外のブラウザー (Chromium, Safari, Edge) ではこれが既定の動作なので、この例は明示的に設定されなくても動作します。
+
+#### HTML
+
+```html
+

+  これが日本語の引用符です。
+

+

+

+  Это русская цитата
+

+

+

+  Dies ist ein deutsches Zitat
+

+

+

+  This is an English quote.
+

+```
+
+#### CSS
+
+```css
+/*q {
   quotes: auto;
 }*/
-
- -

{{EmbedLiveSample('Auto_quotes', "100%", 200)}}

- -

メモ

- -
    -
  • (Firefox 70 以降) では quotes の既定値はどのような場合も auto であり、その他のブラウザー (Chromium, Safari, Edge) もこの動作をしますので、多くのブラウザーでは明示的に設定しなくても上記の例が動作します。
    • -
  • Firefox 3.5 以降では、 quotes プロパティの初期値は -moz-initial を使用して読み出すことができます。これはそれより前のバージョンの Firefox では有効ではありません。
    • -
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Content", "#quotes", "quotes")}}{{Spec2("CSS3 Content")}}
{{ SpecName('CSS2.1', 'generate.html#quotes', 'quotes') }}{{ Spec2('CSS2.1') }}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • {{ Cssxref("content") }} プロパティ
    • -
+``` + +#### 結果 + +{{EmbedLiveSample('Auto_quotes', "100%", 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{ Cssxref("content") }} -- cgit v1.2.3-54-g00ecf