2. ■目次
１.W3C勧告へのプロセス
２.仕様のモジュール化
３.CSS3で出来ること
４.CSS3未実装ブラウザへの対応
５.各ブラウザのCSS3実装状況

3. １.W3C勧告へのプロセス

4. ■仕様の策定

5. ■仕様の策定
W3C CSS Working Group によってWeb技術の標準化を目
的とした仕様が決定される。

6. ■仕様の策定
W3C CSS Working Group によってWeb技術の標準化を目
的とした仕様が決定される。
・CSS Working Group

7. ■仕様の策定
W3C CSS Working Group によってWeb技術の標準化を目
的とした仕様が決定される。
・CSS Working Group
・Adobe Systems
・Apple
・Google
・HP
・IBM
・Microsoft
・Mozilla
・Opera
・Sun Microsystems…etc

8. ■W3C勧告

9. ■W3C勧告
草案

10. ■W3C勧告
草案 最終草案

11. ■W3C勧告
草案 最終草案
勧告候補

12. ■W3C勧告
草案 最終草案
勧告候補
勧告案

13. ■W3C勧告
草案 最終草案
勧告候補
W3C勧告 勧告案

14. ■CSSの歴史

15. ■CSSの歴史
1996 CSS level1 W3C勧告

16. ■CSSの歴史
1996 CSS level1 W3C勧告
1998 CSS level2 W3C勧告

17. ■CSSの歴史
1996 CSS level1 W3C勧告
1998 CSS level2 W3C勧告
CSS level2.1 草案開始

18. ■CSSの歴史
1996 CSS level1 W3C勧告
1998 CSS level2 W3C勧告
CSS level2.1 草案開始
2000 CSS level3 草案開始

19. ■CSSの歴史
1996 CSS level1 W3C勧告
1998 CSS level2 W3C勧告
CSS level2.1 草案開始
2000 CSS level3 草案開始
2011 CSS level2.1 W3C勧告

20. ■CSSの歴史
1996 CSS level1 W3C勧告
1998 CSS level2 W3C勧告
CSS level2.1 草案開始
2000 CSS level3 草案開始
2011 CSS level2.1 W3C勧告 現時点でのWEB標準

21. ■CSSの歴史
1996 CSS level1 W3C勧告
1998 CSS level2 W3C勧告
CSS level2.1 草案開始
2000 CSS level3 草案開始
2011 CSS level2.1 W3C勧告 現時点でのWEB標準
CSS level4 草案開始

22. ■CSSの歴史
1996 CSS level1 W3C勧告
1998 CSS level2 W3C勧告
CSS level2.1 草案開始
2000 CSS level3 草案開始
2011 CSS level2.1 W3C勧告 現時点でのWEB標準
CSS level4 草案開始
???? CSS level3 W3C勧告
CSS level4 W3C勧告

23. ■CSSの歴史
1996 CSS level1 W3C勧告
1998 CSS level2 W3C勧告
CSS level2.1 草案開始
2000 CSS level3 草案開始
2011 CSS level2.1 W3C勧告 現時点でのWEB標準
CSS level4 草案開始
???? CSS level3 W3C勧告 将来的に標準となりうる
CSS level4 W3C勧告 仕様

24. ■ベンダープレフィックス

25. ■ベンダープレフィックス
独自の拡張機能や、草案段階の仕様を実装する場合、
それが拡張機能であると示す識別子のこと。

26. ■ベンダープレフィックス
-ms- Internet Explorer
-moz- Firefox
-webkit- Safari、Google Chrome
-o- Opera

27. ■ベンダープレフィックス
div.sample1 {
border:1px solid red;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius:
10px;
border-radius:
10px;
}

28. ■ベンダープレフィックス
これ
div.sample1 {
border:1px solid red;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius:
10px;
border-radius:
10px;
}

29. ■ベンダープレフィックス
現在、仕様のW3C勧告を待たずに各ブラウザでCSS３
が先行実装されている。
まだ草案の状態であることを示し、勧告候補になっ
たときに外される。

30. ２.仕様のモジュール化

31. ■モジュール化の目的

32. ■モジュール化の目的
CSS3では、300の実装が追加される

33. ■モジュール化の目的
CSS3では、300の実装が追加される
中途半端な実装を避ける為、仕様をシステム
構成の要素（モジュール）単位で分散

34. ■モジュール化の目的
CSS3では、300の実装が追加される
中途半端な実装を避ける為、仕様をシステム
構成の要素（モジュール）単位で分散
必要なモジュールだけを実装可能

35. ■主なモジュールと進捗状況

36. ■主なモジュールと進捗状況

37. ■主なモジュールと進捗状況
2011/9勧告

38. ■モジュール化のメリット

39. ■モジュール化のメリット
PC、スマートフォン、タブレット等デバイス
の多様化

40. ■モジュール化のメリット
PC、スマートフォン、タブレット等デバイス
の多様化
使用環境に合わせたモジュールの実装を選択
できる。

