機能が増えて表現の幅が広がったCSS3

CSS3とは

「CSS3」という単語をHTMLを学んでいるとよく目にしませんか？
CSS3について簡単に説明すると、CSS（スタイルシート）の規格のひとつなんです。
このCSSには、規格のバージョンがあり、最初のCSSは「Cascading Style Sheets, level 1」で「CSS1」と表記されています。その後改良を加えられた「CSS2」が1998年に、「CSS2.1」が2011年に使われるようになりました。
その次の規格として2011年から策定が進んでいるのが「CSS3」なんです。

HTML5とセットではない

よくHTML5とCSS3がセットで見かけますが、一緒に使わなければならないという制限はありません。

便利な仕様が増えたCSS

CSS3になったからといって、今までのCSSと記述が変わるという事はありません。文法はそのままに、新しく使う事のできる機能が追加されたので、表現の幅が広がりました！！
CSS3と以前のCSSが混在しているからといって、書き直したりするもなく、「新しく使える様になった機能を使いたい」という場合には今までのCSSに追加する形で書き込めば、きちんと動作しますので安心してください。

CSS3から新たにできるようになったことをいくつか紹介します。

1.角を丸くすることができるようになった

角を取って丸くしたデザインにしたい場合、背景に角を丸くした画像を入れて作らなければできませんでした。
ですが、CSS3で新たに追加された機能を使えば、1行で簡単に角を丸くすることができます。

border-radius:15px;と記述してあげる事で、角が丸くなります！！
「15px」と書きましたが、もちろんお好みの数値を付けても大丈夫です！emや%を指定する事もできちゃいます！！

以前のように画像を使って表現する場合だと、背景用の画像を読み込む必要があるので、ページ全体のファイル容量がその分増えてしまいます。ファイル容量が増えれば表示までの時間にも差が出てきてしまうので、なるべく画像を少なく、ファイル容量を軽くした方が見る人にとって優しいページになります。
また、「線の色を変えたい」「背景の色を変えたい」となった場合でも、背景に入れる画像を作り直す作業がなくなるので、変更も簡単にできるようになります！

2.影を付けることができるようになった

影を付けたデザインをしたい場合、どうしても画像にしなければなりませんでした。文字の変更、大きさの変更など、何か修正があるたびに画像を作り直して、アップするという一連の動作が必要で、一文字だけ変えたり、文章を入れ替えるだけの一見簡単な作業でも予想外の時間がかかることも多くありました。
CSS3には影を指定するプロパティが追加されたので、簡単に影を付ける事ができるようになりました！！

文字に影を付ける場合は、text-shadow: (右距離) (下距離) (ぼかし具合) (影の色);で影を付けることができます。
例えば「text-shadow: 6px 5px 2px #666;」このような記述になります。
右距離に指定する数値を大きくすれば右側に影が伸びます。
下距離に指定する数値を大きくすれば下側に影が伸びます。
この数値には負の値（例えば-12px）も設定する事ができます。
右距離に負の値を設定した場合は左側に影が伸び、下距離に負の値を設定すれば上側に影が伸びます。

要素へ影を付ける場合は、box-shadow: (右距離) (下距離) (ぼかしの距離) (影の拡がり) (影の色);で影を付けることができます。
例えば「box-shadow: 10px 10px 10px 10px #000;」このような記述です。
右距離・下距離は文字の影付けと同じ考え方です。数値を大きくすれば右側・下側へ影が伸び、負の値を設定すれば左側・上側に影が伸びます。
ぼかしの距離に指定する数値を大きくすると、ぼかしが強くなります。
影の広がりに指定する数値を大きくすると、影の範囲が広くなります。
ちなみに、影の色に続けて「inset」を入力すれば、外側についていた影が要素の内側へ向きます。

3.アニメーションを与えることができるようになった

「transition」というプロパティを使って、アニメーションを付ける事ができるようになりました。
例えば下記の様につかいます。

このような記述で.animationの要素にマウスを乗せた時（hover)、背景色を0.3秒かけて赤から緑に変化します。
更に「width」も設定してあるので、マウスを乗せた時に0.3秒かけて横幅が倍に広がるアニメーションが出来上がりです。
変化前と変化後を指定して、その変化にかかる時間を「transition」を使って指定します。

画像を使わなければ表現できなかったことや、アニメ―ションなどもCSS3で表現できる

以前であれば画像を使わなければ表現できなかったデザインや、flashやアニメーションgifを使わなければ表現できなかったアニメーションをCSS3で表現できるようになりました。
このことで、変更にかかる時間を大幅に削減できたり、動きのあるホームページをデザインする事に役立ちます！
さらにCSS3への記述は文字情報なので、ページ全体のファイル容量はそれほど増えません。

CSS3は今まで使っていたCSSへ追加して使えるので、ぜひ使ってみてください。

ブラウザによっては再現できない場合もある

これだけ便利なCSS3ですが、ホームページを見るブラウザによっては指定したデザインが再現されない場合もあります。
残念ながらInternet Exploerでは9以前ではCSS3で追加された機能のほとんどが動作しません。
最近では少なくなりましたが、ブラウザによっては動作しないものもいくつかあります。
とても便利なCSS3ですが、古いバージョンのInternet Exploerなどにも対応させなければならないページの場合、必ず表示のチェックを行う様にしてください。

まとめ

・CSS3はHTML5とセットではない
・今までのCSSと混ぜて使える
・CSS3では新しく使える便利な仕様が増えた
・ブラウザによって動作しないプロパティもある
・古いブラウザへの対応は困難