Lesson 02 text-shadowで文字をリッチで読みやすく - Webデザイン表現&技法の新・スタンダード・CSS3&HTML5編

Webデザイン 表現&技法の 新・スタンダード

Lesson 2

text-shadowで 文字をリッチで読みやすく

	制作・文			山田敬美
＞	To Use			CSS
＞	Browser			Firefox 3over | Safari 4over

text-shadowはその名のとおり、テキストに影をつけるプロパティだ。うまく使えば画像を使わずとも、テキストを際立たせることができる。運用の効率化や、テキストコピーができるなどメリットも多い。

基本的な指定方法は、テキストから影までの距離（縦、横）とぼかしサイズ、影の色を指定して調整する【1-1】。CSS3でよく使われる、-moz-や-webkit-などのベンダープレフィックスの記述は、textshadowでは必要ない。カンマで区切れば、1つの要素に対して複数の影を指定できる【1-2】。また、影の色はrgba（半透明）で指定することもできる。影を半透明にしておけば、どのような背景色でも自然になじませることができるので便利だ【1-3】。


【1-1】「ぼかしサイズ」と「影の色」は省略可能


【1-2】カンマ(,)区切りで複数指定できる。工夫次第で複雑な表現も可能だ


【1-3】カラーコードをrgbaの指定に置き換えれば影を半透明にできる

text-shadowの使い方次第では、かえってテキストが読みづらくなってしまうこともあるため、使うポイントはしっかりと押さえたい。本文へのぼかしのかかった影の指定は、読みづらくなる場合が多いため避けた方がよいだろう。見出しやボ タンなど、本文と区別して目立たせたい箇所や、立体感などの特殊な効果が必要な箇所に限定して使うと効果的だ【2-1】【2-2】。

そのほかの用途として、動画の字幕にも使えるだろう。単色のテキストでは場面の色合いによってテキストが読みづらくなるが、テレビや映画での字幕のように白いテキストに黒いアウトラインをつければ、どのような色合いでも読みやすくなる。HTML5で追加されたVIDEO要素と一緒に活用してみるのもよいだろう。


【2-1】見出しに影をつけて強調することで、本文と見出しが区別され、よりわかりやすくなる


【2-2】ボタンのテキストに凹んだ効果をつけることで、立体感が出る

続いてCSSを書いていく。といっても大した指定はない。

"写真の上に配置したテキストにアウトラインをつけて読みやすくしてみよう【3-1】。CSSでの指定方法は、カンマ(,)で区切って影を4つ作成し、それぞれ上下左右に1pxずつずらせば、アウトラインのように見せることができる【3-2】【3-3】。


【3-1】通常のテキスト（上）でも読めなくはないが、アウトラインがある方（下）がはっきりと読める


【3-2】.outlineにだけアウトライン効果をかけて比較


【3-3】カンマ(,)区切りでtext-shadowを複数指定し、それぞれの位置を上下左右に1pxずつずらしている

iPhoneのUIもCSS3でほぼ再現可能だ。ヘッダ部分のテキストにはエンボスがかかっており、バーやボタンのグラデーションと合わせることで立体感を出している【4-1】。上部に1pxの半透明の影をつけると、凹んだような効果をつけることがで きる【4-2】【4-3】。なお、ここではテキストに関わる部分以外の記述は省略しているが、CSS3のグラデーションや角丸などを使い、すべて画像を使わずに実装している。


【4-1】見出しとボタンのテキストに凹んだ効果がかかっているため、バーやボタンが立体的に見える


【4-2】HTMLはシンプルな指定でよい


【4-3】text-shadowで上方向に1pxの半透明の影を指定

::selection でテキスト選択時の背景色と文字色を指定している場合、textshadowが指定されている箇所が読みづらくなる場合がある【5-1】。::selectionを使う場合は、テキスト選択時のtextshadowの値をnoneにするとよい【5-2】【5-3】。または、text-shadowのカラー指定をrgbaにすることでも回避できる。


【5-1】本文に凹んだ効果がかかったような指定。範囲選択すると文字が読みづらくなる


【5-2】


【5-3】選択時にtext-shadowを外すことで、文字が読みやすくなった

印刷時にtext-shadowがかかっているとテキストが読みづらくなるため、印刷用CSSの指定でtext-shadowを外す配慮も心がけよう【6-1】。


【6-1】印刷プレビューの図。プリントアウトでもtext-shadowは反映される