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

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

text-shadowプロパティの説明

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

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

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

text-shadowに指定できる値

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

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

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


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


<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>

.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;
}

text-shadowに関連するCSSプロパティ

テキスト関連
text-align ボックスに含まれる内容の横位置の揃え方を指定する
text-align-last ボックスに含まれる内容の最後の行を揃える位置を指定する
text-combine-upright 一文字分の空間に挿入する文字の組み合わせを指定する
text-decoration 文字の装飾線に関する値を一括で指定する
text-decoration-color 文字に加えられた装飾線の色を指定する
text-decoration-line 文字に加えられた装飾線の種類を指定する
text-decoration-skip-ink 装飾線が文字を通過する祭の処理を指定する
text-decoration-style 文字に加えられた装飾線の形状を指定する
text-decoration-thickness 文字に加えられた装飾線の太さを指定する
text-emphasis テキストに付加する圏点、傍点、脇点に関する値を一括で指定する
text-emphasis-color テキストに付加する圏点、傍点、脇点の色を指定する
text-emphasis-position テキストに付加する圏点、傍点、脇点の位置を指定する
text-emphasis-style テキストに付加する圏点、傍点、脇点の記号を指定する
text-indent テキストの一行目に挿入するインデントの幅を指定する
text-justify テキストの行端揃えに対して均等割り付けの方法を指定する
text-orientation 縦書きモードの文字の向きを指定する
text-overflow 行からテキストが溢れている状態の表現方法を指定する
text-shadow 文字に影(ドロップシャドウ)を付ける
text-transform テキストの大文字・小文字の表記を指定する
text-underline-position 文字の下に引かれる装飾線の位置を指定する