CSS3大接近

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

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

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

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

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

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

セレクタ { 
  text-shadow: ぼかし色 X方向への距離 Y方向への距離 ぼかしの距離
}
ぼかし色
ぼかし色はRGB色名にて指定が可能。#000RGBの黒だが、blackでも指定することが可能。ぼかしの色は、text-shadowプロパティの値として一番最初に記述しても、一番最後に記述しても同じ結果になる。
X方向への距離
右へ陰の距離を指定する。プラスの値だと右方向へ、マイナスの値だと左方向へ陰が移動する。単位はpxでもemでも使用可能。
Y方向への距離
上下方向への陰の距離を指定する。プラスの値だと下方向へ、マイナスの値だと上方向へ陰が移動する。単位はpxでもemでも使用可能。
ぼかしの距離
値が大きくなれば、ぼかし具合が大きくなる。逆に値が小さいくなれば、ぼかし具合は小さくなる。単位はpxでもemでも使用可能。ぼかしの距離が未記述の場合、ぼかしは適用されない。

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

リスト1 text-shadowプロパティを用いたサンプル:sample-simple.html
h1{
font-size: 40px;
text-shadow: gray 1px 2px 1px;
}

h1{
margin: 40px;
}

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

図1 text-shadowプロパティを用いたサンプルの表示結果
図1 text-shadowプロパティを用いたサンプルの表示結果

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

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

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

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

リスト2 可読性を考えたサンプル:sample-pale.html
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プロパティをサポートしたブラウザでは、次のように表示されます。

図2 可読性を考えたサンプルの表示結果
図2 可読性を考えたサンプルの表示結果

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

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

リスト3 影を複数つけたサンプル:sample-multiple.html
h1{
color: #000;
font-size: 40px;
text-shadow: #green 6px 6px, #red -12px -12px, #yellow 15px 15px;
}

h1{
margin: 40px;
}

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

図3 影を複数つけたサンプルの表示結果
図3 影を複数つけたサンプルの表示結果

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

リスト4 文字にアウトライン(ふちどり)をかけたサンプル:sample-outline.html
h1{
color: #fff;
font-size: 40px;
text-shadow: #black 0px -1px, #black 1px 0px, #black 0px 1px, #black -1px 0px;
}

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

図4 文字にアウトライン(ふちどり)をかけたサンプルの表示結果
図4 文字にアウトライン(ふちどり)をかけたサンプルの表示結果

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モジュールを説明します。

参考文献:

おすすめ記事

記事・ニュース一覧