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

CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。

過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。

css3-sitteokitai.png

今回は結構ボリュームもあるので目次を作っています。

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

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

css-kouzou.png

もちろんプロパティと値は一対です。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要素
【追記】
CSS3セレクタについて別記事でまとめましたので、ぜひご覧ください。
保存版!CSS3セレクタの説明書

2-2. CSSセレクタの使用方法

個人的に一番使えると思うのが「E:nth-of-type(n)」です。CSS3セレクタを全部説明するときりがないので、これを例に1つだけ紹介してみます。

CSS
p:nth-of-type(2n+1) {
  font-weight:bold;
  color:red;
}

このようにすると奇数番目に表れるpタグにのみ適用されます。

html
<p>1行目</p>
<p>2行目</p>
<p>3行目</p>
<p>4行目</p>
<p>5行目</p>

「n」に数字を入れてもいいのですが、以下のように飛び飛びに適用することもできるので使い勝手がいいです。

:nth-child(n) ・・・ 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-selector.png

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

CSS3セレクタについての記事を書きましたので、ぜひご覧ください。
保存版!CSS3セレクタの説明書|Webpark

3. CSS3プロパティ

セレクタはなにげなく使っていてピンとこない人もいるかもしれませんが、プロパティは普段意識して使っているのでイメージが湧きやすいと思います。

3-1. CSS3プロパティについて

CSS3プロパティについて紹介されているサイトです。

CSS3リファレンス
CSS3リファレンス

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

CSS3 Files
CSS3 Files

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

CSS-EBLOG
CSS-EBLOG

各ブラウザで先行実装しているCSSプロパティがまとめられています。

3-2. CSS3プロパティジェネレータ

見ているだけではイマイチ使い方が分からないという場合は、ジェネレータをいじってみると理解が深まると思います。

例えばこれ。

CSS3.0 Maker
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
HTML5 & CSS3 Support

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

HTML5 & CSS3 READINESS
HTML5 & CSS3 READINESS

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

When can I use...
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」。で確認できます。

vendor-prefix-info.png

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

vender-prefix.png

このようにプロパティごとに分かりやすく表示されています。

4-3. CSS3は現在策定中

なぜ、CSS3はプロパティによってブラウザごとに対応状況が違うかというと、現在CSS3は策定中でW3C勧告に向けて思考錯誤を重ねているところであるためです。

W3C勧告へのプロセス

最終のW3C勧告になるまでの流れは以下のようになっています。

W3C勧告プロセス
Working Draft草案
Last Call最終草案
Candidate Recommendation勧告候補    
Proposed Recommendation勧告案
RecommendationW3C勧告
主なモジュールと進捗状況

また、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
selectivizr02.png

ここで提供されている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

指定した要素を回転させることができます。

CSS
.rotate {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

上からSafari、Chrome用、Firefox用、IE用となっています。上2つは回転する角度を、一番下は1から4の数字で90度ずつ回転します。

sample
このように要素が丸ごと回転します。

実際180度はあまり使いどころもないかもしれませんが、90度や270度はレイアウトのちょっとしたアクセントに使えそうです。

ボックスに影をつけるbox-shadow

指定するボックスに影をつけます。

CSS
.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が幅となっています。

sample
このようにボックスに影がつきます。
要素の透明度を指定するopacity

指定したところの透明度を指定することができます。

CSS
.opacity {
  opacity:0.7;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
sample

このように背景が半透明になります。
数値は赤字の方が 0~1
紫の方がIE用で 0~100 まで指定できます。
ともに数値が小さいほど透明になります。

RGBAカラーモデルで色を指定する

RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったもので、alphaは色の透明度を表します。

CSS
.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()はグラデーションとして使うものです。

sample
RGBAカラーモデルで背景を指定しています。

5-3. CSS3プロパティに対応する

ここでは、IEでもCSS3プロパティが使える方法を2つ紹介します。外部ファイルを指定するだけなので簡単です。ただ、完全にCSS3を表現できているかというと微妙なものもあるかも。

CSS3 PIE: CSS3 decorations for IE
CSS3 PIE

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
css3-support.png

こちらも先ほどと一緒で、ビヘイビア スクリプトを読み込むだけです。

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









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

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加