CSS3大接近

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

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

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 文字にアウトライン(ふちどり)をかけたサンプルの表示結果

著者プロフィール

菊池崇(きくちたかし)

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

バックナンバー

CSS3大接近

コメント

  • 色指定の間違い1年以上放置されてますね

    カラーコードでの色指定は#で始めますが
    色名では#はつけません。
    でもIEは許容するのかもしれませんが、少なくともfirefoxでは受け付けられませんでした。
    W3Cに合わせましょう。

    Commented : #3  安達 (2011/07/21, 12:10)

  • サンプルの影の色指定、間違ってますよ〜

    色名に#がついているので、表示されません。
    一応サンプルなので、修正した方がよろしいかと。

    Commented : #2  enri (2010/03/04, 19:59)

  • Re:

    可読性のことを考えるのなら、文字色と背景色で十分読みやすいものにしておくべきだろう。
    text-shadowプロパティに対応していない視覚系ブラウザやユーザースタイルシートでtext-shadowプロパティを無効にした環境では読みづらいものを提供することになる。

    Commented : #1  key-child (2009/01/12, 01:53)

コメントの記入