この記事を読むのに必要な時間：およそ 1 分
スタイルシートは，HTML文書のデザインを記述する際に使用されます。スタイルシートとはどういうものかを簡単に振り返りつつ，実際に最新のCSS3を使ったデザインを試してみましょう。
スタイルシートとは
Webページの表示内容は，HTML言語で記述されますが，HTML文書には構造と書式（デザイン）に関する記述が混在していました。そのため，HTML文書の見通しが悪くなる，同じ書式を別の箇所に適用するときに効率が悪い，などのデメリットがありました。書式に関する記述を分離するという考えから，「スタイルシート」が誕生しました。
スタイルシートには「CSS」という規格があり，W3Cという標準化団体が策定しています。また，CSSには3つのレベルがあり，レベル1とレベル2（および改訂版の2.1）の規格が勧告されています。
CSSレベル3も現在策定が進められており，CSSレベル2よりも，さらに細かく書式設定を行うことができるようになっています。CSS3では，機能ごとにモジュール化され，一部のモジュールは勧告されています。
CSS3を試してみる
実際にCSS3を使ってみましょう。今回，文字に影をつけるtext-shadowプロパティを紹介します。text-shadowプロパティは，多くのWebブラウザに実装されていますが，Internet Explorerは，9以前では対応していない点にご注意ください。
text-shadowプロパティは，文字の影を，2つまたは3つの数値と，色を表す値の組み合わせで指定します。最初の2つの数値で，文字と影の離れ具合を表します。また，3つ目の数値で，影をぼかす際の幅を指定します。影を表す文字列をコンマで区切って，複数の影をつけることもできます。
まず，次のようなHTMLを書いておきましょう。
shadow.html
1. <!DOCTYPE html>
2. <html lang="ja">
3. <head>
4. <meta charset="utf-8">
5. <link rel="stylesheet" type="text/css" href="style.css">
6. <title>CSS3のテスト</title>
7. </head>
8. <body>
9. <p class="shadow">影付きの文字</p>
10. </body>
11. </html>
5行目に，「style.css」というCSSを外部ファイルとして読み込む指定を記述しています。
まだCSSを記述していない段階で，Webブラウザに表示してみると，次のようになります。
次に，CSSを記述します。
class属性が「shadow」に指定された要素に対して，書式設定を行うように記述します。設定内容ですが，まずフォントの色を#ff0000，サイズを48pxにします。その上で，text-shadowにより，横に5px，縦に2px離れた影をつけます。影のぼかし幅は2px，色は#ff9999です。
style.css
1. .shadow { color : #ff0000; font-size: 48px; text-shadow: 5px 2px 2px #ff9999; }
それでは，作成したCSSファイルを同じディレクトリに保存して，Webブラウザに表示してみましょう。
CSS3をもっと活用しよう
最近のWebブラウザでは，CSS3の実装が進みつつあります。ターゲットブラウザが限定されるケースなどから，活用事例が増えていくでしょう。今後のために，積極的に使っていきましょう
