にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

文字に陰を付けるCSSの書き方 (ぼかしたり複数の影を同時に指定したり) [CSS3,テキスト]

「影付き文字」が簡単に作れるスタイルシートのtext-shadowプロパティの書き方を解説。CSSだけでテキストに影を付加できます。影は複数作ることもできるので、陰を上下左右に4つ加えることで文字を縁取りしたりもできます。

CSSだけで文字(テキスト)に陰を付けたい

長らくIEだけは独自仕様で実装されていた「影付き文字」ですが、IE10以降ではCSS標準の「text-shadowプロパティ」が扱えるようになりました。つまり、今では代表的なブラウザのすべてで「文字に陰を付ける方法」が統一されたことになります。
もっとも、まだ若干IE9以下の利用者も居るわけですが。しかし、徐々に減っていくでしょうから、そろそろIE独自のfilterプロパティは廃してCSS標準のtext-shadowプロパティだけを使うと良いのではないかと思います。

そんな「影付き文字」が簡単に作れるtext-shadowプロパティですが、だいたい以下のように記述して使います。

text-shadow: (右方向への移動距離) (下方向への移動距離) (ぼかす範囲) (文字色);

4つの値は、空白文字で区切って指定します。複数の影を付けたい場合は、カンマ記号で区切ります。(記述例は後述)

影を1つだけ作る場合のスタイルシートの書き方

まずは、文字に陰を1つだけ付ける場合のCSSソース記述例です。

text-shadow: 5px 7px 3px #ffaaaa;

上記は、右方向に5px・下方向に7pxずらした位置に、3pxの範囲でぼかした影を、#ffaaaa(淡い赤色)で表示します。
これを表示すると、以下のように見えます。(IEの場合は、IE10以降で見て下さい。)

テキストに影を付けます。

タイトルなど、目立たせたい文字の表示に活用すると良いでしょうね。
強調したい箇所で使っても良いかも知れませんが、本文中で使ってしまうと若干うるさくなるかも知れません。(^_^;)

影を左上に作る場合の書き方

影の表示位置にはマイナスの値も使えるので、上方向や左方向に影を延ばすこともできます。

text-shadow: -7px -10px 5px #ffaaaa;

上記のように記述すると、影は「左方向に7px(=右方向に-7px)」・「上方向に10px(=下方向に-10px)」の位置に、5pxの範囲でぼかして、#ccaa80(淡い赤灰色)で表示されます。

このように左上に影を付けることもできます。

影を2つ(複数)作る場合の書き方

1つの文字に対して、陰は1つしか指定できないわけではありません。複数の陰を加えることもできます。

text-shadow: 5px 7px 3px #80aa80, 12px 15px 5px #aaaacc;

上記は、『右方向に5px・下方向に7pxずらした位置に、3pxの範囲でぼかした影を、#80aa80(淡い緑色)』で表示し、さらに、『右方向に12px・下方向に15pxずらした位置に、5pxの範囲でぼかした影を、#aaaacc(淡い青色)』で表示します。

2段階の陰を付けることも可能です。

こんな感じで、簡単に複数の影がつきます。

陰を上下左右に4つ加えることで、文字を縁取りできる

陰を複数も付けてどうするのだ……と思われるかも知れませんが、この方法で4方向に同時に陰を加えると、文字を縁取りする効果が出ます。
文字を縁取りしようと思うと今までは文字を画像化するくらいしか方法がなかったわけですが、このtext-shadowプロパティを応用すれば、文字をテキストのままで(画像化することなく)縁取りできます。画像や複雑な模様の上に文字を書きたい場合に、読みやすさを確保する目的で便利に使えそうです。

4方向の陰を使って文字を縁取りすることも可能

その「陰を使って文字を縁取りする効果」を出す方法については、All Aboutで記事にしましたので、そちらをご参照下さい。^^;
→『文字に影を付け、画像に重ねた文字を見やすくするCSS3


()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---