initial commit

1 files changed, 152 insertions, 0 deletions

diff --git a/files/ja/web/css/text-shadow/index.html b/files/ja/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..fdd7a81eba
--- /dev/null
+++ b/files/ja/web/css/text-shadow/index.html
@@ -0,0 +1,152 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+tags:
+  - CSS
+  - CSS Property
+  - CSS Styles
+  - CSS Text Decoration
+  - CSS スタイル
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - HTML Colors
+  - HTML Styles
+  - HTML スタイル
+  - HTML 色
+  - Reference
+  - Styles
+  - Styling HTML
+  - color
+  - 'recipe:css-property'
+  - スタイル
+translation_of: Web/CSS/text-shadow
+---
+<div>{{CSSRef}}</div>
+
+<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>
+
+<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div>
+
+<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 */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #fc0 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558abb;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* color および blur-radius は既定値を使用 */
+text-shadow: 5px 10px;
+
+/* グローバル値 */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+</pre>
+
+<p>このプロパティは、影のカンマで区切られたリストとして指定します。</p>
+
+<p>それぞれの影は2つ又は3つの <code>&lt;length&gt;</code> 値と、任意でその後に <code>&lt;color&gt;</code> 値を続けることで指定します。最初の2つの <code>&lt;length&gt;</code> 値は、 <code>&lt;offset-x&gt;</code> 及び <code>&lt;offset-y&gt;</code> の値です。3番目の <code>&lt;length&gt;</code> 値は、任意で、 <code>&lt;blur-radius&gt;</code> です。 <code>&lt;color&gt;</code> 値は影の色です。</p>
+
+<p>複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。</p>
+
+<p>このプロパティは {{cssxref("::first-line")}} 及び {{cssxref("::first-letter")}} の両方の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>に適用されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を持つには、明示的に定義することが求められます。</dd>
+ <dt><code>&lt;offset-x&gt; &lt;offset-y&gt;</code></dt>
+ <dd>必須。これらの <code>&lt;length&gt;</code> 値はテキストに対する影のオフセットを指定します。 <code>&lt;offset-x&gt;</code> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <code>&lt;offset-y&gt;</code> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が <code>0</code> ならば、影はテキストの真後ろに配置されますが、 <code>&lt;blur-radius&gt;</code> の効果により一部だけが見えるかもしれません。</dd>
+ <dt><code>&lt;blur-radius&gt;</code></dt>
+ <dd>省略可。これは {{ cssxref("&lt;length&gt;") }} 値です。指定されなければ、既定では <code>0</code> になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_shadow" name="Simple_shadow">単純な影</h3>
+
+<div>
+<pre class="brush: css notranslate">.red-text-shadow {
+  text-shadow: red 0 -2px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;p class="red-text-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p>
+
+<h3 id="Multiple_shadows" name="Multiple_shadows">複数の影</h3>
+
+<div>
+<pre class="brush:css notranslate">.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">&lt;p class="white-text-with-blue-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</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>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<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("&lt;color&gt;")}} データ型 (影の色を指定するため)</li>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li>
+</ul>