CSSプロパティの「text-shadow」について。
基本の設定から応用の使い方・実際の事例なども紹介

一昔と違って、今ではCSSだけでもテキストに簡単なエフェクト的な要素を付け加えることができるようになりました。実際の実務の中でも、使う頻度としてはそこそこある気がするtext-shadowについて、今回はまとめておきます。

text-shadowその名の通り、テキストにシャドウ（影）を付ける事ができるプロパティになります。普段の使い方としてはそのままですが、応用的な使い方などもあったりするので、意外といざ使おうと思った時に、どう設定（書き方）だったっけなーとなりがちです。

そんな自分メモのためというところも踏まえて、基本のおさらいから少し応用的なところまで見て置ければと思います。

text-shadowの基本的な書き方

まずは基本からのおさらいとして、text-shadowの書き方をまとめておきます。
設定できる項目は4つになります。

1. X方向（水平方向）の影の位置
2. Y方向（垂直方向）の影の位置
3. 影のぼかし半径
4. 影の色

実際にコードとして書く際は下記のように記述します。

text-shadow: X方向（横）の位置 Y方向（縦）の位置 影のぼかし半径 影のカラー;

となります。
ただこのあたりは、実際のコードを見てサンプルを見て照らし合わせながらやったほうが遥かにわかりやすく理解も深まります。

text-shadow: 1px 1px 1px #999;

右に1px、下に1px、ぼかし1px、影の色を#999とした場合、下記になります。

サンプルテキスト

text-shadow: 3px 3px 3px #0000ff;

また、右に3px、下に3px、ぼかし3px、影の色を#0000ffとした場合、下記になります。（見た目上の問題があるので実際にこういう使い方をすることはまずないかと思います）

サンプルテキスト

右、下はマイナス数値で左、上に表示も可能

X方向とY方向に値を入れますが、この時にマイナス数値を入れる事で、影を逆の方向に付ける事も可能です。

text-shadow: -3px -3px 1px #ff0000;

マイナス指定なので左に3px、上に3px、ぼかしを3px、影の色を赤とした場合、下記になります。（これも実際に使うような値指定ではないですが、見た目的にわかりやすくなるためあえてそうしています。）

サンプルテキスト

使い勝手の決めては影のボカシ具合

text-shadowがうまい具合にはまるかどうかは、3つめの値の影のぼかしの設定に大きく左右されがちです。値が少なければ少ないほどボカシがないということになり、くっきりと縁取りのような形になり、値が大きくなれば、ぼやっとした影が付く形になります。

影の指定を0px

かなりくっきりとした表示になります。

text-shadow: 3px 3px 0px #999;

サンプルテキスト

影の指定を1px

0と1ではそこまで変わらず、割とくっきりとした境界線みたいなイメージになります。

text-shadow: 3px 3px 1px #999;

サンプルテキスト

影の指定を3px

少しぼやけた感じの表示になります。

text-shadow: 3px 3px 3px #999;

サンプルテキスト

影の指定を10px

もう完全にぼやけた影の表示になります。

text-shadow: 3px 3px 10px #999;

サンプルテキスト

影の色はrgba指定をすることも可能

影の指定は、多くのケースではカラーコードをそのまま指定する事が多いですが、使うシチュエーションなどによっては、薄い影などが求められたりする場合、rgbaの指定で透明度の調整をすることも可能です。画像などの上に文字を置いたりする際に使うケースがあるかもしれません。

text-shadow: 3px 3px 1px rgba(100, 100, 100, 0.4);

サンプルテキスト

応用的なtext-shadowの使い方とよく使う事例

最後に、text-shadowの応用的な使い方や、実際によく使う事例・シーンはどういうケースかというのも紹介しておきたいと思います。

同系色の背景と文字の時の文字を目立たせるために

最もよく使うシーンの1つとしては、画像の上に文字を載せるシーンです。
特にコーポレートサイトにしろサービスサイトにしろ、ランディングページにしろ、トップページのファーストビューのメイン部分のコンテンツは、大きめの画像にキャッチコピー的な作りが多くなります。

そこを画像オンリーで作るという場合もありますが、割と今は画像の上の文字はテキスト表示という作り方も増えているかと思いますし、当サイトの裏方ワークスのトップページのファーストビューのメインも、text-shadowを使ってテキストを表示しています。

特に薄い画像の上に白文字などを置くと文字が背景に溶け込んでしまうため見にくくなってしまうため、そういう時にtext-shadowを使う事で、少し文字をクッキリと浮かび上がらせるような見せ方で視認性を上げる事ができます。

text-shadowの指定無し

text-shadowの指定あり

text-shadow: 2px 2px 1px #666;

text-shadow: 0px 0px 5px #000;

text-shadowの設定次第で、大きく見た目が変わる事もあるため、特にLPなど広告成果に直結するようなシーンでは色々なパターンを試して、どの値が良いかなどを検討すると良いかもしれませんね。

影を複数指定する

実はtext-shadowは「,」カンマで区切ってあげることで、複数指定する事が可能になります。

text-shadow: 3px 3px 3px #ff0000, 7px 7px 3px #0000ff;

サンプルテキスト

使い道はあまりないかもしれませんが、カンマで区切って、3つ指定する事も可能です。

text-shadow: 1px 1px 3px #ff0000, 5px 5px 3px #0000ff, 10px 10px 3px #006600;

サンプルテキスト

テキストを光らせる

これもそこまで使う頻度などは多くないとは言えますが、ちょっと煽るまでいかなくても目立たせたりする際や、LPなどで最後の最後の押しのところなどで使うケースもあります。

text-shadow: 0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 30px #fff, 0px 0px 40px #fff,

テキストをぼかす

これもそこまで使う頻度は高いとは言えませんが、よく簡易的に見せたくないコンテンツとしておきたい場合など、ボカシを設定してりして使ったりすることもあります。

color: transparent;を指定することで、文字が透明になり、影だけが表示されることになります。ボカシの数値を変更することで、文字のぼかし具合も変わります。

ぼかしを5pxとした場合

頑張れば読めるという感じのぼかし具合になります。

color: transparent;
text-shadow: 0px 0px 5px #333;

サンプルテキスト

ぼかしを10pxとした場合

パッと見ただけでは読む事ができないくらいのボカシ具合です。
ただ、あくまでもcssでぼかしているだけなので、ドラッグすると文字が表示されますしコピーなども当然普通にできます。

color: transparent;
text-shadow: 0px 0px 10px #333;

サンプルテキスト

まとめ

cssのプロパティの中でも割と使い方次第で活躍もするし、うまく使えないと全く使い道がないと判断されてしまいがちなのがこのtext-shadowじゃないでしょうか。

昨今のWebデザインでは特にトップページのファーストビューのところは画像＋テキストという構成のデザインが多いかと思いますので、そこでよく使われるシーンを見ますので、使う人はよく使っているプロパティかと思います。

自分自身もそこまで多様するわけではないですが、ほぼ今のブラウザでは対応されているものでもありますし、ちょっとテキストを目立たせたい時などには使う事も多いので、組み合わせ次第ではcssだけでインパクトのある見せ方もできるかもしれません。

色々な使い方を試して実際の制作現場でうまく活用していきましょう。