文字に影を付け、画像に重ねた文字を見やすくするCSS3

文字を写真の上に載せるなら、影を活用すると見やすくなる

背景に写真画像を配置して、上から文字を重ねるデザインを使いたい場合があります。例えば、サイトロゴやページタイトル、見出しをデザインする際などです。しかし、写真の上に文字を重ねると、読みにくくなることもあります。そのようなときは、文字に影を付けたり縁取りしたりすると、読みやすくなります。

しかし、それらの文字を画像として作るのは望ましくありません。文字を画像化すると、「修正に手間がかかる、サイズが増える、検索にかからない、途中で折り返せない、範囲選択ができない、文字サイズが変えられない」など、デメリットが多くなるからです。

そこで便利なのが、CSS3で追加された「text-shadow」プロパティです。これを使うと、文字に影を付けられます。画像化するわけではないため、先に挙げたデメリットはありません。影には、位置・色・ぼかし具合を指定でき、右図のように様々な効果が実現できます。

1つの文字に複数の影を指定可能ですから、上下左右に影を付けることで「縁取り」のような効果を作れます。この効果を活用すれば、文字を画像化することなく、写真の上に重ねても読みやすい文字になります。

背景写真の上に配置した文字も読みやすくなる

下図は、写真の上に文字をそのまま重ねた例と、text-shadowプロパティによる影で「縁取り」のような効果を加えた例です。前者(そのまま重ねた場合)は、文字の背後にある色によっては、とても読みにくくなっています。しかし、後者(縁取り効果を加えた場合)なら、背後の色に関係なく読みやすくなっています。


今回は、写真の上に文字を掲載する際に読みにくくなってしまわないよう、text-shadowプロパティを使って「影(縁取り)」を加える方法をご紹介致します。

それでは、text-shadowプロパティの記述方法を見てみましょう。