aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/css/text-shadow/index.html
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2021-10-08 01:29:38 +0900
committerMasahiro FUJIMOTO <mfujimot@gmail.com>2021-10-15 18:39:56 +0900
commit5968326af62c0f7cc1c46ca6c6cece37ec550ba1 (patch)
treefe6037e5475b7638f6c587d42899ce12402deddf /files/ja/web/css/text-shadow/index.html
parent6aec5015ee2337ef1cc5ecd8b4f14f4009e0e9fd (diff)
downloadtranslated-content-5968326af62c0f7cc1c46ca6c6cece37ec550ba1.tar.gz
translated-content-5968326af62c0f7cc1c46ca6c6cece37ec550ba1.tar.bz2
translated-content-5968326af62c0f7cc1c46ca6c6cece37ec550ba1.zip
CSS テキスト装飾関係のプロパティを変換準備
Diffstat (limited to 'files/ja/web/css/text-shadow/index.html')
-rw-r--r--files/ja/web/css/text-shadow/index.html150
1 files changed, 0 insertions, 150 deletions
diff --git a/files/ja/web/css/text-shadow/index.html b/files/ja/web/css/text-shadow/index.html
deleted file mode 100644
index 1cfba9a47b..0000000000
--- a/files/ja/web/css/text-shadow/index.html
+++ /dev/null
@@ -1,150 +0,0 @@
----
-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>
-
-{{csssyntax}}
-
-<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>
-
-<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>