CSS3について知っておきたいことのまとめ
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。
過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。

今回は結構ボリュームもあるので目次を作っています。
1. スタイルシートの構造
CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。

もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。
CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。
2. CSS3セレクタ
CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの1つです。
CSS3セレクタはW3CのSelectors Level 3で紹介されています。これを簡単に訳したものがこちら。
2-1. CSS3セレクタ一覧
セレクタ | 意味 | |
---|---|---|
1 | E[foo^="bar"] | foo属性の値がbarで始まっているE要素 |
2 | E[foo$="bar"] | foo属性の値がbarで終わっているE要素 |
3 | E[foo*="bar"] | foo属性の値にbarを含むE要素 |
4 | E:root | 文章内のルート要素であるEという要素 |
5 | E:nth-child(n) | 親要素のn番目の子要素 |
6 | E:nth-last-child(n) | 親要素の後から数えてn番目の子要素 |
7 | E:nth-of-type(n) | n番目にあるE要素 |
8 | E:nth-last-of-type(n) | 最後から数えてn番目にあるE要素 |
9 | E:last-child | 最後にある子要素 |
10 | E:first-of-type | 兄弟関係にあるE要素で最初のもの |
11 | E:last-of-type | 兄弟関係にあるE要素で最後のもの |
12 | E:only-child | 唯一の子要素であるE要素 |
13 | E:only-of-type | 子要素の中で唯一のE要素 |
14 | E:empty | 子要素を持たないE要素 |
15 | E:target | 参照URIの目標となっているE要素 |
16 | E:enabled | 有効になっている(:enabled)E要素 |
17 | E:disabled | 無効になっている(:disabled)E要素 |
18 | E:checked | ラジオボタンやチェックボックスがチェックされた状態のときにE要素 |
19 | E:not(s) | sでないセレクタを持つE要素 |
20 | E ~ F | E要素の後にあるF要素 |
2-2. CSSセレクタの使用方法
個人的に一番使えると思うのが「E:nth-of-type(n)」です。CSS3セレクタを全部説明するときりがないので、これを例に1つだけ紹介してみます。
p:nth-of-type(2n+1) { font-weight:bold; color:red; }
このようにすると奇数番目に表れるpタグにのみ適用されます。
<p>1行目</p> <p>2行目</p> <p>3行目</p> <p>4行目</p> <p>5行目</p>
「n」に数字を入れてもいいのですが、以下のように飛び飛びに適用することもできるので使い勝手がいいです。
:nth-child(odd) ・・・ 奇数番目の要素に適用
:nth-child(2n+1) ・・・ 奇数番目の要素に適用
:nth-child(even) ・・・ 偶数番目の要素に適用
:nth-child(2n) ・・・ 偶数番目の要素に適用
:nth-child(3n) ・・・ 3,6,9,12…番目の要素に適用
:nth-child(3n+1) ・・・ 1,4,7,10…番目の要素に適用
意外と知らない!?CSSセレクタ20個のおさらい|Webpark

CSS3を含めたセレクタについて紹介していますのでぜひご参考に。
保存版!CSS3セレクタの説明書|Webpark
3. CSS3プロパティ
セレクタはなにげなく使っていてピンとこない人もいるかもしれませんが、プロパティは普段意識して使っているのでイメージが湧きやすいと思います。
3-1. CSS3プロパティについて
CSS3プロパティについて紹介されているサイトです。
CSS3リファレンス

有名なサイトですね。いつも参考にさせていただいています。CSS3に限らず、HTMLやJavaScriptなど膨大な情報量です。
CSS3 Files

海外サイトですが非常に見やすいです。各ブラウザの対応状況も載っていて重宝します。
CSS-EBLOG

各ブラウザで先行実装しているCSSプロパティがまとめられています。
3-2. CSS3プロパティジェネレータ
見ているだけではイマイチ使い方が分からないという場合は、ジェネレータをいじってみると理解が深まると思います。
例えばこれ。
CSS3.0 Maker

