aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2022-03-08 00:44:51 +0900
committerMasahiro FUJIMOTO <mfujimot@gmail.com>2022-03-15 00:16:01 +0900
commit54e4e3b4d64247fe726921526aec48180c35a466 (patch)
tree1b253cefa3508e1394b32a5efffb896099388d34
parentf465736494c77f022062f8c76d1f329888be8824 (diff)
downloadtranslated-content-54e4e3b4d64247fe726921526aec48180c35a466.tar.gz
translated-content-54e4e3b4d64247fe726921526aec48180c35a466.tar.bz2
translated-content-54e4e3b4d64247fe726921526aec48180c35a466.zip
2021/08/13 時点の英語版に基づき新規翻訳
-rw-r--r--files/ja/web/css/-webkit-text-stroke/index.md94
1 files changed, 94 insertions, 0 deletions
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("&lt;length&gt;")}}
+ - : 輪郭線の幅です。
+- {{cssxref("&lt;color&gt;")}}
+ - : 輪郭線の色です。
+
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+### テキストに赤い輪郭線を追加
+
+#### HTML
+
+```html
+<p id="example">このテキストの輪郭線は赤です。</p>
+```
+
+#### 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")}}