1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
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><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>
<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("<color>")}} データ型 (影の色を指定するため)</li>
<li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li>
</ul>
|