テキストまわりから、角丸やシャドウ、回転など色々作れます。指定できる要素は以下のとおりです。
- CSS Transform
- Box Shadow
- Text Shadow
- Text Rotation
- RGBA
- @Font Face
- Outline Offset
- Transition
- CSS Gradient
CSS3プロパティの勉強になるジェネレータ16個|Webpark
このほかに色々とCSS3ジェネレータまとめていますのでぜひ。
4. ブラウザごとのCSS3対応状況
CSS3はブラウザによって、対応状況が違っています。
例えば、角を丸くする「border-radius」は、ChromeやFirefoxの最新バージョンでは対応していますが、IE8は対応していません。
ユーザーが使っているブラウザは様々ですので、どのブラウザがどこまで対応できているか知っておく必要があります。
4-1. CSS3の対応状況が分かるサイト
ブラウザごとの対応状況がまとめられているサイトです。これらを見るとIEの対応が非常に遅いのが分かります。IE対策は次で紹介します。
HTML5 & CSS3 Support

こちらもブラウザごとの対応状況がまとめられています。CSS3はプロパティ、セレクタごとで表示されていています。
HTML5 & CSS3 READINESS

HTML5とCSS3のブラウザごとの適応状況を視覚的に見ることができます。2008年からの年別でも見ることができます。
When can I use...

