diff options
Diffstat (limited to 'files/ja/web/css/text-shadow/index.md')
| -rw-r--r-- | files/ja/web/css/text-shadow/index.md | 158 |
1 files changed, 68 insertions, 90 deletions
diff --git a/files/ja/web/css/text-shadow/index.md b/files/ja/web/css/text-shadow/index.md index 1cfba9a47b..2810367e16 100644 --- a/files/ja/web/css/text-shadow/index.md +++ b/files/ja/web/css/text-shadow/index.md @@ -3,35 +3,29 @@ title: text-shadow slug: Web/CSS/text-shadow tags: - CSS - - CSS Property - - CSS Styles - - CSS Text Decoration + - CSS プロパティ - CSS スタイル - CSS テキスト装飾 - - CSS プロパティ - - HTML Colors - - HTML Styles - - HTML スタイル - HTML 色 + - HTML スタイル - Reference - - Styles - - Styling HTML - - color - - 'recipe:css-property' - スタイル + - HTML のスタイル付け + - color + - recipe:css-property +browser-compat: css.properties.text-shadow translation_of: Web/CSS/text-shadow --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>text-shadow</code></strong> は CSS のプロパティで、テキストに影を追加します。文字列及びその<code><a href="/ja/docs/Web/CSS/text-decoration">装飾</a></code>に適用される影のカンマで区切られたリストを受け付けます。</span>それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。</p> +**`text-shadow`** は CSS のプロパティで、テキストに影を追加します。文字列およびその装飾 ([`decoration`](/ja/docs/Web/CSS/text-decoration)) に適用される影のリストをカンマで区切ったリストで受け付けます。それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。 -<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div> +{{EmbedInteractiveExample("pages/css/text-shadow.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* offset-x | offset-y | blur-radius | color */ +```css +/* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-radius */ @@ -50,101 +44,85 @@ text-shadow: 5px 10px; /* グローバル値 */ text-shadow: inherit; text-shadow: initial; +text-shadow: revert; text-shadow: unset; -</pre> +``` -<p>このプロパティは、影のカンマで区切られたリストとして指定します。</p> +このプロパティは、影のカンマで区切られたリストとして指定します。 -<p>それぞれの影は2つ又は3つの <code><length></code> 値と、任意でその後に <code><color></code> 値を続けることで指定します。最初の2つの <code><length></code> 値は、 <code><offset-x></code> 及び <code><offset-y></code> の値です。3番目の <code><length></code> 値は、任意で、 <code><blur-radius></code> です。 <code><color></code> 値は影の色です。</p> +それぞれの影は 2 つまたは 3 つの `<length>` 値と、任意でその後に `<color>` 値を続けることで指定します。最初の 2 つの `<length>` 値は、 `<offset-x>` および `<offset-y>` の値です。3 番目の `<length>` 値は任意で `<blur-radius>` です。 `<color>` 値は影の色です。 -<p>複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。</p> +複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。 -<p>このプロパティは {{cssxref("::first-line")}} 及び {{cssxref("::first-letter")}} の両方の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>に適用されます。</p> +このプロパティは {{cssxref("::first-line")}} および {{cssxref("::first-letter")}} の両方の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)に適用されます。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を持つには、明示的に定義することが求められます。</dd> - <dt><code><offset-x> <offset-y></code></dt> - <dd>必須。これらの <code><length></code> 値はテキストに対する影のオフセットを指定します。 <code><offset-x></code> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <code><offset-y></code> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が <code>0</code> ならば、影はテキストの真後ろに配置されますが、 <code><blur-radius></code> の効果により一部だけが見えるかもしれません。</dd> - <dt><code><blur-radius></code></dt> - <dd>省略可。これは {{ cssxref("<length>") }} 値です。指定されなければ、既定では <code>0</code> になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。</dd> -</dl> +- {{cssxref("<color>")}} + - : 省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を保つために、明示的に定義することが求められます。 +- `<offset-x> <offset-y>` + - : 必須。これらの `<length>` 値はテキストに対する影のオフセットを指定します。 `<offset-x>` は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 `<offset-y>` は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が `0` ならば、影はテキストの真後ろに配置されますが、 `<blur-radius>` の効果により一部だけが見えるかもしれません。 +- `<blur-radius>` + - : 省略可。これは {{cssxref("<length>")}} 値です。指定されなければ、既定では `0` になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## Examples -<h3 id="Simple_shadow" name="Simple_shadow">単純な影</h3> +<h3 id="Simple_shadow">単純な影</h3> -<div> -<pre class="brush: css notranslate">.red-text-shadow { +```css +.red-text-shadow { text-shadow: red 0 -2px; -}</pre> +} +``` -<pre class="brush: html notranslate"><p class="red-text-shadow">Sed ut perspiciatis unde omnis iste +```html +<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, - totam rem aperiam, eaque ipsa quae ab illo inventore.</p></pre> -</div> + totam rem aperiam, eaque ipsa quae ab illo inventore.</p> +``` -<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p> +{{EmbedLiveSample('Simple_shadow', '660px', '90px')}} -<h3 id="Multiple_shadows" name="Multiple_shadows">複数の影</h3> +<h3 id="Multiple_shadows">複数の影</h3> -<div> -<pre class="brush:css notranslate">.white-text-with-blue-shadow { +```css +.white-text-with-blue-shadow { text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; color: white; font: 1.5em Georgia, serif; -}</pre> +} +``` -<pre class="brush: html notranslate"><p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste +```html +<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, - totam rem aperiam, eaque ipsa quae ab illo inventore.</p></pre> -</div> - -<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</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('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>CSS プロパティ <code>text-shadow</code> は <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">CSS2 で不適切に定義され</a>、 CSS2 (Level 1) で削除されました。 CSS Text Module Level 3 仕様で構文を改善しました。その後、 <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a> に移動しました。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-shadow")}}</p> - -<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3> - -<ul> - <li>Gecko には {{cssxref("transition")}} にバグがあり、色が指定された <code>text-shadow</code> から色が指定されていない <code>text-shadow</code> への移行が動作しません ({{bug(726550)}})。これは Firefox の新しいパラレル CSS エンジン (<a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> 又は <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> とも呼ばれ、 Firefox 57 でリリースされる予定です) で修正されています。</li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("box-shadow")}}</li> - <li>{{cssxref("<color>")}} データ型 (影の色を指定するため)</li> - <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li> -</ul> + totam rem aperiam, eaque ipsa quae ab illo inventore.</p> +``` + +{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +### Quantum CSS のメモ + +- Gecko には {{cssxref("transition")}} にバグがあり、色が指定された `text-shadow` から色が指定されていない `text-shadow` へのトランジションが動作しません ({{bug(726550)}})。これは Firefox の新しいパラレル CSS エンジン ([Quantum CSS](https://wiki.mozilla.org/Quantum) または [Stylo](https://wiki.mozilla.org/Quantum/Stylo) とも呼ばれ、 Firefox 57 でリリースされる予定です) で修正されています。 + +## 関連情報 + +- {{cssxref("box-shadow")}} +- {{cssxref("<color>")}} データ型 (影の色を指定するため) +- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) |