文字を写真の上に載せるなら、影を活用すると見やすくなる
![文字に影があると見やすい](https://imgcp.aacdn.jp/img-a/800/auto/aa/gm/article/3/8/4/2/7/4/kagelogos.png)
文字に影(縁取り)があると見やすい
しかし、それらの文字を画像として作るのは望ましくありません。文字を画像化すると、「修正に手間がかかる、サイズが増える、検索にかからない、途中で折り返せない、範囲選択ができない、文字サイズが変えられない」など、デメリットが多くなるからです。
![どれもCSSだけで実現できる効果](https://imgcp.aacdn.jp/img-a/800/auto/aa/gm/article/3/8/4/2/7/4/manyshadows.png)
どれもCSSだけで実現できる効果
1つの文字に複数の影を指定可能ですから、上下左右に影を付けることで「縁取り」のような効果を作れます。この効果を活用すれば、文字を画像化することなく、写真の上に重ねても読みやすい文字になります。
背景写真の上に配置した文字も読みやすくなる
下図は、写真の上に文字をそのまま重ねた例と、text-shadowプロパティによる影で「縁取り」のような効果を加えた例です。前者(そのまま重ねた場合)は、文字の背後にある色によっては、とても読みにくくなっています。しかし、後者(縁取り効果を加えた場合)なら、背後の色に関係なく読みやすくなっています。![text-shadowで文字に影を付けると、写真の上でも見やすくなる](https://imgcp.aacdn.jp/img-a/800/auto/aa/gm/article/3/8/4/2/7/4/shadowsamples.png)
text-shadowで文字に影を付けると、写真の上でも見やすくなる
今回は、写真の上に文字を掲載する際に読みにくくなってしまわないよう、text-shadowプロパティを使って「影(縁取り)」を加える方法をご紹介致します。
それでは、text-shadowプロパティの記述方法を見てみましょう。