From 9d21b2eff5b3811540d818dce7f9d7df230ef2f3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 6 Dec 2021 00:26:05 +0900 Subject: 2021/12/05 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/-webkit-border-before/index.md | 101 +++++++++++++++++ files/ja/web/css/-webkit-box-reflect/index.md | 71 ++++++++++++ files/ja/web/css/-webkit-mask-composite/index.md | 99 +++++++++++++++++ files/ja/web/css/-webkit-mask-position-x/index.md | 90 ++++++++++++++++ files/ja/web/css/-webkit-mask-position-y/index.md | 90 ++++++++++++++++ files/ja/web/css/-webkit-mask-repeat-x/index.md | 96 +++++++++++++++++ files/ja/web/css/-webkit-mask-repeat-y/index.md | 96 +++++++++++++++++ .../ja/web/css/-webkit-overflow-scrolling/index.md | 80 +++++++------- .../ja/web/css/-webkit-print-color-adjust/index.md | 72 +++++++------ .../web/css/-webkit-tap-highlight-color/index.md | 46 +++++--- files/ja/web/css/-webkit-text-fill-color/index.md | 120 +++++++++------------ 11 files changed, 807 insertions(+), 154 deletions(-) create mode 100644 files/ja/web/css/-webkit-border-before/index.md create mode 100644 files/ja/web/css/-webkit-box-reflect/index.md create mode 100644 files/ja/web/css/-webkit-mask-composite/index.md create mode 100644 files/ja/web/css/-webkit-mask-position-x/index.md create mode 100644 files/ja/web/css/-webkit-mask-position-y/index.md create mode 100644 files/ja/web/css/-webkit-mask-repeat-x/index.md create mode 100644 files/ja/web/css/-webkit-mask-repeat-y/index.md diff --git a/files/ja/web/css/-webkit-border-before/index.md b/files/ja/web/css/-webkit-border-before/index.md new file mode 100644 index 0000000000..514facc03f --- /dev/null +++ b/files/ja/web/css/-webkit-border-before/index.md @@ -0,0 +1,101 @@ +--- +title: '-webkit-border-before' +slug: Web/CSS/-webkit-border-before +tags: + - '-webkit-border-before' + - CSS + - CSS プロパティ + - CSS:WebKit 拡張 + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-webkit-border-before +translation_of: Web/CSS/-webkit-border-before +--- +{{CSSRef}}{{Non-standard_header}} + +**`-webkit-border-before`** は [CSS](/ja/docs/Web/CSS) のプロパティで、個々の論理ブロックの境界の先頭側のプロパティ値をスタイルシートの一箇所で設定するための一括指定プロパティです。 + +```css +/* border の値 */ +-webkit-border-before: 1px; +-webkit-border-before: 2px dotted; +-webkit-border-before: medium dashed blue; + +/* グローバル値 */ +-webkit-border-before: inherit; +-webkit-border-before: initial; +-webkit-border-before: unset; +``` + +`-webkit-border-before` は {{cssxref("-webkit-border-before-width")}}, {{cssxref("-webkit-border-before-style")}}, {{cssxref("-webkit-border-before-color")}} のうちの 1 つ以上の値で設定することができます。これはその要素の書字方向やテキストの向きに応じて、物理的な境界に対応付けられます。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の各プロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に基づいて対応付けられます。 + +これは要素の他の境界を定義する {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, {{cssxref("-webkit-border-end")}} に関連しています。 + +このプロパティは {{cssxref("border-block-start")}} として標準化過程にあります。 + +## 構文 + +### 値 + +以下のものを 1 つ以上、任意の順で指定します。 + +- `<'border-width'>` + - : See {{cssxref("border-width")}} +- `<'border-style'>` + - : See {{cssxref("border-style")}} +- `<'color'>` + - : See {{cssxref("color")}} + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 縦書きテキストに境界を適用 + +#### HTML + +```html +
+

Example text

+
+``` + +#### CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + -webkit-border-before: 5px dashed blue; +} +``` + +#### 結果 + +{{EmbedLiveSample("Applying_a_border_with_vertical_text", 140, 140)}} + +## 仕様書 + +標準には含まれていませんが、標準化過程にある {{cssxref("border-block-start")}} プロパティに関連しています。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("border-block-start")}} +- 対応付けられる物理的プロパティ: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/-webkit-box-reflect/index.md b/files/ja/web/css/-webkit-box-reflect/index.md new file mode 100644 index 0000000000..7ebc18a83b --- /dev/null +++ b/files/ja/web/css/-webkit-box-reflect/index.md @@ -0,0 +1,71 @@ +--- +title: '-webkit-box-reflect' +slug: Web/CSS/-webkit-box-reflect +tags: + - '-webkit-box-reflect' + - CSS + - CSS プロパティ + - CSS:WebKit 拡張 + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-webkit-box-reflect +translation_of: Web/CSS/-webkit-box-reflect +--- +{{CSSRef}}{{Non-standard_Header}} + +**`-webkit-box-reflect`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の内容を特定の方向に反射させることができます。 + +```css +/* 方向の値 */ +-webkit-box-reflect: above; +-webkit-box-reflect: below; +-webkit-box-reflect: left; +-webkit-box-reflect: right; + +/* オフセット値 */ +-webkit-box-reflect: below 10px; + +/* マスク値 */ +-webkit-box-reflect: below 0 linear-gradient(transparent, white); + +/* グローバル値 */ +-webkit-box-reflect: inherit; +-webkit-box-reflect: initial; +-webkit-box-reflect: unset; +``` + +> **Warning:** この機能は**ウェブサイトで使うためのものではありません**。ウェブで反射効果を実現する上で、標準の方法は CSS の {{CSSxRef("element()", "element()")}} 関数を使用することです。 + +## 構文 + +### 値 + +- `above`_,_ `below`_,_ `right`_,_ `left` + - : どの方向に反射するかを示すキーワードです。 +- {{CSSxRef("<length>")}} + - : 反射の大きさを示します。 +- {{CSSxRef("<image>")}} + - : 反射に適用されるマスクを記述します。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{CSSSyntax}} + +## 仕様書 + +標準には含まれていません。反射効果を CSS で実現する標準の方法は、 CSS の {{CSSxRef("element()", "element()")}} 関数を使用することです。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- Apple の[ドキュメント](http://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16) +- Webkit の[仕様書](https://www.webkit.org/blog/182/css-reflections/). +- Lea Verou's article on reflection using [CSS features on the standard track](http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/). diff --git a/files/ja/web/css/-webkit-mask-composite/index.md b/files/ja/web/css/-webkit-mask-composite/index.md new file mode 100644 index 0000000000..3618774221 --- /dev/null +++ b/files/ja/web/css/-webkit-mask-composite/index.md @@ -0,0 +1,99 @@ +--- +title: '-webkit-mask-composite' +slug: Web/CSS/-webkit-mask-composite +tags: + - '-webkit-mask-composite' + - CSS + - CSS マスク + - CSS プロパティ + - CSS:WebKit 拡張 + - 標準外 + - リファレンス + - mask-composite + - recipe:css-property +browser-compat: css.properties.-webkit-mask-composite +translation_of: Web/CSS/-webkit-mask-composite +--- +{{CSSRef}}{{Non-standard_header}} + +**`webkit-mask-composite`** プロパティは、同じ要素に適用された複数のマスク画像を互いに合成する方法を指定します。マスク画像は、{{CSSxRef("-webkit-mask-image")}} プロパティで宣言された順序とは逆に合成されます。 + +```css +/* キーワード値 */ +-webkit-mask-composite: clear; +-webkit-mask-composite: copy; +-webkit-mask-composite: source-over; +-webkit-mask-composite: source-in; +-webkit-mask-composite: source-out; +-webkit-mask-composite: source-atop; +-webkit-mask-composite: destination-over; +-webkit-mask-composite: destination-in; +-webkit-mask-composite: destination-out; +-webkit-mask-composite: destination-atop; +-webkit-mask-composite: xor; + +/* グローバル値 */ +-webkit-mask-composite: inherit; +-webkit-mask-composite: initial; +-webkit-mask-composite: unset; +``` + +> **Note:** この標準外のプロパティの一部を別のキーワードでカバーする、標準化された {{CSSxRef("mask-composite")}} プロパティがあります。 + +## 構文 + +### 値 + +- `clear` + - : 元のマスク画像と合成用マスク画像の重なり合ったピクセルがクリアされます。 +- `copy` + - : コピー元のマスク画像をコピー先のマスク画像に置き換えます。 +- `source-over` + - : 元のマスク画像を合成用のマスク画像の上にレンダリングします。 +- `source-in` + - : 元のマスク画像と合成用マスク画像の重なり合ったピクセルが、元のマスク画像のピクセルで置き換えられ、それ以外のピクセルはクリアされます。 +- `source-out` + - : 元のマスク画像と合成用マスク画像の重なり合ったピクセルがクリアされ、元のマスク画像の残りのピクセルがすべてレンダリングされます。 +- `source-atop` + - : 合成用マスク画像のピクセルがレンダリングされます。元のマスク画像のピクセルは、合成用マスク画像の非透過部分と重なっている場合にのみレンダリングされます。これにより、元のマスク画像の効果はありません。 +- `destination-over` + - : 合成用マスク画像は、元のマスク画像の上にレンダリングされます。 +- `destination-in` + - : 元のマスク画像と合成用マスク画像で重複するピクセルは、合成用マスク画像のピクセルのままとなり、それ以外のピクセルはクリアされます。 +- `destination-out` + - : 元のマスク画像と合成用マスク画像の重なり合ったピクセルはクリアされ、元のマスク画像の残りのピクセルはすべてレンダリングされます。 +- `destination-atop` + - : 元のマスク画像のピクセルがレンダリングされます。合成用マスク画像のピクセルは、合成用マスク画像の非透過部分と重なっている場合にのみレンダリングされます。これにより、合成用マスク画像は何の影響も受けません。 +- `xor` + - : 元のマスク画像と合成用マスク画像の重なっているピクセルは、両者が完全に不透明であれば完全に透明になります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{CSSSyntax}} + +## 例 + +### XOR で合成する + +```css +.example { + -webkit-mask-image: url(mask1.png), url('mask2.png'); + -webkit-mask-composite: xor, source-over; +} +``` + +## 仕様書 + +標準には含まれていません。このプロパティは {{CSSxRef("mask-composite")}} として異なる値で定義されています。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("mask-composite")}} diff --git a/files/ja/web/css/-webkit-mask-position-x/index.md b/files/ja/web/css/-webkit-mask-position-x/index.md new file mode 100644 index 0000000000..0f529f3a3f --- /dev/null +++ b/files/ja/web/css/-webkit-mask-position-x/index.md @@ -0,0 +1,90 @@ +--- +title: '-webkit-mask-position-x' +slug: Web/CSS/-webkit-mask-position-x +tags: + - CSS + - CSS マスク + - CSS プロパティ + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-webkit-mask-position-x +translation_of: Web/CSS/-webkit-mask-position-x +--- +{{CSSRef}}{{Non-standard_header}} + +`-webkit-mask-position-x` は CSS のプロパティで、マスク画像の初期の水平方向の位置を設定します。 + +```css +/* キーワード値 */ +-webkit-mask-position-x: left; +-webkit-mask-position-x: center; +-webkit-mask-position-x: right; + +/* 値 */ +-webkit-mask-position-x: 100%; +-webkit-mask-position-x: -50%; + +/* 値 */ +-webkit-mask-position-x: 50px; +-webkit-mask-position-x: -1cm; + +/* 複数の値 */ +-webkit-mask-position-x: 50px, 25%, -3em; + +/* グローバル値 */ +-webkit-mask-position-x: inherit; +-webkit-mask-position-x: initial; +-webkit-mask-position-x: unset; +``` + +{{cssinfo}} + +## 構文 + +### 値 + +- `` + - : ボックスの左パディングの辺から見た画像の左端の位置を示す長さです。パーセント値の場合は、ボックスのパディング領域の水平方向の寸法に対して計算されます。つまり、 `0%` という値は、画像の左端がボックスの左パディングの辺と一致していることを意味し、`100%` という値は、画像の右端がボックスの右パディングの辺と一致していることを意味します。 +- **`left`** + - : `0%` と同等です。 +- **`center`** + - : `50%` と同等です。 +- **`right`** + - : `100%` と同等です。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### マスク画像の水平方向の位置指定 + +```css +.exampleOne { + -webkit-mask-image: url(mask.png); + -webkit-mask-position-x: right; +} + +.exampleTwo { + -webkit-mask-image: url(mask.png); + -webkit-mask-position-x: 25%; +} +``` + +## 仕様書 + +標準には含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-y")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}} diff --git a/files/ja/web/css/-webkit-mask-position-y/index.md b/files/ja/web/css/-webkit-mask-position-y/index.md new file mode 100644 index 0000000000..37f0300386 --- /dev/null +++ b/files/ja/web/css/-webkit-mask-position-y/index.md @@ -0,0 +1,90 @@ +--- +title: '-webkit-mask-position-y' +slug: Web/CSS/-webkit-mask-position-y +tags: + - CSS + - CSS マスク + - CSS プロパティ + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-webkit-mask-position-y +translation_of: Web/CSS/-webkit-mask-position-y +--- +{{CSSRef}}{{Non-standard_header}} + +`-webkit-mask-position-y` は CSS のプロパティで、マスク画像の初期の垂直方向の位置を設定します。 + +```css +/* キーワード値 */ +-webkit-mask-position-y: top; +-webkit-mask-position-y: center; +-webkit-mask-position-y: bottom; + +/* 値 */ +-webkit-mask-position-y: 100%; +-webkit-mask-position-y: -50%; + +/* 値 */ +-webkit-mask-position-y: 50px; +-webkit-mask-position-y: -1cm; + +/* 複数の値 */ +-webkit-mask-position-y: 50px, 25%, -3em; + +/* グローバル値 */ +-webkit-mask-position-y: inherit; +-webkit-mask-position-y: initial; +-webkit-mask-position-y: unset; +``` + +{{cssinfo}} + +## 構文 + +### 値 + +- `` + - : ボックスの上パディングの辺から見た画像の上端の位置を示す長さです。パーセント値の場合は、ボックスのパディング領域の垂直方向の寸法に対して計算されます。 `0%` という値は、画像の上端がボックスの上パディングの辺と一致していることを意味し、`100%` という値は、画像の下端がボックスの下パディングの辺と一致していることを意味します。 +- **`top`** + - : `0%` と同等です。 +- **`bottom`** + - : `100%` と同等です。 +- **`center`** + - : `50%` と同等です。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### マスク画像の垂直方向の位置指定 + +```css +.exampleOne { + -webkit-mask-image: url(mask.png); + -webkit-mask-position-y: bottom; +} + +.exampleTwo { + -webkit-mask-image: url(mask.png); + -webkit-mask-position-y: 25%; +} +``` + +## 仕様書 + +標準には含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-x")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}} diff --git a/files/ja/web/css/-webkit-mask-repeat-x/index.md b/files/ja/web/css/-webkit-mask-repeat-x/index.md new file mode 100644 index 0000000000..c06bcff298 --- /dev/null +++ b/files/ja/web/css/-webkit-mask-repeat-x/index.md @@ -0,0 +1,96 @@ +--- +title: '-webkit-mask-repeat-x' +slug: Web/CSS/-webkit-mask-repeat-x +tags: + - CSS + - CSS マスク + - CSS プロパティ + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-webkit-mask-repeat-x +translation_of: Web/CSS/-webkit-mask-repeat-x +--- +{{CSSRef}}{{Non-standard_header}} + +`-webkit-mask-repeat-x` プロパティは、マスク画像を水平方向に反復 (タイル) するかどうか、どのように反復するかを指定します。 + +```css +/* キーワード値 */ +-webkit-mask-repeat-x: repeat; +-webkit-mask-repeat-x: no-repeat; +-webkit-mask-repeat-x: space; +-webkit-mask-repeat-x: round; + +/* 複数の値 */ +-webkit-mask-repeat-x: repeat, no-repeat, space; + +/* グローバル値 */ +-webkit-mask-repeat-x: inherit; +-webkit-mask-repeat-x: initial; +-webkit-mask-repeat-x: unset; +``` + +## 構文 + +### 値 + +- repeat + - : マスク画像は水平方向と垂直方向の両方に反復されます。 +- no-repeat + - : マスク画像は反復されず、マスク画像のコピーが 1 つだけ描画されます。マスクされた要素の残りのコンテンツは表示されません。 +- repeat + - : マスク画像は水平方向と垂直方向の両方に反復されます。 +- space + - : 画像を切り取らないように、できる限り反復されます。最初と最後の画像は要素の両側に固定され、空白は画像の間に均等に分配されます。 {{cssxref("mask-position")}} プロパティは、切り取ることなく 1 つの画像しか表示できない場合を除き、無視されます。空白を使って切り取りが発生するのは、 1 枚の画像を表示するのに十分な空間がない場合だけです。 +- round + - : 許可された空間が大きくなると、反復して表示される画像は、次の画像を追加する空間ができるまで（隙間なく）伸びていきます。次の画像が追加されると、現在の画像はすべて圧縮されて空間が確保されます。例えば、元の幅が 260px の画像が 3 回繰り返されると、それぞれの繰り返しが 300px の幅になるまで引き伸ばされ、その後、別の画像が追加されます。その後、 225px に圧縮されます。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 反復あり・反復なしのマスク画像の使用 + +```css +.exampleone { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-x: repeat; +} + +.exampletwo { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-x: no-repeat; +} +``` + +### 複数のマスク画像の使用 + +マスク画像ごとに異なる `` の値を、カンマで区切って指定することができます。 + +```css +.examplethree { + -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-repeat-x: repeat, space; +} +``` + +各画像は、最初に指定されたものから最後に指定されたものまで、対応する反復スタイルに対応します。 + +## 仕様書 + +標準には含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-y")}} diff --git a/files/ja/web/css/-webkit-mask-repeat-y/index.md b/files/ja/web/css/-webkit-mask-repeat-y/index.md new file mode 100644 index 0000000000..82a3cc7114 --- /dev/null +++ b/files/ja/web/css/-webkit-mask-repeat-y/index.md @@ -0,0 +1,96 @@ +--- +title: '-webkit-mask-repeat-y' +slug: Web/CSS/-webkit-mask-repeat-y +tags: + - CSS + - CSS マスク + - CSS プロパティ + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-webkit-mask-repeat-y +translation_of: Web/CSS/-webkit-mask-repeat-y +--- +{{CSSRef}}{{Non-standard_header}} + +The `-webkit-mask-repeat-y` プロパティは、マスク画像を垂直方向に反復 (タイル) するかどうか、どのように反復するかを設定します。 + +```css +/* キーワード値 */ +-webkit-mask-repeat-y: repeat; +-webkit-mask-repeat-y: no-repeat; +-webkit-mask-repeat-y: space; +-webkit-mask-repeat-y: round; + +/* 複数の値 */ +-webkit-mask-repeat-y: repeat, no-repeat, space; + +/* グローバル値 */ +-webkit-mask-repeat-y: inherit; +-webkit-mask-repeat-y: initial; +-webkit-mask-repeat-y: unset; +``` + +## 構文 + +### 値 + +- repeat + - : マスク画像は垂直方向に反復されます。 +- no-repeat + - : マスク画像は垂直方向には反復されません。マスク画像のコピーが垂直方向に 1 つだけ描画されます。マスクされた要素の垂直方向に残ったコンテンツは表示されません。 +- repeat + - : マスク画像は垂直方向に反復されます。 +- space + - : 画像を切り取らないように、できる限り反復されます。最初と最後の画像は要素の上と下の辺に固定され、空白は画像の間に均等に分配されます。 {{cssxref("mask-position")}} プロパティは、切り取ることなく 1 つの画像しか表示できない場合を除き、無視されます。空白を使って切り取りが発生するのは、 1 枚の画像を表示するのに十分な空間がない場合だけです。 +- round + - : 許可された垂直方向の空間が大きくなると、反復して表示される画像は、次の画像を追加する空間ができるまで（隙間なく）伸びていきます。次の画像が追加されると、現在の画像はすべて圧縮されて空間が確保されます。例えば、元の高さが 260px の画像が 3 回繰り返されると、それぞれの繰り返しが 300px の高さになるまで引き伸ばされ、その後、別の画像が追加されます。その後、 225px の高さに圧縮されます。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 反復あり・反復なしのマスク画像の使用 + +```css +.exampleone { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-y: repeat; +} + +.exampletwo { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-y: no-repeat; +} +``` + +### 複数のマスク画像の使用 + +マスク画像ごとに異なる `` の値を、カンマで区切って指定することができます。 + +```css +.examplethree { + -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-repeat-y: repeat, space; +} +``` + +各画像は、最初に指定されたものから最後に指定されたものまで、対応する反復スタイルに対応します。 + +## 仕様書 + +標準には含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-x")}} diff --git a/files/ja/web/css/-webkit-overflow-scrolling/index.md b/files/ja/web/css/-webkit-overflow-scrolling/index.md index 9f5655ffa1..b7085ef5db 100644 --- a/files/ja/web/css/-webkit-overflow-scrolling/index.md +++ b/files/ja/web/css/-webkit-overflow-scrolling/index.md @@ -4,49 +4,54 @@ slug: Web/CSS/-webkit-overflow-scrolling tags: - CSS - CSS プロパティ - - Reference - - WebKit 拡張 - - リファレンス - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-webkit-overflow-scrolling translation_of: Web/CSS/-webkit-overflow-scrolling --- -
{{CSSRef}} {{Non-standard_header}}
+{{CSSRef}} {{Non-standard_header}} + +`-webkit-overflow-scrolling` は [CSS](/ja/docs/Web/CSS) のプロパティは、指定された要素で惰性付き (momentum-based) スクロールを使用するかどうかを制御します。 + +## 構文 -

-webkit-overflow-scrolling は CSS のプロパティは、指定された要素で惰性付き (momentum-based) のスクロールを使用するかどうかを制御します。

+### 値 -

{{cssinfo}}

+- `auto` + - : 「通常」のスクロールで、タッチパネルから指を離すとすぐにコンテンツはスクロールが停止します。 +- `touch` + - : 惰性付きのスクロールで、コンテンツはスクロールのジェスチャーが終了し、タッチパネルから指を離した後もスクロールを続けます。スクロールを続ける速度と期間は、スクロールのジェスチャーがどれだけすばやく行われたかによります。また、新しい重ね合わせコンテキストを生成します。 -

値

+## 公式定義 -
-
auto
-
「通常」のスクロールで、タッチパネルから指を離すとすぐにコンテンツはスクロールが停止します。
-
touch
-
惰性付きのスクロールで、コンテンツはスクロールのジェスチャーが終了し、タッチパネルから指を離した後もスクロールを続けます。スクロールを続ける速度と期間は、スクロールのジェスチャーがどれだけすばやく行われたかによります。また、新しい重ね合わせコンテキストを生成します。
-
+{{CSSInfo}} -

形式文法

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

例

+## 例 -

HTML

+### HTML -
<div class="scroll-touch">
-  <p>
+```html
+

+  

     This paragraph has momentum scrolling
-  </p>
-</div>
-<div class="scroll-auto">
-  <p>
+  

+

+

+  

     This paragraph does not.
-  </p>
-</div>
+

+ +``` -

CSS

+### CSS -
div {
+```css
+div {
   width: 100%;
   overflow: auto;
 }
@@ -65,23 +70,22 @@ p {
 .scroll-auto {
   -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample('Examples')}}

+{{EmbedLiveSample('Examples')}} -

仕様書

+## 仕様書 -

仕様書では定義されていません。 Apple には Safari CSS Reference に説明があります。

+仕様書では定義されていません。 Apple には [Safari CSS Reference に説明](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling)があります。 -

ブラウザーの互換性

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

{{Compat("css.properties.-webkit-overflow-scrolling")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [CSS-Tricks article with demo](https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/) +- [Smashing Magazine - describing the effect of scroll bouncing and how it works on different web browsers](https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/) +- [Safari 13 Release notes](https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes): すべてのフレームと `overflow:scroll` 要素に、一本指による高速スクロールの対応が追加され、`-webkit-overflow-scrolling: touch` を設定する必要がなくなったことを示しています。 diff --git a/files/ja/web/css/-webkit-print-color-adjust/index.md b/files/ja/web/css/-webkit-print-color-adjust/index.md index d2a39762fe..0683ceb290 100644 --- a/files/ja/web/css/-webkit-print-color-adjust/index.md +++ b/files/ja/web/css/-webkit-print-color-adjust/index.md @@ -3,17 +3,20 @@ title: '-webkit-print-color-adjust' slug: Web/CSS/-webkit-print-color-adjust tags: - CSS - - CSS Property - - Layout - - Non-standard - - Web + - CSS プロパティ + - レイアウト + - 標準外 + - ウェブ + - recipe:css-property +browser-compat: css.properties.-webkit-print-color-adjust translation_of: Web/CSS/-webkit-print-color-adjust --- -
{{CSSRef}}{{Non-standard_Header}}
+{{CSSRef}}{{Non-standard_header}} -

-webkit-print-color-adjust CSSプロパティは、プリント時に背景色・背景画像の表示を強制できるようにする、WebKitブラウザ上で使用できる非標準のCSSプロパティです。

+**`-webkit-print-color-adjust`** プロパティは標準外の CSS 拡張で、 WebKit ブラウザー上で印刷時に背景色や背景画像の表示を強制することができます。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 -webkit-print-color-adjust: economy;
 -webkit-print-color-adjust: exact;
 
@@ -21,44 +24,49 @@ translation_of: Web/CSS/-webkit-print-color-adjust
 -webkit-print-color-adjust: inherit;
 -webkit-print-color-adjust: initial;
 -webkit-print-color-adjust: unset;
-
+``` -

構文

+## 構文 -

The -webkit-print-color-adjust 以下のいずれかの値を持ちます。

+`-webkit-print-color-adjust` プロパティは以下のキーワード値のうちの一つで指定します。 -

値

+### 値 -
-
economy
-
初期値です。背景色・背景画像はユーザーが明示的にブラウザの設定で許可した場合のみプリントされます。
-
exact
-
この値が適用された要素の背景色・背景画像を強制的にプリントします。ユーザーのプリント設定を上書きます。
-
+- `economy` + - : 通常の動作です。背景色や背景画像は、ブラウザーの印刷設定ダイアログで、ユーザーが明示的に許可した場合のみ印刷されます。 +- `exact` + - : このルールが適用された要素の背景色や背景画像は常に印刷されます。ユーザーの印刷設定は上書きされます。 -

例

+## 公式定義 -
/* 黒地に白文字でプリントする */
+{{CSSInfo}}
+
+## 形式文法
+
+{{CSSSyntax}}
+
+## 例
+
+### 強制的に白黒で印刷する
+
+```css
 article {
   -webkit-print-color-adjust: exact;
   background: #222;
   color: #eee;
-}
- -

仕様書

- -

Not part of any specification yet, though there is a proposal in the CSSWG wiki to standardize it.

+} +``` -

ブラウザー実装状況

+## 仕様書 +まだ標準には含まれていませんが、標準化を行う[CSSWG wiki の提案](https://wiki.csswg.org/ideas/print-backgrounds)があります。 +## ブラウザーの互換性 -

{{Compat("css.properties.-webkit-print-color-adjust")}}

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • WebKit bug 64583: "WIP: Add CSS property to control printing of backgrounds for individual elements"
    • -
  • CSSWG wiki: print-backgrounds - a proposal to standardize this property
    • -
  • CSS Color Module Level 4:  the color-adjust property - a newer proposal to standardize this property
    • -
+- WebKit [bug 64583](https://bugs.webkit.org/show_bug.cgi?id=64583): "WIP: Add CSS property to control printing of backgrounds for individual elements" +- CSSWG wiki: [print-backgrounds](https://wiki.csswg.org/ideas/print-backgrounds) - このプロパティを標準化する提案 +- CSS Color Module Level 4: [`color-adjust`](https://drafts.csswg.org/css-color-4/#color-adjust) プロパティ - このプロパティの標準化のより新しい提案 diff --git a/files/ja/web/css/-webkit-tap-highlight-color/index.md b/files/ja/web/css/-webkit-tap-highlight-color/index.md index 9496a8d8da..41d8b11cb8 100644 --- a/files/ja/web/css/-webkit-tap-highlight-color/index.md +++ b/files/ja/web/css/-webkit-tap-highlight-color/index.md @@ -4,37 +4,51 @@ slug: Web/CSS/-webkit-tap-highlight-color tags: - CSS - CSS プロパティ - - Reference - - WebKit 拡張 + - リファレンス - 標準外 + - WebKit + - recipe:css-property +browser-compat: css.properties.-webkit-tap-highlight-color translation_of: Web/CSS/-webkit-tap-highlight-color --- -
{{ CSSRef() }}
+{{ CSSRef() }} -

{{ Non-standard_header() }}

+{{ Non-standard_header() }} -

-webkit-tap-highlight-color は CSS の標準外のプロパティで、リンクがタップされている間に表示される強調色を設定します。強調は、ユーザーがタップしたことが正常に認識されていることを示し、またどの要素がタップされているかを示します。

+**`-webkit-tap-highlight-color`** は CSS の標準外のプロパティで、リンクがタップされている間に表示される強調色を設定します。強調は、ユーザーがタップしたことが正常に認識されていることを示し、またどの要素がタップされているかを示します。 -
-webkit-tap-highlight-color: red;
+```css
+-webkit-tap-highlight-color: red;
 -webkit-tap-highlight-color: transparent; /* 強調をなくす */
-
+``` -

{{cssinfo}}

+## 構文 -

構文

+### 値 -

値

+{{Cssxref("<color>")}} です。 -

A {{Cssxref("color value")}}.

+## 公式定義 -

形式文法

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

仕様書

+## 仕様書 + +標準には含まれていません。 Apple では [Safari Web Content Guide での説明](https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5)があります。 + +## ブラウザーの互換性 + +{{Compat}} -

何れかの仕様書の一部ではありません。 Apple では Safari Web Content Guide での説明があります。

+## 関連情報 -

ブラウザーの対応

+- [WebKit CSS 拡張](/ja/docs/Web/CSS/WebKit_Extensions) +- 関連する CSS 擬似クラス: -

WebKit/Safari, Blink/Chrome, 一部のバージョンの Internet Explorer と Microsoft Edge が対応しています。

+ - [`:hover`](/ja/docs/Web/CSS/:hover) + - [`:active`](/ja/docs/Web/CSS/:active) + - [`:visited`](/ja/docs/Web/CSS/:visited) diff --git a/files/ja/web/css/-webkit-text-fill-color/index.md b/files/ja/web/css/-webkit-text-fill-color/index.md index ca4a868081..0b42973119 100644 --- a/files/ja/web/css/-webkit-text-fill-color/index.md +++ b/files/ja/web/css/-webkit-text-fill-color/index.md @@ -1,13 +1,21 @@ --- title: '-webkit-text-fill-color' slug: Web/CSS/-webkit-text-fill-color +tags: + - CSS + - CSS プロパティ + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-webkit-text-fill-color translation_of: Web/CSS/-webkit-text-fill-color --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

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

+`**-webkit-text-fill-color**` は CSS のプロパティで、テキストの文字の塗りつぶしの[色](/ja/docs/Web/CSS/color_value)を指定します。このプロパティが設定されていない場合、 {{cssxref("color")}} プロパティの値が使用されます。 -
/* <color> 値 */
+```css
+/*  値 */
 -webkit-text-fill-color: red;
 -webkit-text-fill-color: #000000;
 -webkit-text-fill-color: rgb(100, 200, 0);
@@ -16,83 +24,59 @@ translation_of: Web/CSS/-webkit-text-fill-color
 -webkit-text-fill-color: inherit;
 -webkit-text-fill-color: initial;
 -webkit-text-fill-color: unset;
-
+``` -

{{CSSInfo}}

+## 構文 -

構文

+### 値 -

値

+- `` + - : 要素のテキストコンテンツの文字表面の塗りつぶし色。 -
-
<color>
-
文字表面の塗りつぶし色。
-
+## 公式定義 -

形式構文

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

例

+## 例 -

色を変える

+### 塗りつぶし色の変更 -

CSS

+#### CSS -
p {
+```css
+p {
   margin: 0;
   font-size: 3em;
   -webkit-text-fill-color: green;
 }
-
- -

HTML

- -
<p>This text is green.</p>
-
- -

結果

- -

{{EmbedLiveSample("Changing_the_fill_color", "380px", "60px")}}

- -

仕様書

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

ブラウザの互換性

- - - -

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

- -

関連情報

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

This text is green.

+``` + +#### 結果 + +{{EmbedLiveSample("Changing_the_fill_color", "380px", "60px")}} + +## 仕様書 + +{{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-width")}} +- {{cssxref("-webkit-text-stroke")}} -- cgit v1.2.3-54-g00ecf