CSS3の機能を試す！

CSS3では何ができるのか？

　CSS+XHTMLでWebページを作っていると、面倒なことがたくさんありますよね。「なんでこんなところで苦労しなければいけないんだ！」ってことが、本当に多くあります。

　例えば、「文字に影を付きる」ことも大変なことなのです。実現するためには、Photoshopなどで影付きの文字を作成し、GIFに書き出て、それをHTML内にイメージタグで挿入して、alt指定でイメージの説明を書いて…。たった「影付きの文字」を使うだけで、これだけの作業を強いられるなんて、やっていられないですよね。

　このように「デザイン的なことを実現するために強いられている無駄な作業」それを回避できるのがCSS3です。「文字に影を付きる」は、新しく加わったtext-shadowプロパティで簡単に実現できます。「角丸の囲み」を作りたければ、border-radiusプロパティを使えば、これもまた簡単に実現できます。その他にも数多くの便利プロパティが用意されていて、今まで難しかったことが簡単に実現できるようになっています。

　今回はこのように便利なCSS3の機能的な部分にフォーカスしていきましょう。CSS3にはワクワクするような機能や、Webデザインの在り方を変えるような新機能がたくさんあります。これらがどのようなものかを、実例を交えてお届けしていきます。

　CSS3はまだ正式勧告には至っていませんが、FirefoxやSafari、OperaなどではCSS3の機能がすでに実装されています。ぜひこれらの最新ブラウザをダウンロードして、機能を試しながら、この記事を読んで試してみてください。

box-shadowプロパティでボックスに影を付ける

　Webデザインで欠かすことのできない表現手法に「影付き」があります。IllustratorやPhotoshopなどのグラフィックソフトでは当たり前のようにできることではありますが、前述した通りWebデザインにおいては少し面倒なことでした。しかしCSS3では、これらを簡単にするプロパティが加わり、「影付き」の表現が簡単になっています。

　また、ボックスに影が付きられるようになりました。レイアウトの際に目立たせたい箇所ってありますよね。そういう時にはうってつけのプロパティが、このbox-shadowです。このbox-shadowプロパティを使うと、簡単に影付きのボックスを作成することができます。Webページ内のボックスに影を付きてユーザに注目してもらうということが、簡単にできるようになります。

　今はボックスに影を付きようとすると、けっこう面倒です。特にボックスのサイズを可変で作る場合には工夫が必要です。筆者もサイトをデザインする時に、この影付きのボックスをよく使いますが、いつも苦労します。CSS3のbox-shadowプロパティは、このような苦労からは解放してくれます。

　「-webkit-box-shadow: 5px 5px 5px #888;」だけで美しい影が表示されます。数値は、「水平方向」「垂直方向」「影の拡散具合」「影の色」が設定でき、Photoshopのようなコントロールが可能となっています。

　現在はSafariでのみ実装されているのですが、非常に魅力的で効果は絶大です。リスト1、2のコードを実際に記述し、値を変更してbox-shadowプロパティを試してみてください。これも感動ものですよ。

　同じようにテキストにもtext-shadowプロパティで影を付きることができます。これは見出しタグと組み合わせると、面白いかもしれません。

　このように本当に簡単で喜ばしいことですが、これによって影をやたら使っているWebページが増えそうで、少し怖いですね。将来的に「シャドウをオフにする」なんてボタンがブラウザに付きいたりするかもしれません。「機能に溺れてはいけない！」と自分を戒めておきたいです。