diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-03-08 00:13:02 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-03-15 00:15:48 +0900 |
commit | f465736494c77f022062f8c76d1f329888be8824 (patch) | |
tree | c1f41138e022bd1a926dcec54627b85810247d90 /files/ja | |
parent | f6d4b23757db2b420a122edfa170d72d3302a7fe (diff) | |
download | translated-content-f465736494c77f022062f8c76d1f329888be8824.tar.gz translated-content-f465736494c77f022062f8c76d1f329888be8824.tar.bz2 translated-content-f465736494c77f022062f8c76d1f329888be8824.zip |
2021/08/13 時点の英語版に同期
Diffstat (limited to 'files/ja')
-rw-r--r-- | files/ja/web/css/-webkit-text-stroke-color/index.md | 122 | ||||
-rw-r--r-- | files/ja/web/css/-webkit-text-stroke-width/index.md | 122 | ||||
-rw-r--r-- | files/ja/web/css/-webkit-touch-callout/index.md | 64 |
3 files changed, 143 insertions, 165 deletions
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 --- -<div>{{CSSRef}}{{Non-standard_header}}</div> +{{CSSRef}}{{Non-standard_header}} -<p><strong><code>-webkit-text-stroke-color</code></strong> は {{Glossary("CSS")}} のプロパティで、テキストの文字の角の<a href="/ja/docs/Web/CSS/color_value">色</a>を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。</p> +**`-webkit-text-stroke-color`** は CSS のプロパティで、テキストの文字の線の[色](/ja/docs/Web/CSS/color_value)を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。 -<pre class="brush:css no-line-numbers notranslate">/* <color> 値 */ +```css +/* <color> 値 */ -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; -</pre> +``` -<p>{{cssinfo}}</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +### 値 -<h3 id="Values" name="Values">値</h3> + `<color>` + - : 線の色。 -<dl> - <dt><code><color></code></dt> - <dd>角の色。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +### 角の色を変化させる -<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> +#### HTML -<pre class="brush: html notranslate"><p>Text with stroke</p> -<input type="color" value="#ff0000"></pre> +```html +<p>Text with stroke</p> +<input type="color" value="#ff0000"> +``` -<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> +#### CSS -<pre class="brush: css notranslate">p { +```css +p { margin: 0; font-size: 4em; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #ff0000; /* ライブサンプルで変更可能 */ } -</pre> - -<div class="hidden"> -<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3> +``` -<pre class="brush: js notranslate">var colorPicker = document.querySelector("input"); +```js hidden +var colorPicker = document.querySelector("input"); colorPicker.addEventListener("change", function(evt) { document.querySelector("p").style.webkitTextStrokeColor = evt.target.value; -});</pre> -</div> - -<p>{{EmbedLiveSample("Example", "500px", "100px")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}</td> - <td>{{Spec2('Compat')}}</td> - <td>初回標準化</td> - </tr> - <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color" hreflang="en" lang="en">Safari CSS Reference<br> - <small>文書内の '-webkit-text-stroke-color'</small></a></td> - <td>標準外で非公式の文書化</td> - <td>初回文書化</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.-webkit-text-stroke-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li> - <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li> - <li>{{cssxref("-webkit-text-fill-color")}}</li> - <li>{{cssxref("-webkit-text-stroke-width")}}</li> - <li>{{cssxref("-webkit-text-stroke")}}</li> -</ul> +}); +``` + +#### 結果 + +{{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 --- -<div>{{CSSRef}}{{Non-standard_header}}</div> +{{CSSRef}}{{Non-standard_header}} -<p><strong><code>-webkit-text-stroke-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、テキストの角の太さを指定します。</p> +**`-webkit-text-stroke-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキストの線の太さを指定します。 -<p>{{cssinfo}}</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css notranslate">/* キーワード値 */ +```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; -</pre> +``` + +### 値 -<h3 id="Values" name="Values">値</h3> +- `<line-width>` + - : 線の太さ。 -<dl> - <dt><code><line-width></code></dt> - <dd>角の太さ。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +### 線の幅を変更 -<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> +#### CSS -<pre class="brush: css notranslate">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; } -</pre> - -<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> - -<pre class="brush: html notranslate"><p id="thin">Thin stroke</p> -<p id="medium">Medium stroke</p> -<p id="thick">Thick stroke</p> -</pre> - -<p>{{EmbedLiveSample("Example", "450px", "230px")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}</td> - <td>{{Spec2('Compat')}}</td> - <td>初回標準化</td> - </tr> - <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width" hreflang="en" lang="en">Safari CSS Reference<br> - <small>文書内の '-webkit-text-stroke-width'</small></a></td> - <td>標準外で非公式の文書化</td> - <td>初回文書化</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.-webkit-text-stroke-width")}}</p> - -<h2 id="See_Also" name="See_Also">関連情報</h2> - -<ul> - <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li> - <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li> - <li>{{cssxref("-webkit-text-stroke-color")}}</li> - <li>{{cssxref("-webkit-text-stroke")}}</li> - <li>{{cssxref("-webkit-text-fill-color")}}</li> -</ul> +``` + +#### HTML + +```html +<p id="thin">Thin stroke</p> +<p id="medium">Medium stroke</p> +<p id="thick">Thick stroke</p> +``` + +#### 結果 + +{{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 --- -<div>{{CSSRef}}{{Non-standard_header}}</div> +{{CSSRef}}{{Non-standard_header}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>-webkit-touch-callout</code> プロパティは、対象を長押しすることで現れるコールアウト表示を制御します。</p> +`-webkit-touch-callout` は [CSS](/ja/docs/Web/CSS) のプロパティで、対象を長押しすることで現れるコールアウト表示を制御します。 -<p>iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティはそういった挙動を無効にすることを可能にします。</p> +iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティではそういった挙動を無効にすることができます。 -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ -webkit-touch-callout: default; -webkit-touch-callout: none; /* グローバル値 */ -webkit-touch-callout: initial; -webkit-touch-callout: inherit; --webkit-touch-callout: unset;</pre> +-webkit-touch-callout: unset; +``` + +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +### 値 -<h3 id="Values" name="Values">値</h3> +- `default` + - : 既定のコールアウトが表示されます。 +- `none` + - : コールアウト表示が無効になります。 -<dl> - <dt><code>default</code></dt> - <dd>既定のコールアウトが表示されます。</dd> - <dt><code>none</code></dt> - <dd>コールアウト表示が無効になります。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 + +### タッチ時のコールアウトをオフにする -<pre class="brush: css notranslate">.example { +```css +.example { -webkit-touch-callout: none; } -</pre> +``` + +## 仕様書 -<h2 id="Specifications" name="Specifications">仕様書</h2> +どの仕様書でも定義されていません。 Apple は [Safari CSS リファレンス](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout) に説明を載せています。 -<p>どの仕様書でも定義されていません。</p> +## ブラウザーの互換性 -<p>Apple は <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">Safari CSS リファレンス</a> に説明を載せています。</p> +{{Compat}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## 関連情報 -<p>{{Compat("css.properties.-webkit-touch-callout")}}</p> +- [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) |