text-shadow：文字に影をつける

X
f
LINE
B!
p

初期値	`none`
適用対象	全ての要素、`::first-letter`および`::first-line`
継承	する
アニメーション	影を構成する値のリスト
対応ブラウザ	caniuseで確認

text-shadowプロパティの説明

text-shadowは、文字に影をつけます。単純なドロップ・シャドウの他、装飾的な効果や複数の影の指定が可能です。

一つの影は、x座標とy座標のオフセット、ぼかし範囲、色の組み合わせで表します。それをカンマ区切りのリスト形式で複数指定することも可能です。

コンテンツのレイアウトやボックスの寸法には影響を与えないため、余白が足りない場合に途切れて見えたり、他の要素に重なってしまうことがあります。

text-shadowに指定できる値

<offset-x>: 影の水平方向の移動量を示す値です。使用できる構文は<length>を用いた長さを表す単位付きの数値です。テキストの表示位置を基準に、正の値であれば右方向へ、負の値であれば左方向へ影が移動します。この値は必須です。
<offset-y>: 影の垂直方向の移動量を示す値です。使用できる構文は<length>を用いた長さを表す単位付きの数値です。テキストの表示位置を基準に、正の値であれば下方向へ、負の値であれば上方向へ影が移動します。この値は必須です。
<blur-radius>: 影のぼかし半径を示す値です。使用できる構文は<length>を用いた長さを表す単位付きの数値で、正の値のみ有効です。影の表示位置を基準に、数値が大きくなるほど影は広く薄くなります。この値は省略可能です。
<color>: 影の色を示す値です。オフセット値の前か後ろに記述します。省略可能ですが、特別な理由がない限り指定することを推奨します。

text-shadowの使い方とサンプル

text-shadowプロパティの構文は以下の通りです。

CSS

/* offset-x | offset-y */
text-shadow: 3px 3px;

/* offset-x | offset-y | blur-radius */
text-shadow: 3px 3px 5px;

/* offset-x | offset-y | color */
text-shadow: 3px 3px #333;

/* offset-x | offset-y | blur-radius | color */
text-shadow: 3px 3px 5px #333;

/* color | offset-x | offset-y */
text-shadow: #333 3px 3px;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #333 3px 3px 5px;

/* グローバル値 */
text-shadow: inherit;
text-shadow: initial;
text-shadow: revert;
text-shadow: unset;

text-shadowの実例

それでは実際にtext-shadowプロパティの書き方を見ていきましょう。ドロップシャドウを使用する場合、ボックスの背景色や文字の色との組み合わせに気を配る必要があります。装飾にこだわった結果、可読性を損なうようであれば、コンテンツの価値が下がってしまいます。ユーザーの利便性を最優先にして装飾を行いましょう。

表示確認

CSS

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background: #fff;
}
section > h1 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
section > p {
	margin: 1rem 0 0;
}
.ts_1 p {
	text-shadow: 3px 3px;
}
.ts_2 p {
	text-shadow: 3px 3px 3px;
}
.ts_3 p {
	text-shadow: 3px 3px 5px #f00;
}
.ts_4 p {
	text-shadow: -3px -3px 0 #0cf;
}
.ts_5 p {
	text-shadow: 1px 1px 0 #0f0, 0 0 10px rgba(0, 0, 0, 0.5);
}
.ts_6 p {
	font-weight: bold;
	text-shadow: .1em .1em 0 #990, .2em .2em 0 #aa0, .3em .3em 0 #cc0;
}

HTML

<div class="samp_box">
	<section class="ts_1">
		<h1>text-shadow: 3px 3px;</h1>
		<p>ドロップシャドウの確認</p>
	</section>
	<section class="ts_2">
		<h1>text-shadow: 3px 3px 5px;</h1>
		<p>ドロップシャドウの確認</p>
	</section>
	<section class="ts_3">
		<h1>text-shadow: 3px 3px 5px #f00;</h1>
		<p>ドロップシャドウの確認</p>
	</section>
	<section class="ts_4">
		<h1>text-shadow: -3px -3px 0 #0cf;</h1>
		<p>ドロップシャドウの確認</p>
	</section>
	<section class="ts_5">
		<h1>text-shadow: 1px 1px 0 #0f0, 0 0 10px rgba(0, 0, 0, 0.5);</h1>
		<p>ドロップシャドウの確認</p>
	</section>
	<section class="ts_6">
		<h1>text-shadow: .1em .1em 0 #990, .2em .2em 0 #aa0, .3em .3em 0 #cc0;</h1>
		<p>ドロップシャドウの確認</p>
	</section>
</div>