CSS3を使って文字に影を付けて装飾する

文字に影を付けるには

文字に影を付ける事で読みやすくしたり、見出しのような文字を目立たせたりできるので、付けたいと思う場面はありませんか？
特に背景に写真を配置して、その上の文字を載せると文字が読みにくくなってしまいます。
文字に影を付けたり、縁取りをすると読みやすくできるのでオススメです。

影や縁取りをする場合、文字を画像にして、img要素で配置して・・・とデザインを作るはずです。
でも文字を入れ替えたい、文字のサイズを大きくしたい・小さくしたい、色を変えたい・・・
背景にを配置していた写真を差し替えたので、影の色が合わなくなった・・・などなど、ホームページを運用していると変更が必要になる事も多くあると思います。
その都度画像編集ソフトを使って作り直してもいいですが、時間がかかってしまうので少し面倒です。

CSSを書き直すだけで色を変えたり、影を付けたりできたら便利そうだな・・・とは思いませんか？
影や縁取りのデザインはCSSでできるんです！

影を付けるには「text-shadow」

文字に影を付けるには、text-shadowを使います。
書き方は「text-shadow: (右への距離) (下への距離) (ぼかし具合) (影の色);」です。
右・下への距離は負の値（[-]マイナス）も付けることができるので、左・上方向へ伸ばすこともできますよ。

実際に影を付けてみる

※サンプルではわかりやすいように影と文字色を濃くしています。

一行で書けるので簡単です。
画像にしているわけではないので、文字のサイズ・色変更に手間がかかる事も、検索にかからないという事もありません！

文字の縁取りをしてみよう！

先ほどの「text-shadow」は複数設定する事ができます。
その機能を使って縁取りの様な効果をかける事ができるんです！！

実際に縁取りしてみよう

複数の「text-shadow」を使うには、カンマ（,）で区切ってつなげます。

影を付ける値は「カンマ（,）」を使えば複数の設定をすることができます。
効果を重ねて、より濃い縁取りをしたり、2色、3色の縁取りをしたりと・・・できる事は様々です。
ぜひデザインに合わせて、いろいろと試してみてください。

まとめ

・画像を背景に設定した場合、文字の影や縁取りをすることで読みやすくなる
・「text-shadow」を使って文字に影を付ける事ができる
・画像文字を使わないので、文字の入替えや色変更が簡単にでき、検索エンジンに読み取ってもらえる文章を作成できる
・「カンマ（,）」を使って、複数の設定を持たせることができる
・四隅に設定すれば、縁取りのような効果を付けることができる