CSS3 は CSS2.1 を元に機能を細分化(モジュール化)したもの
モジュールごとに仕様の策定が進められている
まだ勧告候補のものや草案段階のものもあり、今後仕様が変更される可能性がある

スタイルの切り替えを行うメディアクエリも　CSS3 の機能の1つ。
CSS3 を使用すると、以前の CSS では表現できなかったドロップシャドウや角丸、
グラデーションなどを容易に実現できるため、個別に画像を用意する場合と比べ、
ファイルサイズが小さくなるメリットもある。

TIPS
* CSS3 と HTML5 は独立技術なので、必ず組み合わせて使わなくてはならないわけではない
* HTML4 + CSS3 や XHTML + CSS3　の組み合わせでも問題なく利用可能

CSS3で追加された主なプロパティ

text-shadow プロパティ

フォントに影をつける

text-shadow: 横方向のズレ幅　下方向のズレ幅　ぼかし具合　影色;

textshadowプロパティの指定例.css


p {
    text-shadow: 3px 3px 2px #555 
}

box-shadowプロパティ

ボックスに影をつける

box-shadow: 横方向のズレ幅　下方向のズレ幅　ぼかし具合　影色;

bos-shadowプロパティの指定例.css

p {
    box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.3);
}

border-radiusプロパティ

要素の角を角丸にする

border-radius: 楕円半径の長さ;

border-radiusプロパティの指定例.css

p {
    border-radius: 25px;
}

RGBaプロパティバリュー

要素に対して透明度を持った色を指定する
1.0は透明度無し状態、0.0は透明になり、透明度は0.0〜1.0で指定する
RGBの各色の指定値は、0~255または0%〜100%で指定する
color プロパティ以外にも、border-color、background-color、text-shadow、box-shadow など様々なプロパティに指定できる

color: rgba (赤, 緑, 青, 透明度);

HTML5&CSS3の対応状況確認

参考サイト

Can I use
：各ブラウザの HTML5 や CSS3 の要素・API への対応状況を確認できるサイト
　要素や API をクリックすると対応状況が確認できる

findmebyIP
：各ブラウザの HTML5 や CSS3 への対応状況を確認できるサイト
　Chrom、Safari、Firefox、IE(IE6〜IE9)の対応状況が一覧確認できる

CSS3のテンプレート作成

主に以下の項目を設定する

①文字エンコードの設定
②clearfix の設定
③ブレイクポイントの設定

プレイクポイントとは

レスポンシブWebデザインにおいて「表示するレイアウト」を切替える画面サイズ」である
サイト設計の早い段階でブレイクポイントを決定することが重要

ブレイクポイントの指定例.css

/* 481px [tablet-size] */
/* min-width; 481px と min-width; 769px の値がブレイクポイント */

@media only screen and (min-width; 481px) {
    nav {
        margin: 0 0 0 7%;
        padding: 0 0 0 7%;
        background-color: #6B69b9;
        }
}

/* 769px [PC-size] */

@media only screen and (min-width; 769px) {
    article.main {
        width; 65%;
        float: right;       
        }
}

ピクセル密度と devicePixelRatio

ブレイクポイントを決定する際は各デバイスに搭載されているディスプレイの「ピクセル密度」に注意する必要がある
ピクセル密度とは1インチあたりのピクセル数

解像度例
* 非Retina ディスプレイの iPhone: 320px × 480pxx
* Retina 　ディスプレイの iPhone: 640px × 960pxx

ブレイクポイントの決定方法

どの画面サイズ以下でスマートフォン向けのレイアウトを表示するのか考慮する
どの画面サイズ以下でタブレット向けのレイアウトを表示するのか考慮する
最適なブレイクポイントはサイトのデザインやレイアウト、情報量により異なる
既存ページのブレイクポイントを参考にする

参考サイト：
Adobe HTML5 特設サイト
（ブレイクポイント：520pxと920pxの２種類）

Microsoft社
（ブレイクポイント540pxと680pxと900pxの3種類）

この記事の参考書籍

レスポンシブWebデザイン「超」実践デザイン集中講義
山崎大助著

CSS3の基礎知識