From 9a01a5446e5c02cb66cb0c4423daf4a3a50f6453 Mon Sep 17 00:00:00 2001 From: Niedziolka Michal <100634371+NiedziolkaMichal@users.noreply.github.com> Date: Sat, 5 Mar 2022 22:44:53 +0100 Subject: Fix for vertical-align examples in Dark Mode (#4401) * Fix for vertical-align examples in Dark Mode * Removed empty parameter Co-authored-by: Claas Augner * Removed empty parameter Co-authored-by: Claas Augner * Fix for other locale * Revert "Fix for other locale" This reverts commit 2e7b836b3a4fbbbe4d0150e14e4e55f4f75f9c04. * Fixed for other locale, without idea files * Removed invalid quote * Changed 100% to 1200px * Removed quotes Co-authored-by: Claas Augner --- files/ja/web/css/vertical-align/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/vertical-align/index.md b/files/ja/web/css/vertical-align/index.md index 5ae9631f82..4f69ef7e47 100644 --- a/files/ja/web/css/vertical-align/index.md +++ b/files/ja/web/css/vertical-align/index.md @@ -174,7 +174,7 @@ p { #### 結果 -{{EmbedLiveSample("Vertical_alignment_in_a_line_box", '100%', 160, "", "")}} +{{EmbedLiveSample("Vertical_alignment_in_a_line_box", 1200, 160)}}

表のセル内での垂直方向の配置

@@ -218,7 +218,7 @@ td { #### 結果 -{{EmbedLiveSample("Vertical_alignment_in_a_table_cell", '100%', 230, "", "")}} +{{EmbedLiveSample("Vertical_alignment_in_a_table_cell", 1200, 230)}} ## 仕様書 -- cgit v1.2.3-54-g00ecf From 72682e1b971ccc935a318a232c68474a7c24a5a2 Mon Sep 17 00:00:00 2001 From: graycat27 <64903817+graycat27@users.noreply.github.com> Date: Wed, 2 Mar 2022 22:54:08 +0900 Subject: fix missed letter --- files/ja/web/css/--_star_/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/--_star_/index.html b/files/ja/web/css/--_star_/index.html index 1b8bcff3d6..0003863aff 100644 --- a/files/ja/web/css/--_star_/index.html +++ b/files/ja/web/css/--_star_/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/--* --- {{CSSRef}} -`--` の接頭辞が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 {{cssxref("var()")}} 関数を用いて他の宣言の中で使用することができる値を持ちます。 +接頭辞`--`が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 {{cssxref("var()")}} 関数を用いて他の宣言の中で使用することができる値を持ちます。 カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。 @@ -36,7 +36,7 @@ translation_of: Web/CSS/--* ## 例 -### HTM +### HTML ```html

この段落は青色の背景で黄色のテキストとなります。

-- cgit v1.2.3-54-g00ecf From adbd42a4e466e24bc462955b954224ae9961911f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 12 Mar 2022 21:10:56 +0900 Subject: Update files/ja/web/css/--_star_/index.html --- files/ja/web/css/--_star_/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/--_star_/index.html b/files/ja/web/css/--_star_/index.html index 0003863aff..35e6f15e2b 100644 --- a/files/ja/web/css/--_star_/index.html +++ b/files/ja/web/css/--_star_/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/--* --- {{CSSRef}} -接頭辞`--`が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 {{cssxref("var()")}} 関数を用いて他の宣言の中で使用することができる値を持ちます。 +接頭辞 `--` が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 {{cssxref("var()")}} 関数を用いて他の宣言の中で使用することができる値を持ちます。 カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。 -- cgit v1.2.3-54-g00ecf From 1030ed38751a61a0dac77020abd80960e3cdc5ab Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 7 Mar 2022 23:52:11 +0900 Subject: 2021/08/13 時点の英語版に基づき新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/-webkit-mask-box-image/index.md | 96 ++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 files/ja/web/css/-webkit-mask-box-image/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/-webkit-mask-box-image/index.md b/files/ja/web/css/-webkit-mask-box-image/index.md new file mode 100644 index 0000000000..f222e7438e --- /dev/null +++ b/files/ja/web/css/-webkit-mask-box-image/index.md @@ -0,0 +1,96 @@ +--- +title: '-webkit-mask-box-image' +slug: Web/CSS/-webkit-mask-box-image +tags: + - CSS + - レイアウト + - 標準外 + - リファレンス + - ウェブ + - recipe:css-property +browser-compat: css.properties.-webkit-mask-box-image +translation_of: Web/CSS/-webkit-mask-box-image +--- +{{ CSSRef() }} {{ Non-standard_header() }} + +`-webkit-mask-box-image` はマスク画像を要素の境界ボックスに設定します。 + +- {{ Xref_cssinitial() }}: なし +- 適用先: すべての要素 +- {{ Xref_cssinherited() }}: なし +- メディア: {{ Xref_cssvisual() }} +- {{ Xref_csscomputed() }}: 指定通り + +## 構文 + +``` +-webkit-mask-box-image: [ ] +``` + +ここで、 + +- \ + - : `{{cssxref("url()", "<uri>")}} | | none` +- \ \ \ \ + - : ` | ` +- \ \ + - : `repeat | stretch | round | space` + +### 値 + +- \ + - : マスク画像として使用する画像リソースの位置です。 +- \ + - : マスク画像として使用する `-webkit-gradient` 関数です。 +- none + - : 境界ボックスにマスク画像がないことを示すために使用します。 +- \ + - : マスク画像のオフセットの大きさです。利用可能な単位は {{cssxref("<length>")}} を参照してください。 +- \ + - : マスク画像のオフセットで、境界ボックスの対応する長さ（幅または高さ）に対するパーセント値です。 +- repeat + - : マスク画像は、境界ボックスの範囲に必要な回数だけ繰り返されます。マスク画像が境界ボックスに均等に配置できない場合は、部分画像を含むことがあります。 +- stretch + - : マスク画像は、境界ボックスを正確に含むように引き伸ばされます。 +- round + - : マスク画像は多少引き伸ばされ、教秋ボックスの端にマスク画像の一部が残らないように繰り返されます。 +- space + - : マスク画像は引き伸ばされることなく何度でも繰り返されます。境界ボックスの端に、部分的なマスク画像は置かれません。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{CSSSyntax}} + +## 例 + +### 画像の設定 + +```css +.exampleone { + -webkit-mask-box-image: url('mask.png'); +} +``` + +### 画僧のオフセットと塗りつぶし + +```css +.exampletwo { + -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round; +} +``` + +## 仕様書 + +Not part of any standard. + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +{{ cssxref("mask") }}, {{ cssxref("mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("mask-clip") }},{{ cssxref("mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("mask-repeat") }} -- cgit v1.2.3-54-g00ecf From 4af74fec5971d772e69741c47447d84c18d723b4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 7 Mar 2022 23:30:00 +0900 Subject: 2021/08/13 時点の英語版に基づき新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/-webkit-mask-attachment/index.md | 79 +++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 files/ja/web/css/-webkit-mask-attachment/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/-webkit-mask-attachment/index.md b/files/ja/web/css/-webkit-mask-attachment/index.md new file mode 100644 index 0000000000..edc1430043 --- /dev/null +++ b/files/ja/web/css/-webkit-mask-attachment/index.md @@ -0,0 +1,79 @@ +--- +title: '-webkit-mask-attachment' +slug: Web/CSS/-webkit-mask-attachment +tags: + - CSS + - CSS プロパティ + - レイアウト + - 標準外 + - リファレンス + - ウェブ + - recipe:css-property +browser-compat: css.properties.-webkit-mask-attachment +translation_of: Web/CSS/-webkit-mask-attachment +--- +{{CSSRef}}{{Non-standard_Header}} + +{{CSSxRef("mask-image")}} が指定されている場合、 `-webkit-mask-attachment` はそのマスク画像の位置をビューポート内で固定するか、それとも包含ブロックと共にスクロールするかを指定します。 + +```css +/* キーワード値 */ +-webkit-mask-attachment: scroll; +-webkit-mask-attachment: fixed; +-webkit-mask-attachment: local; + +/* 複数の値 */ +-webkit-mask-attachment: scroll, local; +-webkit-mask-attachment: fixed, local, scroll; + +/* グローバル値 */ +-webkit-mask-attachment: inherit; +-webkit-mask-attachment: initial; +-webkit-mask-attachment: unset; +``` + +## 構文 + +### 値 + +- scroll + - : `scroll` が指定された場合、マスク画像はマスク画像を含むブロックと共にビューポート内でスクロールします。 +- fixed + - : `fixed` が指定された場合、マスク画像は包含する要素と共にスクロールせず、ビューポート内の一定の場所に残ります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{CSSSyntax}} + +## 例 + +### ビューポートにマスク画像を固定 + +```css +body { + -webkit-mask-image: url('images/mask.png'); + -webkit-mask-attachment: fixed; +} +``` + +## 仕様書 + +Not part of any standard. + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("mask")}} +- {{CSSxRef("mask-clip")}} +- {{CSSxRef("-webkit-mask-box-image")}} +- {{CSSxRef("mask-origin")}} +- {{CSSxRef("mask-image")}} +- {{CSSxRef("-webkit-mask-composite")}} +- {{CSSxRef("mask-repeat")}} -- cgit v1.2.3-54-g00ecf From f6d4b23757db2b420a122edfa170d72d3302a7fe Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 8 Mar 2022 00:03:50 +0900 Subject: WebKit 独自のプロパティを移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/-webkit-text-stroke-color/index.html | 108 ------------------- .../ja/web/css/-webkit-text-stroke-color/index.md | 108 +++++++++++++++++++ .../web/css/-webkit-text-stroke-width/index.html | 119 --------------------- .../ja/web/css/-webkit-text-stroke-width/index.md | 119 +++++++++++++++++++++ files/ja/web/css/-webkit-touch-callout/index.html | 61 ----------- files/ja/web/css/-webkit-touch-callout/index.md | 61 +++++++++++ 6 files changed, 288 insertions(+), 288 deletions(-) delete mode 100644 files/ja/web/css/-webkit-text-stroke-color/index.html create mode 100644 files/ja/web/css/-webkit-text-stroke-color/index.md delete mode 100644 files/ja/web/css/-webkit-text-stroke-width/index.html create mode 100644 files/ja/web/css/-webkit-text-stroke-width/index.md delete mode 100644 files/ja/web/css/-webkit-touch-callout/index.html create mode 100644 files/ja/web/css/-webkit-touch-callout/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/-webkit-text-stroke-color/index.html b/files/ja/web/css/-webkit-text-stroke-color/index.html deleted file mode 100644 index b327da4d76..0000000000 --- a/files/ja/web/css/-webkit-text-stroke-color/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: '-webkit-text-stroke-color' -slug: Web/CSS/-webkit-text-stroke-color -tags: - - CSS - - CSS プロパティ - - Non-standard - - Reference - - WebKit 拡張 - - 標準外 -translation_of: Web/CSS/-webkit-text-stroke-color ---- -
{{CSSRef}}{{Non-standard_header}}
- -

-webkit-text-stroke-color は {{Glossary("CSS")}} のプロパティで、テキストの文字の角の色を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。

- -
/* <color> 値 */
--webkit-text-stroke-color: red;
--webkit-text-stroke-color: #e08ab4;
--webkit-text-stroke-color: rgb(200, 100, 0);
-
-/* グローバル値 */
--webkit-text-stroke-color: inherit;
--webkit-text-stroke-color: initial;
--webkit-text-stroke-color: unset;
-
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
<color>
-
角の色。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML コンテンツ

- -
<p>Text with stroke</p>
-<input type="color" value="#ff0000">
- -

CSS コンテンツ

- -
p {
-  margin: 0;
-  font-size: 4em;
-  -webkit-text-stroke-width: 3px;
-  -webkit-text-stroke-color: #ff0000; /* ライブサンプルで変更可能 */
-}
-
- - - -

{{EmbedLiveSample("Example", "500px", "100px")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}{{Spec2('Compat')}}初回標準化
Safari CSS Reference
- 文書内の '-webkit-text-stroke-color'		標準外で非公式の文書化初回文書化
- -

ブラウザーの互換性

- -

{{Compat("css.properties.-webkit-text-stroke-color")}}

- -

関連情報

- - diff --git a/files/ja/web/css/-webkit-text-stroke-color/index.md b/files/ja/web/css/-webkit-text-stroke-color/index.md new file mode 100644 index 0000000000..b327da4d76 --- /dev/null +++ b/files/ja/web/css/-webkit-text-stroke-color/index.md @@ -0,0 +1,108 @@ +--- +title: '-webkit-text-stroke-color' +slug: Web/CSS/-webkit-text-stroke-color +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - WebKit 拡張 + - 標準外 +translation_of: Web/CSS/-webkit-text-stroke-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-text-stroke-color は {{Glossary("CSS")}} のプロパティで、テキストの文字の角の色を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。

+ +
/* <color> 値 */
+-webkit-text-stroke-color: red;
+-webkit-text-stroke-color: #e08ab4;
+-webkit-text-stroke-color: rgb(200, 100, 0);
+
+/* グローバル値 */
+-webkit-text-stroke-color: inherit;
+-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
<color>
+
角の色。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML コンテンツ

+ +
<p>Text with stroke</p>
+<input type="color" value="#ff0000">
+ +

CSS コンテンツ

+ +
p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-width: 3px;
+  -webkit-text-stroke-color: #ff0000; /* ライブサンプルで変更可能 */
+}
+
+ + + +

{{EmbedLiveSample("Example", "500px", "100px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}{{Spec2('Compat')}}初回標準化
Safari CSS Reference
+ 文書内の '-webkit-text-stroke-color'		標準外で非公式の文書化初回文書化
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.-webkit-text-stroke-color")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-webkit-text-stroke-width/index.html b/files/ja/web/css/-webkit-text-stroke-width/index.html deleted file mode 100644 index e8e39b12a0..0000000000 --- a/files/ja/web/css/-webkit-text-stroke-width/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: '-webkit-text-stroke-width' -slug: Web/CSS/-webkit-text-stroke-width -tags: - - CSS - - CSS プロパティ - - Non-standard - - Reference - - WebKit - - WebKit 拡張 - - 標準外 -translation_of: Web/CSS/-webkit-text-stroke-width ---- -
{{CSSRef}}{{Non-standard_header}}
- -

-webkit-text-stroke-width は CSS のプロパティで、テキストの角の太さを指定します。

- -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
--webkit-text-stroke-width: thin;
--webkit-text-stroke-width: medium;
--webkit-text-stroke-width: thick;
-
-/* <length> 値 */
--webkit-text-stroke-width: 2px;
--webkit-text-stroke-width: 0.1em;
--webkit-text-stroke-width: 1mm;
--webkit-text-stroke-width: 5pt;
-
-/* グローバル値 */
--webkit-text-stroke-width: inherit;
--webkit-text-stroke-width: initial;
--webkit-text-stroke-width: unset;
-
- -

値

- -
-
<line-width>
-
角の太さ。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

CSS コンテンツ

- -
p {
-  margin: 0;
-  font-size: 4em;
-  -webkit-text-stroke-color: red;
-}
-
-#thin {
-  -webkit-text-stroke-width: thin;
-}
-
-#medium {
-  -webkit-text-stroke-width: 3px;
-}
-
-#thick {
-  -webkit-text-stroke-width: 1.5mm;
-}
-
- -

HTML コンテンツ

- -
<p id="thin">Thin stroke</p>
-<p id="medium">Medium stroke</p>
-<p id="thick">Thick stroke</p>
-
- -

{{EmbedLiveSample("Example", "450px", "230px")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}{{Spec2('Compat')}}初回標準化
Safari CSS Reference
- 文書内の '-webkit-text-stroke-width'		標準外で非公式の文書化初回文書化
- -

ブラウザーの互換性

- -

{{Compat("css.properties.-webkit-text-stroke-width")}}

- -

関連情報

- - diff --git a/files/ja/web/css/-webkit-text-stroke-width/index.md b/files/ja/web/css/-webkit-text-stroke-width/index.md new file mode 100644 index 0000000000..e8e39b12a0 --- /dev/null +++ b/files/ja/web/css/-webkit-text-stroke-width/index.md @@ -0,0 +1,119 @@ +--- +title: '-webkit-text-stroke-width' +slug: Web/CSS/-webkit-text-stroke-width +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - WebKit + - WebKit 拡張 + - 標準外 +translation_of: Web/CSS/-webkit-text-stroke-width +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-text-stroke-width は CSS のプロパティで、テキストの角の太さを指定します。

+ +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+-webkit-text-stroke-width: thin;
+-webkit-text-stroke-width: medium;
+-webkit-text-stroke-width: thick;
+
+/* <length> 値 */
+-webkit-text-stroke-width: 2px;
+-webkit-text-stroke-width: 0.1em;
+-webkit-text-stroke-width: 1mm;
+-webkit-text-stroke-width: 5pt;
+
+/* グローバル値 */
+-webkit-text-stroke-width: inherit;
+-webkit-text-stroke-width: initial;
+-webkit-text-stroke-width: unset;
+
+ +

値

+ +
+
<line-width>
+
角の太さ。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

CSS コンテンツ

+ +
p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-color: red;
+}
+
+#thin {
+  -webkit-text-stroke-width: thin;
+}
+
+#medium {
+  -webkit-text-stroke-width: 3px;
+}
+
+#thick {
+  -webkit-text-stroke-width: 1.5mm;
+}
+
+ +

