HTML5&CSS3入門 with HTML5 パック 第5回 text-shadowによるテキストの装飾
作成日
20 April 2011
ページ ツール
必要条件
本連載では、Webデザイナーに向けて、HTML5／CSS3でWebデザインや制作手法はどう変わるのかを解説していきます。主なHTML5／CSS3の役割や機能を学んでいただくとともに、サンプル作成を通してコーディング手法を習得していただくことを目的としています。なお、サンプル作成のツールとして「HTML5 パック for Dreamweaver CS5」を使用します（詳しくは、「HTML5 Pack for Dreamweaver CS5 の使い方」をご覧ください）。HTML5 パックをインストールするには、Dreamweaver CS5のアップデータ11.0.3を適用する必要があります。
※HTML5とCSS3は現在策定中の草案です。本連載は執筆時点の草案の内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。
前回では、「@font-face規則（ウェブフォント）」という、CSS3で新たに登場するフォント適用の仕組みについて紹介しました。今回は「text-shadow」という仕組みを利用し、ウェブフォントが適用されたテキストに対してさらなる装飾を行います。
テキストを装飾する
前回、"テキスト"に対してウェブフォントを適用する方法を紹介しました。"テキスト"はウェブフォントが適用されていようとも、一般のテキストには変わりありません。そのため、ウェブフォントが適用されたテキストにもcolor、font-size、letter-spacing、さらにはtext-shadowなど、さまざまなCSSプロパティが有効です。
今回は、text-shadowの記法と効果を紹介するとともに、サンプルの見出しテキストに対してtext-shadowを適用していきます。
サンプルを見る：前回作成したHTML5文書
text-shadowとは
text-shadow（テキストシャドウ）は、CSS3で登場する、テキストを装飾するための仕組みです。その名前の通り、テキストに対して影を付けることができます。これにより、一般のテキストであるにもかかわらず、より高度な装飾が可能となるのです。
＜text-shadowの適用例01＞
1. .sample1{
2. text-shadow:3px 6px 8px #333333;
3. }
※text-shadowは、CSS2で不完全な状態で存在していましたが、CSS2.1ではいったん削除されてしまい、CSS3 Textに取り込まれ再登場することとなりました。
text-shadowプロパティを適用するには、その値に「影の横方向の距離」「影の縦方向の距離」「ぼかしの強さ」「影の色」を指定し、次のように表記します。
さらに、「,」(カンマ)区切りにすることで、1つのテキストに対して、複数のtext-shadowを適用することができます。この場合、先に記述した値の効果が上に重なります。
＜text-shadowの適用例02＞
1. .sample1{
2. text-shadow:-10px -10px 6px #3CC3, 10px 10px 6px #F33;
3. }
なお、各ブラウザーのtext-shadowプロパティ対応状況は次の通りです。
| ブラウザー | 対応バージョン | 備考 |
|---|---|---|
| Internet Explorer | 未対応（バージョン9含む） | 似た効果として、ShadowやDropShadowフィルタをサポートしている |
| Firefox | 3.5+ | - |
| Opera | 9.5+ | - |
| Safari | 1.1+ | 複数のtext-shadowは4.0+ |
| Chrome | 2+ | - |
サンプルにtext-shadowを適用する
では、実際にサンプルにtext-shadowを適用してみましょう。前回ウェブフォントで装飾した大見出しテキストをtext-shadowで装飾するために、次のような追記を行います。
1. hgroup h1{
2. font-family:'font1';
3. font-size:300%;
4. text-shadow:2px 2px 4px #030;
5. margin:0;
6. }
これにより、大見出しテキスト（hgroup内のh1）に対して、右に2px、下に２pxずらした場所に、ぼかし具合4pxの#030（濃い緑色）の影を表示できます。
CSSの入力時、Dreamweaverを利用していれば、text-shadowの入力補完もサポートされているので、スムーズに入力できるでしょう。
text-shadowは複数適用することもできます。上記に対して、さらに影を追加するために、「,」（カンマ）区切りで値を追記します。
1. hgroup h1{
2. font-family:'font1';
3. font-size:300%;
4. text-shadow:1px 1px 2px #9c9,2px 2px 4px #030;
5. margin:0;
6. }
先程の影の上に、薄い緑色の影を重ねて表示することができます。複数の影を適用することで、より立体的に表示することができました。
さらに副題部分にもtext-shadowを適用してみましょう。副題のフォントは大見出しに比べて小さいフォントです。そのため、あまり派手な効果を適用すると、かえって読みづらくなってしまうでしょう。しかし、わずかにtext-shadowを適用することで、質感をぐっと高めることができます。
1. hgroup h2{
2. font-size:114%;
3. margin:0;
4. font-family:'font2';
5. text-shadow:1px 1px 1px #696;
6. }
サンプルを見る：今回作成したサンプル「HTML5Pack005_sample」
text-shadow利用時の注意点
適度に利用する
text-shadowを利用すぎてしまうと、その分ブラウザーに負荷がかかってしまいます。そのため、あらかじめよく試し、問題のない範囲で利用するようにしましょう。
可読性をtext-shadowに頼り過ぎない
Internet Explorerはバージョン9も含めてtext-shadowには対応していません。そのため、text-shadowが前提のテキストは読めない環境もあるということを覚えておきましょう。例えば、次のようにtext-shadowでアウトラインを作る例などが該当します。
Google Chromeでは、フォントがなめらかになる
Chromeではtext-shadowを適用したフォントがなめらかになるという特徴があります。これは、Windows XP環境のChromeでも同様のため、OSのフォントのアンチエイリアス設定がデフォルトでオフであるWindows XP環境に対しては、有力な表現手法でしょう。
一方、hover時のみ、text-shadowを適用するといった場合、その動作に違和感がでてしまうことも覚えておきましょう。これはChromeに限った内容です。
まとめ
CSS3では、レイアウトに関する機能だけではなく、ウェブフォントやtext-shadowといった、フォントやテキストに関する装飾も新たに登場します。これにより、「Web上のテキスト」の見た目はとても強化されます。特に、text-shadowはベンダープレフィックスも必要とせず、利用方法はわかりやすい内容です。また、text-shadowは国内でも企業サイト、ショッピングサイトなどといった一般的なWebサイトでも利用されています。
CSS3というと、特にレイアウトや背景の装飾などに注目されがちですが、この前回／今回の記事をきっかけにCSS3の"テキスト表現力"についてもチェックしてみてはいかがでしょうか。CSS3のフォント／テキスト表現を知るには次の文書が参考になります。
- CSS Fonts Module Level 3 （font-sizeやウェブフォントなど、フォントに関する内容）
- CSS Text Level 3 （text-shadowやtext-outlineなど、テキストに関する内容）
- CSS3 Ruby Module （ルビ/注釈表現に関する内容）
- CSS Writing Modes Module Level 3 （縦書きなどに関する内容）
次回はInternet Explorer 6～8向けのCSS3 polyfill（穴埋め）を解説します。
