diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-08 01:29:38 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-15 18:39:56 +0900 |
commit | 5968326af62c0f7cc1c46ca6c6cece37ec550ba1 (patch) | |
tree | fe6037e5475b7638f6c587d42899ce12402deddf /files/ja/web/css/text-shadow/index.html | |
parent | 6aec5015ee2337ef1cc5ecd8b4f14f4009e0e9fd (diff) | |
download | translated-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.html | 150 |
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><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> - -<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("<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> - -<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"><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> - -<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"><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> |