こちらはブラウザのバージョンごとに対応状況が表示されます。Android Browserなんかもあったりします。
4-2. ベンダープレフィックス
あまり聞き慣れない言葉がもしれませんが、CSS3を理解する上で重要ですので、ここで説明します。
ベンダープレフィックスとは
CSS3を見ていると、以下のようにプロパティの前に「-moz-」や「-webkit-」などが頭についていることがあります。
div.sample1 { border:1px solid red; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
これはベンダープレフィックスといって、草案段階のプロパティやブラウザが独自に採用しているプロパティの頭に付けられます。ブラウザごとに違っており、以下のようになっています。
ベンダープレフィックス | ブラウザ |
---|---|
-ms- | Internet Explorer |
-moz- | Firefox |
-webkit- | Safari、Google Chrome |
-o- | Opera |
ベンダープレフィックスは、 草案が勧告候補になったときに外れることになりますが、外れるタイミングはブラウザごとに様々です。
ですので、ブラウザとCSSプロパティによって「ベンダープレフィックスがなくて動くもの」「ベンダープレフィックスがないと動かないもの」「対応していないので動かないもの」があります。
ベンダープレフィックスの確認方法
ここでは、ベンダープレフィックスのいるのかいらないのかは、先ほど紹介した「When can I use... Support tables for HTML5, CSS3, etc」。で確認できます。

まず、「Browser comparison」をクリックして、以下のように選択します

このようにプロパティごとに分かりやすく表示されています。
4-3. CSS3は現在策定中
なぜ、CSS3はプロパティによってブラウザごとに対応状況が違うかというと、現在CSS3は策定中でW3C勧告に向けて思考錯誤を重ねているところであるためです。
W3C勧告へのプロセス
最終のW3C勧告になるまでの流れは以下のようになっています。
W3C勧告プロセス | |
---|---|
Working Draft | 草案 |
Last Call | 最終草案 |
Candidate Recommendation | 勧告候補 |
Proposed Recommendation | 勧告案 |
Recommendation | W3C勧告 |
主なモジュールと進捗状況
また、CSS3は「セレクタ」「フォントに関するもの」「色に関するもの」などその内容を細分化してそれぞれW3C勧告に向けて進んでいます。
各段階の進捗状況は「CSS current work & how to participate」で確認ができます。主なものを以下にまとめてみました。
モジュール | 内容 | 状況 |
---|---|---|
Selectors | セレクタ関連 | 勧告案 |
CSS Color | 不透明度など色に関すること | W3C勧告 |
CSS Backgrounds and Borders | ボーダーや背景に関すること | 勧告候補 |
CSS Multi-column Layout | マルチカラムレイアウト | 勧告候補 |
CSS Text | テキストに関すること | 草案 |
CSS Fonts | フォントに関すること | 草案 |
CSS Basic Box Model | ボックスモデル | 草案 |
CSS 2D Transformations | 2D変形に関すること | 草案 |
CSS 3D Transformations | 3D変形に関すること | 草案 |
CSS Transitions | 時間的変化に関すること | 草案 |
CSS Animations | アニメーションに関すること | 草案 |
5. CSS3に対応していないブラウザに対応する方法
CSS3は策定中ですので、先ほど紹介したようにブラウザによって対応状況は様々です。
一番シェアが多いIEの対応が非常に遅く、CSS3を使う側としてはイライラします。
IE9ではほぼ対応していますが、IE6がまだ残っている現状を考えると、IE9への乗り換えが完了するにはあと何年も待つ必要があります。
そんなに待てないので、こちらで対応する方法も考え出されています。
5-1. CSS3セレクタに対応する
セレクタはSelectivizr.jsだけあれば簡単に対応できます。
Selectivizr.js

ここで提供されているselectivizr.jsとJavaScriptライブラリを外部ファイルで読み込むだけで、CSS3セレクタがIE6~8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。
<script type="text/javascript" src="[JSライブラリ]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="selectivizr.js"></script> <![endif]-->
5-2. IE独自の仕様で対応する
CSS3の対応で困るブラウザは主にIE(Internet Explorer)だと思います。そんなIEには、CSS3っぽいIE独自のプロパティがあるので、CSS3対策としてそれなりに使えます。
要素を回転させるtransform
指定した要素を回転させることができます。
.rotate { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); }
上からSafari、Chrome用、Firefox用、IE用となっています。上2つは回転する角度を、一番下は1から4の数字で90度ずつ回転します。
実際180度はあまり使いどころもないかもしれませんが、90度や270度はレイアウトのちょっとしたアクセントに使えそうです。
ボックスに影をつけるbox-shadow
指定するボックスに影をつけます。
.box-shadow { -moz-box-shadow: 2px 2px 3px #969696; -webkit-box-shadow: 2px 2px 3px #969696; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3); }
上からSafari、Chrome用、Firefox用、IE用となっています。
上2つは右側へのずれ、左側へのずれ、影のぼかし具合、影の色という順番で指定します。下はcolorが影の色、directionが角度、strengthが幅となっています。
要素の透明度を指定するopacity
指定したところの透明度を指定することができます。
.opacity { opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }
このように背景が半透明になります。
数値は赤字の方が 0~1
紫の方がIE用で 0~100 まで指定できます。
ともに数値が小さいほど透明になります。
RGBAカラーモデルで色を指定する
RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったもので、alphaは色の透明度を表します。
.rgba{ background: rgba(51, 102, 153, .4); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#88336699', endColorstr='#88336699');
IEでは#AARRGGBBの最初のAAは00(透明)~ ff(不透明)の範囲で透明度を指定し、RRGGBBは色を指定します。本来gradient()はグラデーションとして使うものです。
5-3. CSS3プロパティに対応する
ここでは、IEでもCSS3プロパティが使える方法を2つ紹介します。外部ファイルを指定するだけなので簡単です。ただ、完全にCSS3を表現できているかというと微妙なものもあるかも。
CSS3 PIE: CSS3 decorations for IE

CSS3非対応のIEでも対応することができます。利用できるプロパティは以下のとおりです。ジェネレータもあるので簡単に設置できます。
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image
.sample { border-radius:10px; behavior: url(PIE.htc); }
CSS3 support in Internet Explorer 6, 7, and 8

こちらも先ほどと一緒で、ビヘイビア スクリプトを読み込むだけです。
- border-radius
- box-shadow
- text-syadow
IEは諦めて違うスタイルを適用する
IE対策は色々考え出されていますが、プロパティについてはいまいち決定的なものがありません。
対応する方法というわけではないですが、いっそうのことIEは諦めて違うスタイルを適用する方法もあります。このブログでも以前使っていました。
#header a{ color : #fff; font-size : 26px; font-weight : bold; text-decoration: none; color : #fff; } #header a:hover{ text-shadow: 0px 0px 1px #ffffff, 0px 0px 10px #FFD700, 0px 0px 20px #FFD700, 0px 0px 30px #FFD700, 0px 0px 40px #FFD700; text-decoration: underline\9; }
CSSハックですね。一番下の行はIE8以下にだけ適用されます。IE以外はピカッと光って、IEにはアンダーラインのみ表示されます。
#test { color: red; /* 初期設定 */ color : green\9; /* IE8以下のみに適応 */ *color : yellow; /* IE7以下に適応 */ _color : orange; /* IE6のみに適応 */ }
CSSハックはあまり好きじゃない人もいるかもしれませんが、いざというときのために覚えておけば使えると思います。
6. まとめ
ということで今回CSS3について色々書いてみました。最後まで読んでいただきありがとうございました。
CSS3のおかげでデザインの幅がぐっと広がり、今まで画像を使っていたところもCSSで表現できるようになりました。
IE対策というやっかいな問題もありますが、今後普及が予想されるのでこれを機に勉強してみてはどうでしょうか。

※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。