HOME
本記事は執筆時点（2020年12月26日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
text-shadowプロパティとは？
text-shadowは、文字に影をつけるためのプロパティです。文字の影はドロップシャドウとも呼ばれます。
次の例のように、影の濃さや色、範囲・位置を自由に設定することが可能です。
text-shadowの使い方
text-shadowは次のように、「水平位置・垂直位置・影のぼかし範囲・色」という値を記述して使用します。
影の設定は、記述する順番によって意味合いが変わってしまうので注意してください。左から順につぎのように決められていて、影のぼかしの範囲と色は省略することができます。
- 水平（横）方向の位置
- 垂直（縦）方向の位置
- 影のぼかしの範囲（長さ）【省略可】
- 影の色【省略可】
HTML
<p class="sample1">ダミーテキスト</p>
CSS
.sample1{
text-shadow:5px 5px 5px #333;
}
プレビュー
影の表示位置を変更する
text-shadowは文字の位置を基準の「0」として、そこから正と負（マイナス）の数値を使って上下左右に自由に移動することができます。
| 水平方向 | 正の値 | 右へ移動 |
|---|---|---|
| 負の値 | 左へ移動 | |
| 垂直方向 | 正の値 | 下へ移動 |
| 負の値 | 上へ移動 |
水平方向・垂直方向両方とも0を指定することもできます。文字の真下（真後ろ）に影ができるので、ぼかしの範囲を省略すると影が認識できません。
HTML
<p class="sample1">ぼかしなし</p> <p class="sample2">ぼかしあり</p>
CSS
.sample1{
text-shadow:0px 0px;
}
.sample2{
text-shadow:0px 0px 5px;
}
プレビュー
影のぼかし範囲（長さ）を指定する
ぼかし範囲は省略もしくは0を指定すると文字と同じ形の影が表示され、数値を大きくすれば影は範囲は大きくなりますが同時に濃さが薄くなっていきます。
HTML
<p class="sample1">ダミーテキスト</p> <p class="sample2">ダミーテキスト</p> <p class="sample2">ダミーテキスト</p>
CSS
.sample1{
text-shadow:0px 0px 5px;
}
.sample2{
text-shadow:0px 0px 15px;
}
.sample3{
text-shadow:0px 0px 25px;
}
プレビュー
影の色を指定する
最後に影の色を変更します。色名・カラーコード・RGBのいずれかで指定します。省略した場合は文字の色が適用されます。
HTML
<p class="sample1">ダミーテキスト</p> <p class="sample2">ダミーテキスト</p> <p class="sample2">ダミーテキスト</p>
CSS
.sample1{
text-shadow:0px 0px 10px red;/*赤*/
}
.sample2{
text-shadow:0px 0px 10px #0000d4;/*青*/
}
.sample3{
text-shadow:0px 0px 10px rgb(255,255,0);/*黄色*/
}
プレビュー
複数の影を重ねる方法
text-shadowはカンマで区切って記述することで、複数の影を重ねて表示させることもできます。
HTML
<p class="sample1">ダミーテキスト</p>
CSS
.sample1{
text-shadow:-1px -1px 5px #d4ff00,5px 5px 5px #0000d4,-5px -5px 5px #d40000;/*3色の影を付ける*/
}
プレビュー
text-shadowで文字を縁取りする方法
text-shadowを応用すると、影を使って文字の縁取りを行うことができます。次のように複数の影を上下左右にずらして表示することで、縁取りしているように見せることができます。
HTML
<p class="sample1">ダミーテキスト</p>
CSS
.sample1{
color:#ffffff;
/*文字を縁取る*/
text-shadow:1px 1px #000000,
1px -1px #000000,
-1px 1px #000000,
-1px -1px #000000;
}
プレビュー
ひとつスタイルを用意しておけば、文字を修正しても自動的に縁取り文字で表示できるので便利です。
しかしながら、あくまで影を利用した応用技なので拡大してみるとつなぎ目が途切れていることがわかります。綺麗な縁取り文字にこだわる場合は描画ソフトなどで画像として用意した方が良いかもしれません。
text-shadowが効かないときは？
text-shadowを指定したのに思い通りに反映されない場合は、次のような点を確認してみましょう。
- コードに記述ミスはないかどうか？
- 同じセレクターで重複して指定していないか？
- セレクターの優先順位は正しいかどうか？
コードに記述ミスはないかどうか？
CSSはスペルミスやコロン・セミコロンを付け忘れているだけで反映されなくなりますので今一度確認してみてください。text-shadowの箇所以外が間違っていても同様ですので遡ってチェックしましょう。
同じセレクターで重複して指定していないか？
CSSは同じセレクターの場合、後から記述したものが優先されます。同じセレクターでtext-shadowを指定していないか確認してみてください。
セレクターの優先順位は正しいか？
同じ要素でもCSSのセレクターには優先順位があり、基本としてはタグよりもクラス、クラスよりもIDに指定した値が優先されます。以前に別のセレクターを使ってtext-shadowを指定していないかなど確認してみてください。
CSSのセレクターについて詳しくはこちらのページをご覧ください。
CSSのセレクターとは？【種類と使い方をわかりやすく解説】
CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。このページではセレクターの種類と使い方を解説します。セレクタ―を使ってスタイルを指定することで...【もっと読む】
まとめ
以上が、CSSのtext-shadowプロパティの使い方です。
影を付けるだけで立体感が増して文字を印象付けることができます。しかしながら、多用しすぎると見づらくなったり安っぽさが出てしまうので注意が必要です。影の色や位置など、他のサイトのデザインを研究して使って見ましょう。