HTML コンテンツ

+ +
<p id="thin">Thin stroke</p>
+<p id="medium">Medium stroke</p>
+<p id="thick">Thick stroke</p>
+
+ +

{{EmbedLiveSample("Example", "450px", "230px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}{{Spec2('Compat')}}初回標準化
Safari CSS Reference
+ 文書内の '-webkit-text-stroke-width'		標準外で非公式の文書化初回文書化
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.-webkit-text-stroke-width")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-webkit-touch-callout/index.html b/files/ja/web/css/-webkit-touch-callout/index.html deleted file mode 100644 index dbfa2c699b..0000000000 --- a/files/ja/web/css/-webkit-touch-callout/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: '-webkit-touch-callout' -slug: Web/CSS/-webkit-touch-callout -tags: - - CSS - - CSS プロパティ - - Non-standard - - Reference - - WebKit 拡張 - - 'recipe:css-property' - - リファレンス - - レイアウト - - 標準外 -translation_of: Web/CSS/-webkit-touch-callout ---- -
{{CSSRef}}{{Non-standard_header}}
- -

CSS の -webkit-touch-callout プロパティは、対象を長押しすることで現れるコールアウト表示を制御します。

- -

iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティはそういった挙動を無効にすることを可能にします。

- -
/* キーワード値 */
--webkit-touch-callout: default;
--webkit-touch-callout: none;
-
-/* グローバル値 */
--webkit-touch-callout: initial;
--webkit-touch-callout: inherit;
--webkit-touch-callout: unset;
- -

構文

- -

値

- -
-
default
-
既定のコールアウトが表示されます。
-
none
-
コールアウト表示が無効になります。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
.example {
-  -webkit-touch-callout: none;
-}
-
- -

仕様書

- -

どの仕様書でも定義されていません。

- -

Apple は Safari CSS リファレンス に説明を載せています。

- -

ブラウザーの互換性

- -

{{Compat("css.properties.-webkit-touch-callout")}}

diff --git a/files/ja/web/css/-webkit-touch-callout/index.md b/files/ja/web/css/-webkit-touch-callout/index.md new file mode 100644 index 0000000000..dbfa2c699b --- /dev/null +++ b/files/ja/web/css/-webkit-touch-callout/index.md @@ -0,0 +1,61 @@ +--- +title: '-webkit-touch-callout' +slug: Web/CSS/-webkit-touch-callout +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - WebKit 拡張 + - 'recipe:css-property' + - リファレンス + - レイアウト + - 標準外 +translation_of: Web/CSS/-webkit-touch-callout +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

CSS の -webkit-touch-callout プロパティは、対象を長押しすることで現れるコールアウト表示を制御します。

+ +

iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティはそういった挙動を無効にすることを可能にします。

+ +
/* キーワード値 */
+-webkit-touch-callout: default;
+-webkit-touch-callout: none;
+
+/* グローバル値 */
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;
+ +

構文

+ +

値

+ +
+
default
+
既定のコールアウトが表示されます。
+
none
+
コールアウト表示が無効になります。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
.example {
+  -webkit-touch-callout: none;
+}
+
+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

Apple は Safari CSS リファレンス に説明を載せています。

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.-webkit-touch-callout")}}

-- cgit v1.2.3-54-g00ecf From f465736494c77f022062f8c76d1f329888be8824 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 8 Mar 2022 00:13:02 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/-webkit-text-stroke-color/index.md | 122 +++++++++------------ .../ja/web/css/-webkit-text-stroke-width/index.md | 122 +++++++++------------ files/ja/web/css/-webkit-touch-callout/index.md | 64 ++++++----- 3 files changed, 143 insertions(+), 165 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/-webkit-text-stroke-color/index.md b/files/ja/web/css/-webkit-text-stroke-color/index.md index b327da4d76..fcbd845d11 100644 --- a/files/ja/web/css/-webkit-text-stroke-color/index.md +++ b/files/ja/web/css/-webkit-text-stroke-color/index.md @@ -4,17 +4,19 @@ slug: Web/CSS/-webkit-text-stroke-color tags: - CSS - CSS プロパティ - - Non-standard - - Reference - - WebKit 拡張 - 標準外 + - リファレンス + - WebKit + - recipe:css-property +browser-compat: css.properties.-webkit-text-stroke-color translation_of: Web/CSS/-webkit-text-stroke-color --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

-webkit-text-stroke-color は {{Glossary("CSS")}} のプロパティで、テキストの文字の角の色を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。

+**`-webkit-text-stroke-color`** は CSS のプロパティで、テキストの文字の線の[色](/ja/docs/Web/CSS/color_value)を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。 -
/* <color> 値 */
+```css
+/*  値 */
 -webkit-text-stroke-color: red;
 -webkit-text-stroke-color: #e08ab4;
 -webkit-text-stroke-color: rgb(200, 100, 0);
@@ -23,86 +25,68 @@ translation_of: Web/CSS/-webkit-text-stroke-color
 -webkit-text-stroke-color: inherit;
 -webkit-text-stroke-color: initial;
 -webkit-text-stroke-color: unset;
-
+``` -

{{cssinfo}}

+## 構文 -

構文

+### 値 -

値

+ `` + - : 線の色。 -
-
<color>
-
角の色。
-
+## 公式定義 -

形式文法

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

例

+## 例 + +### 角の色を変化させる -

HTML コンテンツ

+#### HTML -
<p>Text with stroke</p>
-<input type="color" value="#ff0000">
+```html +

Text with stroke

+ +``` -

CSS コンテンツ

+#### CSS -
p {
+```css
+p {
   margin: 0;
   font-size: 4em;
   -webkit-text-stroke-width: 3px;
   -webkit-text-stroke-color: #ff0000; /* ライブサンプルで変更可能 */
 }
-
- - - -

{{EmbedLiveSample("Example", "500px", "100px")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}{{Spec2('Compat')}}初回標準化
Safari CSS Reference
- 文書内の '-webkit-text-stroke-color'		標準外で非公式の文書化初回文書化
- -

ブラウザーの互換性

- -

{{Compat("css.properties.-webkit-text-stroke-color")}}

- -

関連情報

- - +}); +``` + +#### 結果 + +{{EmbedLiveSample("Varying_the_stroke_color", "500px", "100px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Surfin' Safari blog post announcing this feature](https://www.webkit.org/blog/85/introducing-text-stroke/) +- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/) +- {{cssxref("-webkit-text-fill-color")}} +- {{cssxref("-webkit-text-stroke-width")}} +- {{cssxref("-webkit-text-stroke")}} diff --git a/files/ja/web/css/-webkit-text-stroke-width/index.md b/files/ja/web/css/-webkit-text-stroke-width/index.md index e8e39b12a0..799ff056b6 100644 --- a/files/ja/web/css/-webkit-text-stroke-width/index.md +++ b/files/ja/web/css/-webkit-text-stroke-width/index.md @@ -4,22 +4,21 @@ slug: Web/CSS/-webkit-text-stroke-width tags: - CSS - CSS プロパティ - - Non-standard - - Reference - - WebKit - - WebKit 拡張 - 標準外 + - リファレンス + - WebKit + - recipe:css-property +browser-compat: css.properties.-webkit-text-stroke-width translation_of: Web/CSS/-webkit-text-stroke-width --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

-webkit-text-stroke-width は CSS のプロパティで、テキストの角の太さを指定します。

+**`-webkit-text-stroke-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキストの線の太さを指定します。 -

{{cssinfo}}

+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 -webkit-text-stroke-width: thin;
 -webkit-text-stroke-width: medium;
 -webkit-text-stroke-width: thick;
@@ -34,24 +33,29 @@ translation_of: Web/CSS/-webkit-text-stroke-width
 -webkit-text-stroke-width: inherit;
 -webkit-text-stroke-width: initial;
 -webkit-text-stroke-width: unset;
-
+``` + +### 値 -

値

+- `` + - : 線の太さ。 -
-
<line-width>
-
角の太さ。
-
+## 公式定義 -

形式文法

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

例

+## 例 + +### 線の幅を変更 -

CSS コンテンツ

+#### CSS -
p {
+```css
+p {
   margin: 0;
   font-size: 4em;
   -webkit-text-stroke-color: red;
@@ -68,52 +72,32 @@ translation_of: Web/CSS/-webkit-text-stroke-width
 #thick {
   -webkit-text-stroke-width: 1.5mm;
 }
-
- -

HTML コンテンツ

- -
<p id="thin">Thin stroke</p>
-<p id="medium">Medium stroke</p>
-<p id="thick">Thick stroke</p>
-
- -

{{EmbedLiveSample("Example", "450px", "230px")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}{{Spec2('Compat')}}初回標準化
Safari CSS Reference
- 文書内の '-webkit-text-stroke-width'		標準外で非公式の文書化初回文書化
- -

ブラウザーの互換性

- -

{{Compat("css.properties.-webkit-text-stroke-width")}}

- -

関連情報

- - +``` + +#### HTML + +```html +

Thin stroke

+

Medium stroke

+

Thick stroke

+``` + +#### 結果 + +{{EmbedLiveSample("Varying_stroke_widths", "450px", "230px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Surfin' Safari blog post announcing this feature](https://www.webkit.org/blog/85/introducing-text-stroke/) +- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/) +- {{cssxref("-webkit-text-stroke-color")}} +- {{cssxref("-webkit-text-stroke")}} +- {{cssxref("-webkit-text-fill-color")}} diff --git a/files/ja/web/css/-webkit-touch-callout/index.md b/files/ja/web/css/-webkit-touch-callout/index.md index dbfa2c699b..897bc197f8 100644 --- a/files/ja/web/css/-webkit-touch-callout/index.md +++ b/files/ja/web/css/-webkit-touch-callout/index.md @@ -4,58 +4,68 @@ slug: Web/CSS/-webkit-touch-callout tags: - CSS - CSS プロパティ - - Non-standard - - Reference - - WebKit 拡張 - - 'recipe:css-property' - - リファレンス - レイアウト + - NeedsLiveSample - 標準外 + - リファレンス + - WebKit + - recipe:css-property +browser-compat: css.properties.-webkit-touch-callout translation_of: Web/CSS/-webkit-touch-callout --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

CSS の -webkit-touch-callout プロパティは、対象を長押しすることで現れるコールアウト表示を制御します。

+`-webkit-touch-callout` は [CSS](/ja/docs/Web/CSS) のプロパティで、対象を長押しすることで現れるコールアウト表示を制御します。 -

iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティはそういった挙動を無効にすることを可能にします。

+iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティではそういった挙動を無効にすることができます。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 -webkit-touch-callout: default;
 -webkit-touch-callout: none;
 
 /* グローバル値 */
 -webkit-touch-callout: initial;
 -webkit-touch-callout: inherit;
--webkit-touch-callout: unset;
+-webkit-touch-callout: unset; +``` + +## 構文 -

構文

+### 値 -

値

+- `default` + - : 既定のコールアウトが表示されます。 +- `none` + - : コールアウト表示が無効になります。 -
-
default
-
既定のコールアウトが表示されます。
-
none
-
コールアウト表示が無効になります。
-
+## 公式定義 -

形式文法

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

例

+## 例 + +### タッチ時のコールアウトをオフにする -
.example {
+```css
+.example {
   -webkit-touch-callout: none;
 }
-
+``` + +## 仕様書 -

仕様書

+どの仕様書でも定義されていません。 Apple は [Safari CSS リファレンス](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout) に説明を載せています。 -

どの仕様書でも定義されていません。

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

Apple は Safari CSS リファレンス に説明を載せています。

+{{Compat}} -

ブラウザーの互換性

+## 関連情報 -

{{Compat("css.properties.-webkit-touch-callout")}}

+- [WebKit CSS 拡張](/en-US/docs/Web/CSS/WebKit_Extensions) +- [Apple の開発者ドキュメントにおける -webkit-touch-callout](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout) -- cgit v1.2.3-54-g00ecf From 54e4e3b4d64247fe726921526aec48180c35a466 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 8 Mar 2022 00:44:51 +0900 Subject: 2021/08/13 時点の英語版に基づき新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/-webkit-text-stroke/index.md | 94 +++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 files/ja/web/css/-webkit-text-stroke/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/-webkit-text-stroke/index.md b/files/ja/web/css/-webkit-text-stroke/index.md new file mode 100644 index 0000000000..1d4d700b96 --- /dev/null +++ b/files/ja/web/css/-webkit-text-stroke/index.md @@ -0,0 +1,94 @@ +--- +title: '-webkit-text-stroke' +slug: Web/CSS/-webkit-text-stroke +tags: + - CSS + - CSS プロパティ + - 標準外 + - リファレンス + - WebKit + - recipe:css-shorthand-property +browser-compat: css.properties.-webkit-text-stroke +translation_of: Web/CSS/-webkit-text-stroke +--- +{{CSSRef}}{{Non-standard_header}} + +**`-webkit-text-stroke`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキスト文字の輪郭線の[幅](/ja/docs/Web/CSS/length)と[色](/ja/docs/Web/CSS/color_value)を指定します。これは個別指定プロパティ {{cssxref("-webkit-text-stroke-width")}} および {{cssxref("-webkit-text-stroke-color")}} の一括指定プロパティです。 + +```css +/* 幅と色の値 */ +-webkit-text-stroke: 4px navy; +text-stroke: 4px navy; + +/* グローバル値 */ +-webkit-text-stroke: inherit; +-webkit-text-stroke: initial; +-webkit-text-stroke: unset; +text-stroke: inherit; +text-stroke: initial; +text-stroke: unset; +``` + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`-webkit-text-stroke-color`](/ja/docs/Web/CSS/-webkit-text-stroke-color) +- [`-webkit-text-stroke-width`](/ja/docs/Web/CSS/-webkit-text-stroke-width) + +## 構文 + +### 値 + +- {{cssxref("<length>")}} + - : 輪郭線の幅です。 +- {{cssxref("<color>")}} + - : 輪郭線の色です。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### テキストに赤い輪郭線を追加 + +#### HTML + +```html +

このテキストの輪郭線は赤です。

+``` + +#### CSS + +```css +#example { + font-size: 3em; + margin: 0; + -webkit-text-stroke: 2px red; +} +``` + +#### 結果 + +{{EmbedLiveSample("Adding_a_red_text_stroke", 600, 60)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Surfin' Safari blog post announcing this feature](https://www.webkit.org/blog/85/introducing-text-stroke/) +- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/) +- {{cssxref("-webkit-text-stroke-width")}} +- {{cssxref("-webkit-text-stroke-color")}} +- {{cssxref("-webkit-text-fill-color")}} -- cgit v1.2.3-54-g00ecf From 5d7888c25114590886f2eea0c8fe0d81e7dc5b16 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 8 Mar 2022 01:58:53 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../using_feature_queries/index.md | 118 +++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 files/ja/web/css/css_conditional_rules/using_feature_queries/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/css_conditional_rules/using_feature_queries/index.md b/files/ja/web/css/css_conditional_rules/using_feature_queries/index.md new file mode 100644 index 0000000000..c164fb5ca5 --- /dev/null +++ b/files/ja/web/css/css_conditional_rules/using_feature_queries/index.md @@ -0,0 +1,118 @@ +--- +title: 機能クエリーの使用 +slug: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries +tags: + - CSS + - 条件付き CSS + - ガイド + - 機能クエリー + - プログレッシブエンハンスメント +--- +{{CSSRef}} + +**機能クエリー**は、 CSS の [@supports](/ja/docs/Web/CSS/@supports) アットルールを使って作成され、ウェブ開発者がある機能に対応しているかどうかを検査し、その検査結果に基づいて実行する CSS を提供する方法として有益です。このガイドでは、機能クエリを使用してプログレッシブエンハンスメントを実装する方法を学びます。 + +## 構文 + +CSS の機能クエリーは [CSS 条件付きルールモジュール](https://drafts.csswg.org/css-conditional-3/)の一部で、ここにはメディアクエリーの [@media](/ja/docs/Web/CSS/@media) ルールも含まれてます。機能クエリーを使用すると、メディアクエリーと同様の動作をすることが分かると思います。違いは、メディアクエリーではウェブページが動作している環境について何かを検査するのに対し、機能クエリーでは CSS 機能に対するブラウザーの対応状況を検査する点です。 + +機能クエリは `@supports` ルールと、それに続く検査したいプロパティ名と値から構成されます。 `display` のようなプロパティ名だけでは検査できません。ルールにはプロパティ名と値が必要です。 + +```css +@supports (property: value) { + 適用する CSS ルール +} +``` + +例えば、あるブラウザーが `row-gap` プロパティに対応しているかどうかを確認したい場合、次のような機能クエリーを記述します。多くの場合は、どの値を使用しても問題ありません。ブラウザーがこのプロパティに対応しているかどうかを確認したいだけであれば、有効な値であればどのような値でもかまいません。 + +{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}} + +特定のプロパティの新しい値を検査する場合は、プロパティと値の組の値の部分がより重要になります。良い例は `display` プロパティでしょう。すべてのブラウザーは `display` に対応しており、`display: block` は CSS1 にまでさかのぼります。しかし、 `display: flex` と `display: grid` はもっと新しい値です。 CSS ではプロパティに追加の値を指定することがよくあるので、プロパティと値を検査するということは、これらの値に対応しているかどうかを検出することができることを意味します。 + +## 対応がないかどうかを検査 + +ブラウザーが機能に対応しているかどうかを尋ねる場合のほか、 `not` キーワードを追加することで逆の検査を行うことができます。 + +```css +@supports not (property: value) { + CSS rules to apply +} +``` + +以下の例の機能クエリー内の CSS は、ブラウザーが `row-gap` に対応していない場合に実行されます。 + +{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}} + +## 複数の機能を検査 + +機能クエリーで、複数のプロパティに対応していることを検査必要がある場合があります。そのような場合は、`and` キーワードで区切って、検査する機能の一覧を記述します。 + +```css +@supports (property1: value) and (property2: value) { + CSS rules to apply +} +``` + +例えば、実行したい CSS が、ブラウザーが CSS シェイプと CSS グリッドに対応していることを必要とする場合、この 2 つを検査するルールを作成することができます。次のルールは、ブラウザーが `shape-outside: circle()` と `display: grid` の両方に対応している場合にのみ true を返します。 + +{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}} + +`or` を使用することもできます。これは選択したもののうち 1 つが一致した場合に CSS を有効にすることができます。 + +```css +@supports (property1: value) or (property2: value) { + CSS rules to apply +} +``` + +これは、ある機能がベンダー接頭辞付きである場合に特に有用で、標準のプロパティとベンダー接頭辞を加えたものを検査することができます。 + +{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}} + +## 機能クエリーの制限 + +`@support` ルールは、ブラウザーが 1 つ以上のプロパティと値の組を解釈できるかどうか、つまり、その機能に対応していると主張するかどうかを確認するために使用します。もしブラウザーがそのプロパティと値のペアを理解できれば、肯定的な応答を返します。したがって、ブラウザーがある機能に正しく、バグなく対応しているかどうかを確認するために、機能クエリーを使用することはできないのです。 + +さらに、機能クエリーはは「部分的な実装」を検査することもできません。この良い例が `gap` プロパティです。CSS グリッドに対応しているすべてのブラウザーは、 CSS グリッドの `gap` に対応していますが、フレックスボックスの `gap` に対応しているのは Firefox だけです。フレックスボックスで使いたいからと `gap` プロパティを検査「すると、実装されていないにもかかわらず肯定的な回答を得ることになります。 + +## プログレッシブエンハンスメントのための機能クエリーの使い方 + +機能クエリーは、サイトを段階的に拡張していく際に非常に有効なツールです。すべてのブラウザーに対して適切なソリューションを提供し、より新しい機能に対応しているブラウザーにはより高度なソリューションを提供することができます。 + +しかし、機能クエリーに対応していないブラウザーもあれば、使いたい機能に対応していないブラウザーもあります。例えば、 IE11 で対応していない CSS グリッドを使いたいとします。 IE11 は機能クエリーにも対応していないので、未対応のブラウザーをチェックして代替策を作ることはできません。しかし、実際には、プログレッシブエンハンスメントに機能クエリーを使用する場合、これは重要ではありません。ただし、未対応ブラウザー用の CSS を記述し、それを機能クエリー内の CSS で上書きするようにするなど、一定の方法で CSS を構成する必要があります。 + +それでは、上記のような方法で機能クエリーを使用する、とても簡単な例を見ていきましょう。 + +例えば、 3 つのボックスが並んだレイアウトを作りたい場合、理想的には[CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)を使いたいところです。しかし、古いブラウザーのためのレイアウトでは、浮動要素を使ったレイアウトにしたいとします。まずはその浮動レイアウトを以下のコードで作成しすると、 3 列にすることができます。 + +{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}} + +ブラウザーは CSS のプロパティや値を理解できない場合、それを無視します。そこで、 CSS グリッドを使ってレイアウトを強化することから始めるとよいでしょう。グリッドに対応していないブラウザーは、 `display` プロパティの `grid` の値を無視します。浮動アイテムがグリッドアイテムになると、浮動は取り除かれます。詳細は、[古いブラウザーの対応](/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)を参照してください。そのため、グリッド版は浮動のものを上書きすればよいのです。 + +しかし、浮動されたアイテムを 3 列で表示するために使用した `width` プロパティが原因で問題が発生しました。これは、現在、浮動の場合のようにコンテナーの幅ではなく、カラムトラックの幅としてグリッドに解釈されます。 + +{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}} + +必要なのは、 `display: grid` に対応している場合に、 width を削除する方法です。これはまさに機能クエリーが解決する状況です。グリッドに対応している場合、 `width` を `auto` に戻すことができます。 + +{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}} + +上記のシナリオでは、 IE11 が機能クエリーや CSS グリッドに対応していなくても問題ありません。浮動版はどの場合でも適用され、グリッドに対応しているブラウザーではそれが上書きされm佐生。 + +上記のコードを記述する別の方法として、以下のようにグリッドのコードをすべて機能クエリーでラップすることができます。 + +{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}} + +この場合、コードが少し増えるかもしれませんが、プロパティ名や値名の綴りを故意に間違えることで、代替策をテストできるという利点があります。上記のライブサンプルでは、 `@supports` ルールの `display: grid` を `display: grip` などに変更すると試すことができます。 + +## まとめ + +機能クエリーは、古いブラウザーで使用されているサイトの表示をよりシンプルに強化することで、新しい機能の利用を開始するのに役立ちます。対応ブラウザー用の CSS をまとめることができるため、上記のグリッドの例のように、代替表示用のスタイルが漏れてしまうリスクもありません。 + +### 関連情報 + +- [@supports](/ja/docs/Web/CSS/@supports) ルール +- レイアウトの学習: [古いブラウザーの対応](/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [CSS グリッドレイアウトとプログレッシブエンハンスメント](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) +- [CSS での機能クエリーの使用](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) -- cgit v1.2.3-54-g00ecf From b56a9195070c06b00cfb1ad6a1a89c92870647b5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 8 Mar 2022 02:39:23 +0900 Subject: 2022/02/03 時点の英語版に基づき新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation-timeline/index.md | 120 +++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 files/ja/web/css/animation-timeline/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/animation-timeline/index.md b/files/ja/web/css/animation-timeline/index.md new file mode 100644 index 0000000000..1058e73a91 --- /dev/null +++ b/files/ja/web/css/animation-timeline/index.md @@ -0,0 +1,120 @@ +--- +title: animation-timeline +slug: Web/CSS/animation-timeline +tags: + - CSS + - CSS アニメーション + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.animation-timeline +translation_of: Web/CSS/animation-timeline +--- +{{CSSRef}} + +**`animation-timeline`** は [CSS](/ja/docs/Web/CSS) のプロパティで、この要素に適用されるスクロールアニメーションを記述する 1 つ以上の {{cssxref("@scroll-timeline")}} アットルールの名前を指定します。 + + + +ふつうはすべてのアニメーションプロパティを一度に設定する一括指定プロパティの {{cssxref("animation")}} を使用したほうが便利です。 + +## 構文 + +```css +/* 単一のアニメーション */ +animation-timeline: none; +animation-timeline: test_05; +animation-timeline: -specific; +animation-timeline: sliding-vertically; + +/* 複数のアニメーション */ +animation-timeline: test1, animation4; +animation-timeline: none, -moz-specific, sliding; + +/* グローバル値 */ +animation-timeline: initial; +animation-timeline: inherit; +animation-timeline: revert; +animation-timeline: unset; +``` + +### 値 + +- `auto` + - : アニメーションのタイムラインはこの文書の既定の [DocumentTimeline](/ja/docs/Web/API/DocumentTimeline) です。 +- `none` + - : アニメーションはタイムラインに関連付けられません。 +- `` + - : スクロールタイムラインを識別する {{cssxref('custom-ident')}} または文字列で、 {{cssxref('@scroll-timeline')}} ルールで宣言されているものです。 2 つ以上のスクロールタイムラインが同じ名前であった場合、カスケード中で最後に宣言されたものが使用されます。一致するスクロールタイムラインがなければ、アニメーションはタイムラインに関連付けられません。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 単純な例 + +`squareTimeline` という名前のスクロールタイムラインが宣言されており、 `#square` 要素に `animation-timeline: squareTimeline` を用いて適用されています。 + +#### HTML + +```html +
+
+
+``` + +#### CSS + +```css +#container { + height: 300px; +} + +#square { + background-color: deeppink; + width: 100px; height: 100px; + margin-top: 100px; + animation-name: rotateAnimation; + animation-duration: 3s; + animation-direction: alternate; + animation-timeline: squareTimeline; +} + +@scroll-timeline squareTimeline { + source: selector('#container'); + orientation: "vertical"; + scroll-offsets: 0px, 300px; +} + +@keyframes rotateAnimation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +``` + +#### 結果 + +{{EmbedLiveSample("Simple example")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- [@scroll-timeline アットルール](/ja/docs/Web/CSS/@scroll-timeline) -- cgit v1.2.3-54-g00ecf From 9f73c2b06d46db98ca68cee367dbd8764da8a603 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 8 Mar 2022 23:31:36 +0900 Subject: 2022/02/18 時点の英語版に基づき新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@scroll-timeline/index.md | 177 +++++++++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 files/ja/web/css/@scroll-timeline/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/@scroll-timeline/index.md b/files/ja/web/css/@scroll-timeline/index.md new file mode 100644 index 0000000000..15d3aadc9e --- /dev/null +++ b/files/ja/web/css/@scroll-timeline/index.md @@ -0,0 +1,177 @@ +--- +title: "@scroll-timeline" +slug: Web/CSS/@scroll-timeline +tags: + - アニメーション + - スクロール + - アットルール + - CSS + - リファレンス +browser-compat: css.at-rules.scroll-timeline +--- + +{{CSSRef}} + +**`@scroll-timeline`** は CSS の[アットルール](/ja/docs/Web/CSS/At-rule)で、分や秒ではなく、スクロールコンテナー内のスクロールの進行状況によって時間値を決定する [`AnimationTimeline`](/ja/docs/Web/API/AnimationTimeline) を定義するものです。アニメーションタイムラインは [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations) と `animation-timeline` プロパティによってと関連付けられます。 + +## 構文 + +```css +@scroll-timeline moveTimeline { + source: auto; + orientation: vertical; + scroll-offsets: 0px, 500px; +} +``` + +### 値 + +- {{cssxref("custom-ident")}} + + - : スクロールタイムラインを識別する名前です。この名前はスクロールタイムラインを [`animation-timeline`](/ja/docs/Web/CSS/animation-timeline) プロパティで指定する際に使用されます。 + +- `source` + + - : スクロール可能な要素で、そのスクロール位置がタイムラインの進捗を駆動します。以下のいずれかになります。 + + - `auto` + + - : 現在のグローバル [Window オブジェクト](/ja/docs/Web/API/Window) に関連付けられた `Document` です。 + + - `selector("id-selector")` + + - : 要素の id で識別されるスクロールコンテナーです。 + + - `none` + - : スクロールコンテナーが指定されていません。 + +- `orientation` + + - : スクロールタイムラインの向きです。 + + - `auto` + + - : 既定の `vertical` となります。 + + - `block` + + - : 書字方向に応じて、ブロック軸に沿ったスクロール位置を使用します。 + + - `inline` + + - : 書字方向に応じて、インライン軸に沿ったスクロール位置を使用します。 + + - `horizontal` + + - : 書字方向に関係なく、水平スクロール位置を使用します。 + + - `vertical` + - : 書字方向に関係なく、垂直スクロール位置を使用します。 + +- `scroll-offsets` + + - : スクロールタイムラインのスクロールオフセットを指定します。 + + - `none` + - : スクロールオフセットを指定しません。 + - `` + - : カンマで区切った [``](/ja/docs/Web/CSS/length-percentage) 値のリストです。 + - `` + - : スクロールオフセットを定める要素の位置です。offset. + +## 解説 + +スクロールタイムラインを使用するには、 `@scroll-timeline` ルールを作成します。これは {{cssxref("animation-timeline")}} プロパティによって、アニメーションのタイムラインをそのタイムライン宣言と照合するために使われます。 + +それぞれの `@scroll-timeline` ルールには、スクロールタイムラインのソース、方向、スクロールオフセットを決定するためのプロパティが含まれています。 + +### スクロールオフセット + +`scroll-offset` プロパティは、スクロールの中でアニメーションが発生する場所を決定します。これは、 3 つの方法のうちの 1 つで設定することができます。 + +1. CSS のキーワード `none` を使用します。これは `scroll-offset` が指定されないことを意味します。 + +2. [``](/ja/docs/Web/CSS/length-percentage) の値のカンマ区切りのリストで決定します。それぞれの値は {{cssxref('animation-duration')}} に対して対応付けされます。例えば、 `animation-duration` が `2s` で、スクロールオフセットが `0px, 30px, 100px` に設定されている場合、 1s ではスクロールオフセットは 30px となります。通常、スムーズなスクロールアニメーションのためには、ここで `0px, 100px` のような 2 つの値を使用します。 + +3. スクロールオフセットを決定する 3 つ目の方法は、要素のオフセットを使用することです。これは、ページ内の要素を指定し、その位置によってスクロールタイムラインを決定し、その要素のどの端を使用するかを決定することを意味します。要素の指定は `selector()` 関数で行い、関数は要素の id を受け取ります。エッジはキーワード `start` または `end` によって決定されます。オプションで `0–1` の間の閾値を指定することができます。これは、 `source` に表示される要素のうち、どの程度の割合で表示されるかを表します。 + +```css +@scroll-timeline element-move { + source: auto; + orientation: vertical; + scroll-offsets: selector(#myElement) start 0, selector(#myElement) end 0; +} +``` + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 単純な例 + +この例では、コンテナーが垂直方向にスクロールされると回転する正方形を表示します。スクロールできるように、高さが固定された要素 (`#container`) を作成します。これが `source` 要素です。 + +このコンテナーの中に、別の要素 (`#square`) を作成します。この要素は正方形のように見えるように適切なスタイルが設定されています。この要素には、 {{cssxref('@keyframes')}} ルールと `animation-name` プロパティを使用して、回転アニメーションを適用しています。 + +`@scroll-timeline` を `squareTimeline` という名前で作成し、`source` をコンテナー、`orientation` を `vertical` 、`scroll-offset` を `0px` から `300px` （コンテナーの高さ）までに設定しています。そして、`scroll-timeline` プロパティを使用して、これを正方形に適用します。 + +#### HTML + +```html +
+
+
+``` + +#### CSS + +```css +#container { + height: 300px; +} + +#square { + background-color: deeppink; + width: 100px; + height: 100px; + margin-top: 100px; + animation-name: rotateAnimation; + animation-duration: 3s; + animation-direction: alternate; + animation-timeline: squareTimeline; +} + +@scroll-timeline squareTimeline { + source: selector("#container"); + orientation: "vertical"; + scroll-offsets: 0px, 300px; +} + +@keyframes rotateAnimation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +``` + +#### 結果 + +{{EmbedLiveSample("Simple_example")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations) +- [Practical use cases for scroll-linked animations in CSS with scroll timelines](https://css-tricks.com/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines/) -- cgit v1.2.3-54-g00ecf From a1ca0166bd40e265c2b660720d13ef5b3cfecf10 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 9 Mar 2022 00:16:48 +0900 Subject: 2021/08/13 時点の英語版に基づき新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@property/syntax/index.md | 110 +++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 files/ja/web/css/@property/syntax/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/@property/syntax/index.md b/files/ja/web/css/@property/syntax/index.md new file mode 100644 index 0000000000..7e19e59df1 --- /dev/null +++ b/files/ja/web/css/@property/syntax/index.md @@ -0,0 +1,110 @@ +--- +title: syntax +slug: Web/CSS/@property/syntax +tags: + - CSS + - リファレンス + - ウェブ + - プロパティ + - Houdini +browser-compat: css.at-rules.property.syntax +translation_of: Web/CSS/@property/syntax +--- +{{CSSRef}}{{SeeCompatTable}} + +**`syntax`** は [CSS](/ja/docs/Web/CSS) の記述子で、 {{cssxref("@property")}} [アットルール](/ja/docs/Web/CSS/At-rule)を使用する上で必要であり、そのプロパティで許可される構文を記述します。 + +## 構文 + +以下のものはすべて、有効な構文の文字列です。 + +```css +syntax: ''; /* 色を受け入れる */ + +syntax: ' | '; /* 長さまたはパーセント値を受け入れるが、両者を組み合わせた calc 式は受け入れない */ + +syntax: 'small | medium | large'; /* カスタム識別子で設定されたこれらの値の何れかを受け入れる */ + +syntax: '*'; /* 常に有効なトークン */ +``` + +## 値 + +仕様で定義されている対応する構文を持つ文字列。対応する構文は [CSS 型](/ja/docs/Web/CSS/CSS_Types)のサブセットです。これらは一緒に使うこともできますし、いくつかの型を組み合わせて使うこともできます。 + +- `""` + - : あらゆる有効な {{cssxref("<length>")}} の値です。 +- `""` + - : あらゆる有効な {{cssxref("<number>")}} の値です。 +- `""` + - : あらゆる有効な {{cssxref("<percentage>")}} の値です。 +- `""` + - : あらゆる有効な {{cssxref("<length-percentage>")}} の値です。 +- `""` + - : あらゆる有効な {{cssxref("<color>")}} の値です。 +- `""` + - : あらゆる有効な {{cssxref("<image>")}} の値です。 +- `""` + - : あらゆる有効な {{cssxref("url()","url()")}} の値です。 +- `""` + - : あらゆる有効な {{cssxref("<integer>")}} の値です。 +- `""` + - : あらゆる有効な {{cssxref("<angle>")}} の値です。 +- `"