CSS3について知っておきたいことのまとめ

1. スタイルシートの構造

CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。

もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。

CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。

2. CSS3セレクタ

CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの１つです。

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」に数字を入れてもいいのですが、以下のように飛び飛びに適用することもできるので使い勝手がいいです。

意外と知らない!?CSSセレクタ20個のおさらい｜Webpark

CSS3を含めたセレクタについて紹介していますのでぜひご参考に。

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);
}

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

show CSSにチェックを入れるとコードが表示されるわけですが、PIE.htcをダウンロードするのと、アップした場所の指定だけ気をつけてくださいね。

.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対策というやっかいな問題もありますが、今後普及が予想されるのでこれを機に勉強してみてはどうでしょうか。