AboutデジタルIT・インターネットホームページ作成CSS3とは文字に影を付け、画像に重ねた文字を見やすくするCSS3ホームページ作成/CSS3とは文字に影を付け、画像に重ねた文字を見やすくするCSS3CSS3では文字の縁取り装飾も簡単に実現できます。CSS3のtext-shadowプロパティを使えば、文字に影を付けられます。この影を文字の四方に加えることで「縁取り効果」を作成する方法を解説。写真など複雑な背景の上にそのまま文字を重ねると読みにくくなってしまいますが、文字に影を付けたり縁取りしたりすれば読みやすくできます。文宏ホームページ作成ガイド文字を写真の上に載せるなら、影を活用すると見やすくなる文字に影(縁取り)があると見やすい背景に写真画像を配置して、上から文字を重ねるデザインを使いたい場合があります。サイトロゴやページタイトル、見出しをデザインする際などです。写真の上に文字を重ねると、読みにくくなることもあります。そのようなときは、文字に影を付けたり縁取りしたりすると、読みやすくなります。それらの文字を画像として作るのは望ましくありません。文字を画像化すると、「修正に手間がかかる、サイズが増える、検索にかからない、途中で折り返せない、範囲選択ができない、文字サイズが変えられない」など、デメリットが多くなるからです。どれもCSSだけで実現できる効果そこで便利なのが、CSS3で追加された「text-shadow」プロパティです。これを使うと、文字に影を付けられます。画像化するわけではないため、先に挙げたデメリットはありません。影には、位置・色・ぼかし具合を指定でき、右図のように様々な効果が実現できます。1つの文字に複数の影を指定可能ですから、上下左右に影を付けることで「縁取り」のような効果を作れます。この効果を活用すれば、文字を画像化することなく、写真の上に重ねても読みやすい文字になります。背景写真の上に配置した文字も読みやすくなる下図は、写真の上に文字をそのまま重ねた例と、text-shadowプロパティによる影で「縁取り」のような効果を加えた例です。前者(そのまま重ねた場合)は、文字の背後にある色によっては、とても読みにくくなっています。後者(縁取り効果を加えた場合)なら、背後の色に関係なく読みやすくなっています。text-shadowで文字に影を付けると、写真の上でも見やすくなる今回は、写真の上に文字を掲載する際に読みにくくなってしまわないよう、text-shadowプロパティを使って「影(縁取り)」を加える方法をご紹介致します。それでは、text-shadowプロパティの記述方法を見てみましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。