CSS3で追加された機能

CSS3は2011年に発表されました。
全体がモジュール化(まとまりのある要素、という意味)され、ユーザーはどのモジュールを利用するのか、自由に選択できるようになりました。

なお、モジュールごとに仕様の策定が進められていて、まだ草案段階のものもあるため、今度も仕様が変更されていく可能性はあります。
CSS3とHTML5はそれぞれ独立した技術ですので、必ず組み合わせて使わなければならないということはありません。

また、HTML4とCSS3、XHTMLとCSS3といった組み合わせでも問題なく利用することができます。

CSS3に追加された機能としては、以下のようになっています。

グラデーション

グラデーションを指定することができます。

変形

要素の回転など、2Dの範囲内で変形することができます。

角を丸くする

四角の要素などの、四隅を丸くすることができます。
指定する際は、半径をpxで指定します。

ボックスレイアウト

どこに子要素を並べるのかを指定することができます。

ボックスシャドウ

ぼかしの陰を入れることができます。

テキストシャドウ

文字に影がついているような表示にすることができます。

段組み

要素の内容を段組みにすることができます。

アニメーション

色の変化など、アニメーションを指定することができます。

複数背景

背景画像を複数枚指定することができます。

ブラウザの対応状況

まだ全てのブラザに完全に対応している訳ではないので、プロパティによっては、独自のプロパティを用意する必要がある場合があります。

対応しているブラウザ

・Internet Explorer 9/10/11
・Firefox 29
・Google Chrome 34
・Safari 5
・Opera 12

まとめ

CSS3についてご存知の方は多いかもしれませんが、各バージョンごとの違いまで知っている方は少ないと思います。

細かい内容まで把握しておく必要はありませんが、どのような機能が追加されてきているのかで、今Webデザインに求められる要素を垣間みることもできます。
なかなか調べる機会もないと思いますので、まめ知識として知っておくとよいでしょう。

このニュースを読んだあなたにオススメ

CSSの基本～スタイルシートとは
ホームページ制作に必須！CSS・JavaScriptについての基礎知識を確認するための設問3つ
コピペで簡単実装！CSS3でオシャレなデザインのサンプルコード23選

このニュースに関連するカリキュラム

CSSの基本～スタイルシートとは

CSSの基本～スタイルシートとは

現在のホームページは、内容とデザインとをわけてプログラミングすることが増えています。デザイン部分を担うプログラミング言語をCSSといいます。文字サイズやレイアウトなどを細かく指定します。