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-text-fill-color/index.md | 120 ++++++++++------------ 1 file changed, 52 insertions(+), 68 deletions(-) (limited to 'files/ja/web/css/-webkit-text-fill-color') 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