CSS3大接近

第1回 text-shadow実践テクニック

この記事を読むのに必要な時間:およそ 3 分

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

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

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

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

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

図5 jeff croft

図5 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プロパティの使い方を考えてみましょう。アップルのサイトのナビゲーションをよく見ると,テキストに陰がついているのが分かります。

図6 アップル

図6 アップル

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

リスト5 実践的なナビゲーションのサンプル(ナビゲーション部分のHTML⁠⁠:sample-navigation.html

<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>

リスト6実践的なナビゲーションのサンプル(CSS⁠⁠:sample-navigation.html

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プロパティをサポートしたブラウザでは,次のように表示されます。

図6 実践的なナビゲーションのサンプルの表示結果

図6 実践的なナビゲーションのサンプルの表示結果

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

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

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

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

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

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

参考文献:

著者プロフィール

菊池崇(きくちたかし)

ActLink株式会社にてプロデューサー,allWebクリエイター塾ではXHTML+CSS,microformatsの講師。また,11月に行われたWeb Directions Eastのプロデューサーでもありmicroformats japanの代表。

バックナンバー

CSS3大接近