CSS3とは、従来のCSSに便利な仕様がたくさん追加された最新の装飾手段のことです。

CSSは、1996年12月の「Cascading Style Sheets, level 1 (CSS1)」勧告からはじまり、1998年5月の「Cascading Style Sheets, level 2 (CSS2)」の勧告、2004年にCSS2のマイナーチェンジCSS2.1経て、現在のCSS3が誕生しました。

ここでは、初心者がもっとも効率よく新しい装飾方法CSS3の書き方を学ぶことができる入門サイトから、実践Tipsを紹介してくれている便利なサイトを紹介しています。CSS3ってなんだろうと気になっていた方は、是非この機会に技術を修得しましょう。

※従来CSSの役立つTipsはこちら→ゼロからのCSSの学び方

CSS3基本解説サイト

ドットインストール～CSS3入門

CSS3入門 (全19回)の無料動画で、学ぶことができるもっとも基礎を学びやすいサイト。多彩な表現力でWebサイトの見た目を制御することができるCSS3の基礎からしっかり確認できます。

CSS3リファレンス

CSS3タグのクイックリファレンス。ドットインストールの無料動画の学習と一緒に利用することで、タグの理解が深まります。実際のタグの書き方や、ブラウザ表示例もあるので、初心者にとってわかりやすいです。

css3ブラウザ対応表

HTML5 & CSS3 Support

CSS3のプロパティ、セレクタのブラウザ対応表です。一目でわかるのでCSS3利用時は確認しましょう。

CSS3の活用Tips

CSS3のtext-shadowを使ったテキスト装飾のサンプル集

テキスト装飾のサンプルコードが紹介されています。

CSS3の役立つTipsのまとめ

様々な小技を紹介してくれています。まとめて書くことができるCSSプロパティの8つのパターンなんかS.Sも参考にしたい内容でした。

背景画像の拡大・縮小 → background-size !

background-sizeを使ったデモページも用意してくれているので、どんなことができるか確認してみよう。

一夜漬けでCSS3をマスターするために見ておくべきコードのまとめ

基本事項から幅広い小技をマスターできます。コメントにも書いてあるが、いっぱいTipsが紹介されてます。

コピペで簡単にCSS3アニメーションを実装

CSS3アニメーションってこんなこともできるのか!とびっくりしました。なかなか使う機会ないかもしれませんが、誰かのために。

すぐに利用できる、美しいボックスシャドウと角丸のスタイルシート

利用することも多い、ボックスシャドウと角丸のスタイルが多数紹介されています。

CSS3Generator

Grad2 -CSS3 Easy Gradation Editor-

CSS3Generatorよりも直観的にグラデーション背景のコードを作成できます。

CSS3 Generator

数値を指定して簡単にコードを生成できます。CSS3の理解を必要とします。

まとめ － CSS3修得

CSS3プロパティ、セレクタは、IEや一部のブラウザで非対応です。実装する際は、ブラウザ対応表を必ず確認して、非対応ブラウザに対応しましょう。

今のところ、「background-size」「border-radius」「box-shadow」「background gradient」「text-shadow」ぐらいしか利用しなさそうですが、HTML5とCSS3は急速に普及しているので覚えておいて損はしないでしょう。

なお、CSS3のMedia Queries（メディアクエリ）※1 の実装方法に関しては、スマホに関する記事を書く時にまとめます。

※1 Media Queriesとは、ユーザーが使用しているデバイスサイズに合わせてスタイルシートを振り分けることの出来る機能です。