41. ３.CSS3で出来ること

42. ■セレクタの追加

43. ■セレクタの追加
セレクタの使用により
正規表現のような指定が可能

44. ■セレクタの追加
セレクタの使用により
正規表現のような指定が可能
要素の中で指定した属性名
スタイルを適用
属性値を持つ要素

45. ■セレクタの追加
E:nth-of-type(n)セレクタの活用

46. ■セレクタの追加
E:nth-of-type(n)セレクタの活用
3番目に表れるpタグにのみスタイルを適用

47. ■セレクタの追加
E:nth-of-type(n)セレクタの活用
3番目に表れるpタグにのみスタイルを適用
html
<p>1行目</p>
<p>2行目</p>
<p>3行目</p>
<p>4行目</p>
<p>5行目</p>

48. ■セレクタの追加
E:nth-of-type(n)セレクタの活用
3番目に表れるpタグにのみスタイルを適用
html CSS
<p>1行目</p> p:nth-of-type(3) {
<p>2行目</p> font-weight:bold;
<p>3行目</p> color:red;
<p>4行目</p> }
<p>5行目</p>

49. ■セレクタの追加
E:nth-of-type(n)セレクタの活用
3番目に表れるpタグにのみスタイルを適用
html CSS
<p>1行目</p> p:nth-of-type(3) {
<p>2行目</p> font-weight:bold;
<p>3行目</p> color:red;
<p>4行目</p> }
<p>5行目</p>

50. ■セレクタの追加
E:nth-of-type(n)セレクタの活用
3番目に表れるpタグにのみスタイルを適用
html CSS
<p>1行目</p> p:nth-of-type(3) {
<p>2行目</p> font-weight:bold;
<p>3行目</p> color:red;
<p>4行目</p> }
<p>5行目</p>

51. ■セレクタの追加
その他のセレクタ

52. ■セレクタの追加
その他のセレクタ

53. ■セレクタの追加
その他のセレクタ
等々。

54. ■高度なアニメーション表現が可能

55. ■高度なアニメーション表現が可能
今まではアニメーションの演出＝Flash

56. ■高度なアニメーション表現が可能
今まではアニメーションの演出＝Flash
サイトに負荷がかかる。
アクセシビリティの犠牲。

57. ■高度なアニメーション表現が可能
CSS3では、回転・変形・3Dなどの高度な演出、
タイムラインの編集も自由自在。

58. ■アニメーションプロパティ

59. ■アニメーションプロパティ
Transform
2D 3D 変形 （2D 3D Transforms モジュール）
要素にマトリクス変形を適用したり、3D変形の遠近効果を調節が可能

60. ■アニメーションプロパティ
Transform
2D 3D 変形 （2D 3D Transforms モジュール）
要素にマトリクス変形を適用したり、3D変形の遠近効果を調節が可能
Transition
時間的変化 （Transitions モジュール）
変化に掛かる時間を指定したり、変化のタイミング・進行割合を指定が可能

61. ■アニメーションプロパティ
Transform
2D 3D 変形 （2D 3D Transforms モジュール）
要素にマトリクス変形を適用したり、3D変形の遠近効果を調節が可能
Transition
時間的変化 （Transitions モジュール）
変化に掛かる時間を指定したり、変化のタイミング・進行割合を指定が可能
Animation
アニメーション （Animations モジュール）
アニメーション一回分の時間の長さを指定したり、アニメーションの繰り返
し回数を指定が可能

62. ■CSS3アニメーション作成用アプリ
Sencha Animator
http://extjs.co.jp/products/animator/

63. ■テキストに影を付ける

64. ■テキストに影を付ける
今までは…

65. ■テキストに影を付ける
Photoshopなどで影付きの文字を作成

66. ■テキストに影を付ける
Photoshopなどで影付きの文字を作成
GIFに書き出す

67. ■テキストに影を付ける
Photoshopなどで影付きの文字を作成
GIFに書き出す
HTML内にイメージタグで挿入

68. ■テキストに影を付ける
Photoshopなどで影付きの文字を作成
GIFに書き出す
HTML内にイメージタグで挿入
alt指定でイメージの説明を記述

69. ■テキストに影を付ける
めんどくさい！

70. ■テキストに影を付ける
CSS3のプロパティを使用すると…

71. ■テキストに影を付ける
box-shadow: 5px 5px 5px 5px #888;

72. ■テキストに影を付ける
だけ。

73. ■テキストに影を付ける
「水平、垂直方向、影の拡散具合、影の色」が設定でき、
Photoshopのようなコントロールが可能。
box-shadow: 5px 5px 5px 5px #888;

74. ■テキストに影を付ける
「水平、垂直方向、影の拡散具合、影の色」が設定でき、
Photoshopのようなコントロールが可能。
box-shadow: 5px 5px 5px 5px #888;
水平影 垂直影 ぼかし 広がり

