ホームページ作成/CSS3とは

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

CSS3では文字の縁取り装飾も簡単に実現できます。CSS3のtext-shadowプロパティを使えば、文字に影を付けられます。この影を文字の四方に加えることで「縁取り効果」を作成する方法を解説。写真など複雑な背景の上にそのまま文字を重ねると読みにくくなってしまいますが、文字に影を付けたり縁取りしたりすれば読みやすくできます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

文字に影があると見やすい

文字に影(縁取り)があると見やすい

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

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

どれもCSSだけで実現できる効果

どれもCSSだけで実現できる効果

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

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

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

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

text-shadowで文字に影を付けると、写真の上でも見やすくなる

text-shadowで文字に影を付けると、写真の上でも見やすくなる


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

それでは、text-shadowプロパティの記述方法を見てみましょう
  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます