Webデザイン |
![]() |
Lesson 2 | text-shadowで 文字をリッチで読みやすく |
制作・文 | 山田敬美 | |||
> | To Use | CSS | ||
> | Browser | Firefox 3over | Safari 4over |
![]() |
text-shadowはその名のとおり、テキストに影をつけるプロパティだ。うまく使えば画像を使わずとも、テキストを際立たせることができる。運用の効率化や、テキストコピーができるなどメリットも多い。 |
01
![【1-1】「ぼかしサイズ」と「影の色」は省略可能](attach/images/201105/Webcre/css3/Lesson2/1-1.jpg)
【1-1】「ぼかしサイズ」と「影の色」は省略可能
![【1-2】カンマ(,)区切りで複数指定できる。工夫次第で複雑な表現も可能だ](attach/images/201105/Webcre/css3/Lesson2/1-2.jpg)
【1-2】カンマ(,)区切りで複数指定できる。工夫次第で複雑な表現も可能だ
![【1-3】カラーコードをrgbaの指定に置き換えれば影を半透明にできる](attach/images/201105/Webcre/css3/Lesson2/1-2.jpg)
【1-3】カラーコードをrgbaの指定に置き換えれば影を半透明にできる
02
そのほかの用途として、動画の字幕にも使えるだろう。単色のテキストでは場面の色合いによってテキストが読みづらくなるが、テレビや映画での字幕のように白いテキストに黒いアウトラインをつければ、どのような色合いでも読みやすくなる。HTML5で追加されたVIDEO要素と一緒に活用してみるのもよいだろう。
![【2-1】見出しに影をつけて強調することで、本文と見出しが区別され、よりわかりやすくなる](attach/images/201105/Webcre/css3/Lesson2/2-1.jpg)
【2-1】見出しに影をつけて強調することで、本文と見出しが区別され、よりわかりやすくなる
![【2-2】ボタンのテキストに凹んだ効果をつけることで、立体感が出る](attach/images/201105/Webcre/css3/Lesson2/2-2.jpg)
【2-2】ボタンのテキストに凹んだ効果をつけることで、立体感が出る
03
"写真の上に配置したテキストにアウトラインをつけて読みやすくしてみよう【3-1】。CSSでの指定方法は、カンマ(,)で区切って影を4つ作成し、それぞれ上下左右に1pxずつずらせば、アウトラインのように見せることができる【3-2】【3-3】。
![【3-1】通常のテキスト(上)でも読めなくはないが、アウトラインがある方(下)がはっきりと読める](attach/images/201105/Webcre/css3/Lesson2/3-1.jpg)
【3-1】通常のテキスト(上)でも読めなくはないが、アウトラインがある方(下)がはっきりと読める
![【3-2】.outlineにだけアウトライン効果をかけて比較](attach/images/201105/Webcre/css3/Lesson2/3-2.jpg)
【3-2】.outlineにだけアウトライン効果をかけて比較
![【3-3】カンマ(,)区切りでtext-shadowを複数指定し、それぞれの位置を上下左右に1pxずつずらしている](attach/images/201105/Webcre/css3/Lesson2/3-3.jpg)
【3-3】カンマ(,)区切りでtext-shadowを複数指定し、それぞれの位置を上下左右に1pxずつずらしている
04
![【4-1】見出しとボタンのテキストに凹んだ効果がかかっているため、バーやボタンが立体的に見える](attach/images/201105/Webcre/css3/Lesson2/4-1.jpg)
【4-1】見出しとボタンのテキストに凹んだ効果がかかっているため、バーやボタンが立体的に見える
![【4-2】HTMLはシンプルな指定でよい](attach/images/201105/Webcre/css3/Lesson2/4-2.jpg)
【4-2】HTMLはシンプルな指定でよい
![【4-3】text-shadowで上方向に1pxの半透明の影を指定](attach/images/201105/Webcre/css3/Lesson2/4-3.jpg)
【4-3】text-shadowで上方向に1pxの半透明の影を指定
05
![【5-1】本文に凹んだ効果がかかったような指定。範囲選択すると文字が読みづらくなる](attach/images/201105/Webcre/css3/Lesson2/5-1.jpg)
【5-1】本文に凹んだ効果がかかったような指定。範囲選択すると文字が読みづらくなる
![【5-2】本文に凹んだ効果がかかったような指定。範囲選択すると文字が読みづらくなる](attach/images/201105/Webcre/css3/Lesson2/5-2.jpg)
【5-2】
![【5-3】選択時にtext-shadowを外すことで、文字が読みやすくなった](attach/images/201105/Webcre/css3/Lesson2/5-3.jpg)
【5-3】選択時にtext-shadowを外すことで、文字が読みやすくなった
06
![【6-1】印刷プレビューの図。プリントアウトでもtext-shadowは反映される](attach/images/201105/Webcre/css3/Lesson2/6-1.jpg)
【6-1】印刷プレビューの図。プリントアウトでもtext-shadowは反映される