75. ■テキストに影を付ける

76. ■テキストに影を付ける
.sampleTex{
background-color: rgba(82,96,117,0.5);
-webkit-background-clip: text;
color: transparent;
text-shadow: 0 5px 6px rgba(255,255,255,0.5) inset;
}

77. ■その他のプロパティ

78. ■その他のプロパティ
・角丸
border-radius
背景とボーダー （Backgrounds and Borders モジュール）

79. ■その他のプロパティ
・角丸
border-radius
背景とボーダー （Backgrounds and Borders モジュール）
・半透明
Opacity
透過色 （Color モジュール）

80. ■その他のプロパティ
・角丸
border-radius
背景とボーダー （Backgrounds and Borders モジュール）
・半透明
Opacity
透過色 （Color モジュール）
・グラデーション
linear-gradient()
グラデーション （Image Values モジュール）

81. ■その他のプロパティ
・角丸
border-radius
背景とボーダー （Backgrounds and Borders モジュール）
・半透明
Opacity
透過色 （Color モジュール）
・グラデーション
linear-gradient()
グラデーション （Image Values モジュール） 等々。

82. ■CSS3プロパティジェネレータ
css3maker
http://www.css3maker.com/index.html

83. こんなこともできちゃいます。

85. Chrome5.0

86. Firefox3.6

87. Opera10.53

88. IE8

89. ４.CSS3未実装
ブラウザへの対応

90. ■新技術と旧ブラウザの共生概念

91. ■新技術と旧ブラウザの共生概念
・クロスブラウザ
・プログレッシブ・エンハンスメント
・グレイスフル デグラデーション
・ポリフィル

92. ■クロスブラウザ

93. ■クロスブラウザ
どんなブラウザでも見栄えを同じにする。

94. ■クロスブラウザ
どんなブラウザでも見栄えを同じにする。
古いブラウザに合わせて制作されることが多い。

95. ■クロスブラウザ
どんなブラウザでも見栄えを同じにする。
古いブラウザに合わせて制作されることが多い。
新しい技術を取り入れることが困難

96. ■クロスブラウザ
どんなブラウザでも見栄えを同じにする。
古いブラウザに合わせて制作されることが多い。
新しい技術を取り入れることが困難
デバイスが多様化してきた現在にはそぐわない。

97. ■クロスブラウザ
.PNG .PNG .PNG .PNG
Chrome5.0 Firefox3.6 Opera10.53 IE8
IE8に準拠し、全て画像。

98. CSS3使いたい！

99. ■プログレッシブ・エンハンスメント

100. ■プログレッシブ・エンハンスメント
新しい技術を積極的に利用する概念

101. ■プログレッシブ・エンハンスメント
一般的環境を基準にし、進んだ環境をも視野に入れる

102. ■プログレッシブ・エンハンスメント
CSS3 CSS3 CSS3 .PNG
Chrome5.0 Firefox3.6 Opera10.53 IE8
CSS3に準拠し、IE8のみ画像。

103. ■グレイスフル デグラデーション

104. ■グレイスフル デグラデーション
最近の環境を基準にし、古い環境にはレベルを落とす

105. ■グレイスフル デグラデーション
最近の環境を基準にし、古い環境にはレベルを落とす

106. ■グレイスフル デグラデーション
CSS3 CSS3 CSS3 CSS2.1
Chrome5.0 Firefox3.6 Opera10.53 IE8

107. ■グレイスフル デグラデーション
IE9

108. ■グレイスフル デグラデーション
IE6

109. ■グレイスフル デグラデーション
最新のブラウザのダウンロードを促す

110. ■ポリフィル

111. ■ポリフィル
新しい環境を基準にし、
古い環境を新しい環境に近づけて差をなくす

112. ■ポリフィル
IEの旧ブラウザにはcss3に似た独自実装がある
Jsや、ビヘイビアなどを使用する

113. ■ポリフィル
css3pie
http://css3pie.com/

114. ■ポリフィル
CSS3 CSS3 CSS3 PIE.htc
Chrome5.0 Firefox3.6 Opera10.53 IE8
IE8にはbehaviorを使用

115. ５.各ブラウザの
CSS3実装状況

116. ■2011/12現在

117. ■2011/12現在
・IE9 52%
・FF8 86%
・Chrome15 90%
・Safari5.1 76%
・Opera11.5 69%

118. ■2011/12現在
When can I use...
http://caniuse.com/

119. 御静聴ありがとうございました。

120. ■参考文献
W3C
http://www.w3.org/Style/CSS/
Wikipedia
http://ja.wikipedia.org/wiki/Cascading_Style_Sheets
webpark
http://weboook.blog22.fc2.com/blog-entry-280.html
KAYAC DESIGNER'S BLOG
http://design.kayac.com/topics/2011/06/css-programing.php
shop DD
http://shopdd.blog51.fc2.com/blog-entry-932.html