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

文字に影を付け、画像に重ねた文字を見やすくするCSS3(2ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

text-shadowプロパティの使い方

文字に影を付ける「text-shadowプロパティ」の記述方法は、以下の通りです。指定できる値は4種類あり、それぞれ空白文字で区切って記述します。
text-shadow: (右距離) (下距離) (ぼかし具合) (影の色);
距離の数値には、負の値も指定できます。例えば、「右距離」に負の値を指定すると、左方向へ影を表示できます。また、カンマで区切れば、1つの要素に複数の影を付けられます(詳しくは後述)。

簡単な影を加える

text-shadow: 6px 5px 2px gray;
右下に灰色の影を1つ付加

右下に灰色の影を1つ付加

上記のソースは、右方向へ6px、下方向へ5pxの位置に、ぼかし具合2pxで灰色(gray)の影を付ける、という意味になります。右図は、上記ソースの表示例です。

ここでは例として小さな文字にも影を付加していますが、本文などの小さな文字にまで影を付けると、読みにくくなってしまいます。影は、ページタイトルや見出しなど、特別な装飾が必要な箇所だけにとどめておく方が良いでしょう。


 

影の向きを調整する

text-shadow:  3px  3px 3px #8080ff; /* (右下:青) */
text-shadow: -3px  3px 3px #80cc80; /* (左下:緑) */
text-shadow: -3px -3px 3px #ff8080; /* (左上:赤) */
text-shadow:  3px -3px 3px #cccc00; /* (右上:黄) */
影の向きを4方向に変化

影の向きを4方向に変化

上記ソースの1行目のように、距離に「正の値」を指定すれば、影は右下に表示されます。「負の値」を使うことで、影を左下や左上・右上にも表示できます。

右図は、上記ソースの4種類を順に表示した例です。影の色に合わせて文字色も変更しています。文字色は、青:#000080、緑:#005500、赤:#800000、黄:#555500を使っています。


 

複数の影を使って「縁取り」効果を作る

text-shadow: 2px  2px 3px red,
            -2px  2px 3px red,
             2px -2px 3px red,
            -2px -2px 3px red;
4方向に影を重ねて「縁取り」

4方向に影を重ねて「縁取り」

上記のソースでは、カンマ記号で区切って4つの影を同時に指定しています。4つはそれぞれ表示方向が異なるので、上下左右に影を表示することになります。これによって、「縁取り」の効果が得られます。

右図は、上記ソースの表示例です。影の色を、赤(red)、黄(#cc8000)、青(blue)、緑(green)に変化させています。文字色は、すべて白(white)にしています。


 

写真の上に配置した文字を見やすくする

text-shadow: 2px  2px 5px red,
            -2px  2px 5px red,
             2px -2px 5px red,
            -2px -2px 5px red;
写真の上でも読みやすい文字に

写真の上でも読みやすい文字に

写真の上に配置する場合は、先の「縁取り」と同じ要領で、少し多めにぼかすと良いでしょう。細かな値は、実際に重ね合わせる画像との兼ね合いや好みで調整して下さい。

右図は、上記ソースの表示例です。先ほどの例と同じように、色を4種類に変化させています。

なお、文字色や影の色をRGBA値で指定すれば、背景が透けて見える半透明な文字や影を表示できます。RGBA値について詳しくは、記事「IE9を含む代表的なブラウザで使えるCSS3プロパティ」の3ページ目にある、「アルファチャネルも同時に指定できるRGBAカラーモデル」部分の解説をご参照下さい。

ブラウザで表示確認

今回の記事でご紹介したサンプルを実際にブラウザで試せるよう、サンプルページを用意しています。HTMLソースも含めて見てみたい場合は、ご活用下さい。

IE9以下では表示できないが
なお、text-shadowプロパティは多くのブラウザで問題なく表示できますが、Internet ExplorerではIE10以降でしか表示できません。ただし、IE9以下の場合はIEの独自拡張であるfilterプロパティを併用することで影を付加することはできます。もしIE9以下にも対応する必要がある場合は、記事「画像を使わずに文字に影を付ける」で解説しているfilterプロパティの書き方もご参照下さい。

写真画像に重ねても読みやすさを保つために

今回は、背景写真の上にタイトル文字や見出しを掲載する際に、読みにくくなってしまわないよう、text-shadowプロパティを使って影(縁取り)を付ける方法をご紹介致しました。ぜひ、ロゴやページタイトル、見出しなどのデザインに活用してみて下さい。

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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