CSS3はブラウザの進化とともに昨今では様々なブログや技術系のメディアなどで取り上げられるようになってきました。

今回は、CSS3なのですがCSS2.1でもあったtext-shadowプロパティについてフォーカスします。

すでにプロパティの名前から何ができるかは予想がつきます。ただ、"そろそろ何ができるか"ではなく、"どのように使うか"という実践の部分に注目して紹介していきます。

text-shadowプロパティの記述方法

まずは、基本のtext-shadowプロパティの記述方法ですが、以下の形式で値を指定します。

セレクタ { 
  text-shadow：　ぼかし色　X方向への距離　Y方向への距離　ぼかしの距離
}

ぼかし色

ぼかし色はRGB、色名にて指定が可能。#000はRGBの黒だが、blackでも指定することが可能。ぼかしの色は、text-shadowプロパティの値として一番最初に記述しても、一番最後に記述しても同じ結果になる。

X方向への距離

右へ陰の距離を指定する。プラスの値だと右方向へ、マイナスの値だと左方向へ陰が移動する。単位はpxでもemでも使用可能。

Y方向への距離

上下方向への陰の距離を指定する。プラスの値だと下方向へ、マイナスの値だと上方向へ陰が移動する。単位はpxでもemでも使用可能。

ぼかしの距離

値が大きくなれば、ぼかし具合が大きくなる。逆に値が小さいくなれば、ぼかし具合は小さくなる。単位はpxでもemでも使用可能。ぼかしの距離が未記述の場合、ぼかしは適用されない。

例えば、h1要素に対してtext-shadowプロパティを適用する場合、以下のように記述します。

h1{
font-size: 40px;
text-shadow: gray 1px 2px 1px;
}

h1{
margin: 40px;
}

text-shadowプロパティをサポートしたブラウザでは、次のように表示されます。

text-shadowプロパティは実践的な使い方／可読性の向上

一般的に、薄い水色の背景色上で白いテキストを使うと非常に見づらく、可読性をそこなってしまいます。しかし、text-shadowプロパティを適用するとグッと文字が見やすくなります。

つまり、text-shadowプロパティを使うことで、見やすい環境を簡単に作ることができます。

例えば、id属性"with-text-shadow"のp要素に対してtext-shadowプロパティを適用する場合、以下のように記述します。

html{
background-color: #BBfff6;
font-family: Verdana, sans-serif;
}

p{
margin: 40px;
font-size: 40px;
color: #fff;
}

p#with-text-shadow{
text-shadow: black 1px 1px 1px;
}

text-shadowプロパティをサポートしたブラウザでは、次のように表示されます。

text-shadowプロパティの実践の使い方／アウトライン

text-shadowプロパティを以下のように指定することで陰を複数つけることができるようになります。

h1{
color: #000;
font-size: 40px;
text-shadow: #green 6px 6px, #red -12px -12px, #yellow 15px 15px;
}

h1{
margin: 40px;
}

text-shadowプロパティをサポートしたブラウザでは、次のように表示されます。

これを利用すると文字にアウトライン（ふちどり）をかけたようなデザインを実現できるようになります。具体的には、陰を上下右左の4方向に設定するだけなので、とても簡単です。

h1{
color: #fff;
font-size: 40px;
text-shadow: #black 0px -1px, #black 1px 0px, #black 0px 1px, #black -1px 0px;
}

text-shadowプロパティをサポートしたブラウザでは、次のように表示されます。

text-shadowプロパティの実践：トーン＆マナー

text-shadowプロパティは、非常にシンプルで使い方が簡単な分、使い方には非常に工夫が必要なプロパティです。

陰をつける際、「⁠ぼかしの距離」と「X軸の方向」と「Y軸の方向」の値を大きくしすぎると文字の可読性が低下してしまいます。text-shadowプロパティはトーンとマナーをわきまえて適切に使うことが必要です。

それでは、効果的にtext-shadowプロパティを使ってる実例を紹介します。

以下はjeff croftという米国シアトルの有名なデザイナーのホームページです。

このサイトでは、上部ナビゲーションと見出しにtext-shadowプロパティが利用されており、ページに立体感をあたえて見やすさを与えています。

ナビゲーションのデザインを設定しているCSSのtext-shadowプロパティ部分をみてみると、{text-shadow:0 -1px 0 #8C4E0D;}とY軸にのみ-1pxというわずかな値が設定されているのが分かります。

このように、text-shadowプロパティは非常にクリエイティブなことができるプロパティです。しかし、文字のサイズに依りますが、12px程度の文字サイズであれば、1px～2px程度がX軸、Y軸、ぼかし距離のそれぞれの値の限界と思います。それ以上を指定すると逆に非常に読みづらくなりますので、自分で試してベストなセッティングを見つけましょう。

text-shadowプロパティの実践：ナビゲーション

さらに、実践的なtext-shadowプロパティの使い方を考えてみましょう。アップルのサイトのナビゲーションをよく見ると、テキストに陰がついているのが分かります。

アップルのサイトでは画像を使っていますが、これはtext-shadowプロパティで作成することができます。

<ul>
<li><a href="" title="">ホーム</a></li>
<li><a href="" title="">商品一覧</a></li>
<li><a href="" title="">配送方法</a></li>
<li><a href="" title="">アクセス</a></li>
<li><a href="" title="">会社概要</a></li>
</ul>

html{
font-family: verdana, sans-serif;
font-size: 12px;
}

ul li{
display: inline;
float: left;
border-left: 1px solid #333;
}

ul li:last-of-type{
border-right: 1px solid #333;
}

ul li a{
display: block;
padding: 10px 30px;
background-color: #ccc;
text-decoration: none;
}

ul li a{
color: #292929;　　　　/* ロールオーバー時の文字色*/
text-shadow: #fff 1px 1px 0px;　　　　　/* ロールオーバー時のtext-shadow*/
}

ul li a:hover{
color: #fff; 　　/* ロールオーバー時の文字色*/
text-shadow: #000 1px 1px 0px;  /* ロールオーバー時のtext-shadow*/
background-color: #666;   　/* ロールオーバー時の背景色*/
}

text-shadowプロパティをサポートしたブラウザでは、次のように表示されます。

本来、アップルのサイトのようにテキストにドロップシャドウなどがある場合は画像を使いますが、text-shadowプロパティを利用すると画像を使わずファイルサイズを小さくできます。

また、なるべくソースをシンプルにして見やすくするために、上記サンプルのCSSでは:last-of-typeというCSS3のセレクタ（構造擬似クラス）を利用しました。

text-shadowプロパティを利用できるブラウザ

今回、text-shadowプロパティの使用方法を説明してきましたが、現在、text-shadowプロパティをサポートしているブラウザは以下のとおりです。

• safari3
• chrome
• firefox3.1
• Opera9.6

次回はCSS3 UIモジュールを説明します。

参考文献：

• jeff croft
• Web Style Sheets CSS tips & tricks