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