「CSSで文字に影をつけるにはどうしたらいい？」
「テキストシャドウを使ってみたけど、いまいちパッとしないなぁ…」
「文字に影を付けてもダサくなるだけ。こんなのどこで使うの？」
なんて考えていませんか？CSSのtext-shadowプロパティが使いこなせるようになると、簡単に文字をおしゃれにできます。わざわざ画像を作る必要もありません！
ここではCSSのtext-shadowプロパティの使い方を分かりやすく詳しく解説します！
目次
基本から応用まで！text-shadowの書き方解説
文字に影を付けるにはCSSのtext-shadowプロパティを使います。まずはtext-shadowの書き方を解説します！
使用するサンプル
text-shadowプロパティの効果を分かりやすくするため、すべてのサンプルで同じHTMLを使用し、CSSだけサンプルごとに差し替える方式をとりたいと思います。この例では「 class=”sample”」に適用するスタイルだけを差し替える、ということですね。
p要素にはデフォルトで共通のスタイルを設定しています。見やすさのためフォントサイズを「80px」と大きめに設定しており、それに合わせてテキストシャドウのCSSコードを書いています。実際にサイトで利用するときは値を調整してください。
また、色を指定する際は、イメージしやすいようにできるだけ色名を記述するようにしています。
基本の書き方
text-shadowプロパティには2～3個の数値と影の色の指定ができます。書き方には以下のルールがあります。
- 1つ目の数値に影を水平(右)方向にずらす距離を指定します。
- 2つ目の数値に影を垂直(下)方向にずらす距離を指定します。
- 3つ目の数値は影のぼかし具合を指定します。この値は省略できます。
- 影の色の指定は最初か最後に指定できます。
- 数値には単位が必要です。また、値は半角スペースで区切りましょう。
影はレイアウトに影響しない！
CSSで文字に影を付けるとコンテンツ自体が大きくなりそうな感じがしますが、影はレイアウトに影響を与えません。コンテンツの大きさは変わりませんし、センタリング（＝中央揃え）した文字がずれてしまうこともありません。安心して自由に使いましょう！
値にマイナスを付けると？
1つ目の数値と2つ目の数値にはマイナスの値を指定できます。1つ目の数値にマイナスの値を指定すると影が左方向にずれて、2つ目の数値にマイナスの値を指定すると影が上方向にずれます。3つ目の数値(ぼかし具合の指定)にはマイナスの値を指定することができないので注意しましょう。
複数の影がつけられる！
先ほど解説した「2〜3個の数値と色の指定」のセットを複数並べることができます！セットとセットの間はカンマ（ , ）で区切ります。先に指定したものから手前に表示されます。つまり、影の指定は手前から順番に書く必要があります。順番を間違えないように注意しましょう。
これは便利！色に透明度を指定する
「#000000」という6桁の表記でおなじみのカラーコードは、実は8桁表記ができます。最後の2桁は「不透明度」の指定で、00が透明でFFが不透明です。
rgb表記やhsl表記も不透明度を加えたrgba表記、hsla表記が可能です。これらの表記では0が透明で1が不透明です。半透明は0.5のように小数で指定します。
例えば、サンプルに使われているカラーコード「 #0008」 は 「rgba(0, 0, 0, 0.5)」 という表記とほぼ同じです。「0.5」は「.5」と書いても認識されます。
影に不透明度を指定すれば、背景色が透けて自然な影になりますよ。
グラデーションに要注意！
CSSのlinear-gradient()関数などを使用すると文字にグラデーションをかけることができます。しかし、グラデーションをかけた文字にtext-shadowを指定するとグラデーションの前に影が表示されてしまいます。
これは「CSSのグラデーションは画像として扱われる」ためです。現在のCSSでは文字に画像を直接乗せることができないので、「背景に指定した画像（グラデーション）を文字の形で切り抜き、さらに文字を透明にすることで背景が見えるようにする」という方法で表現しています。
グラデーションはあくまで背景なので、その上に影が重なるのは確かに正しいのですが、これでは思い通りの表現ができません。これを解消するには、p要素の文字を「影をかけるための文字」とし、その上に「グラデーションをかけるための文字」を::before疑似要素で追加します。これで影の上に新しい文字と背景色を設定するわけです。
どんな時に使うの？意外と役立つtext-shadow
CSSのtext-shadowプロパティは使い方次第で優れたデザインを表現できたり、見る人にとって読みやすい文字を演出したりできて、とっても役に立ちますよ。
文字を目立たせたいとき
デフォルトでは文字に影はついていないので、ちょっとした影を付けるだけでさりげなく目を引くデザインになります。わかりやすく影を付けることで特別な意味を持たせることもできますよ。
「目立つ＝浮いてる」じゃない！
「目立つ文字」とか「強調したい文字」って聞くと、とにかく派手だったり、個性の強いフォントを想像しがちですが、周りのデザインと協調性がないと「浮いた」デザインになってしまいます。「浮いた」デザインは「ダサい」といわれる原因にもなります。
周りとの協調性を大切にしつつ、1つだけ「ちょっと違う」何かがあると、おしゃれに人の目を引きますよ。
背景に埋もれない文字にする
写真素材配布元： 写真素材ルーム
写真の上に文字を置くと読みづらくなってしまうのはあるあるだと思います。文字の色や太さを変えると解決することもありますが、そもそも色や太さにこだわりたい時もありますよね。
そんな時は文字に影を薄くつけるだけでも読みやすさが格段に良くなることがあります。最近は動画の字幕にもよく使われている手法です。ぜひ試してみてください！
良いデザインは読みやすい
皆さんはWebサイトを使っていて、「使いづらいな、見づらいな」って思う経験はあまりないと思います。それは最近のWebサイトはどれもしっかりとデザインされているからです。
デザイン的にもしっかりと作りこまれたサイトほど、さり気なく「見やすく、使いやすい」んです。みなさんがWebサイトを作る時も「見やすさ、使いやすさ」を大切にしてみてくださいね。
サイトデザインを1ランクアップ！text-shadowのおしゃれな使い方
ここからが本題です！CSSのtext-shadowプロパティを使用したいろんなデザインをご紹介します！
その1：グロー～文字を光らせる～
影をずらさずにぼかすことで、文字がふんわりと光っている感じを演出できます。色やぼかし具合を調整することで、黒背景に映えるネオンサイン風の演出もできます。
ちなみに文字の色と影の色を同じにすると文字自体がぼやけているように見せることができますよ。
その2：文字を縁取る
上下左右の4方向（もしくは斜め方向も加えた8方向）に、それぞれ1pxずつずらした影を重ねる方法です。ただし、この方法では文字色を透明にはできません（後ろの影が邪魔をしてしまいます）。また、2px以上の縁取りも細部が不自然になってしまうため、1pxの縁取りでしかおすすめできません。
文字のフチだけを表示させたい場合は？
文字のフチ（アウトライン）を表示させて内側を透明にできたら、もっと色んなデザインができそうですよね。実は「文字を縁取る」プロパティはあります。ですが、まだ正式な採用ではなく、今後も使い続けられるかが不明のため注意が必要です。
この記事のアイキャッチ画像はCSSでデザインしたのですが、そのときに文字を縁取る「-webkit-text-stroke」プロパティを使用してみました。文字自体は「 color: transparent;」で透明にしています。実際の使用には注意が必要ですが、まずは一度試しに使ってみてください！
その3：影を重ねる
等間隔に色の異なる影を配置することで、躍動感のある表現になります。文字の色やフォントにもこだわるとより印象的になりますよ。
その4：影を長く伸ばす
特定の方向に1pxずつずらしながら影を何重にも配置します。それなりの長さを出すためにはたくさんの記述が必要ですが、連番作成ツールを使えば簡単に書けますよ。
ちなみにこの方法はいろいろと応用が利きます。最後にぼかした黒い影を配置することでより立体感を演出できます。影と反対方向に白い影を入れることで光が当たっている感じを表現することもできます。
影の色や透明度を調整すれば影をフェードアウトさせることもできますよ。
応用編：「白い影」で縁取る
先ほどの例の応用編です。文字と影の間に「白い影」を入れることで文字の輪郭をはっきりさせる手法です。すっきりとスタイリッシュな雰囲気になりますよ。
ちなみに、この白い影を5px 5pxの位置に１つだけ配置すると、わずかながら印象が変わります。距離を調整すれば浮遊感の演出もできますよ。
その5：2つの影でデコボコを表現
この項目は効果を見やすくするために背景色と文字色を変更しています。人間の目の錯覚を利用した昔から使われている手法です。上に明るい影を、下に暗い影を薄く付けるだけで文字が盛り上がって見えます。片方を左右にずらした場合はもう片方も反対方向にずらしましょう。
反対に、上に暗い影を、下に明るい影を薄くつけるとへこんで見えます。ちなみにこの2つの例では背景色と文字の色はそれぞれ同じ色を指定しています。へこませた文字のほうが暗く見えますね！
その6：文字に不透明度を付けて文字の内側に影を付ける
こちらもtext-shadowだけでなく、colorプロパティを使用しています。
本来、text-shadowプロパティは「文字の下」に影を表示するため、「文字の外側、内側」という区別がありません。しかし、文字に不透明度を適用することで、文字の下の影を透かして表示させることが可能です。
ポイントは手前の影です。この影が後ろの黒い影を隠してくれています。影の色は背景色と同じ色にしましょう。また、この影の配置やぼかし具合を調整すると奥行きや光の印象を変えることができますよ。
奥の影をぼかすと印象が柔らかくなります。ただし、配置はずらさない方が良いでしょう。また、文字の色は自由に変えても大丈夫です。不透明度の設定だけ注意しましょう。
この表現はシンプルながら奥深いと思います。いろいろ試してみましょう！
まとめ
いかがでしたか？text-shadowプロパティは「文字に影を付ける」という非常にシンプルなプロパティです。しかし、その使い方次第でいろんな表現が可能です。
text-shadowだけでも、おしゃれな文字表現が簡単にできますし、他のプロパティと組み合わせるとデザインや表現の幅が広がります。うまく使いこなして、サイトデザインをレベルアップさせましょう！
