css3
DESCRIPTION
TRANSCRIPT
![Page 1: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/1.jpg)
![Page 2: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/2.jpg)
■ 目次1 .W3C 勧告へのプロセス
2 . 仕様のモジュール化
3 .CSS3 で出来ること
4 .CSS3 未実装ブラウザへの対応
5 . 各ブラウザの CSS3 実装状況
![Page 3: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/3.jpg)
1 .W3C 勧告へのプロセス
![Page 4: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/4.jpg)
■ 仕様の策定
![Page 5: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/5.jpg)
W3C CSS Working Group によって Web 技術の標準化を目的とした仕様が決定される。
■ 仕様の策定
![Page 6: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/6.jpg)
W3C CSS Working Group によって Web 技術の標準化を目的とした仕様が決定される。
・ CSS Working Group
■ 仕様の策定
![Page 7: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/7.jpg)
・ Adobe Systems・ Apple・ Google・ HP・ IBM・ Microsoft・ Mozilla・ Opera・ Sun Microsystems…etc
W3C CSS Working Group によって Web 技術の標準化を目的とした仕様が決定される。
・ CSS Working Group
■ 仕様の策定
![Page 8: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/8.jpg)
■W3C 勧告
![Page 9: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/9.jpg)
草案
■W3C 勧告
![Page 10: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/10.jpg)
草案 最終草案
■W3C 勧告
![Page 11: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/11.jpg)
草案 最終草案
勧告候補
■W3C 勧告
![Page 12: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/12.jpg)
草案 最終草案
勧告候補
勧告案
■W3C 勧告
![Page 13: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/13.jpg)
草案 最終草案
勧告候補
勧告案W3C 勧告
■W3C 勧告
![Page 14: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/14.jpg)
■CSS の歴史
![Page 15: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/15.jpg)
1996 CSS level1 W3C 勧告
■CSS の歴史
![Page 16: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/16.jpg)
1996 CSS level1 W3C 勧告
1998 CSS level2 W3C 勧告
■CSS の歴史
![Page 17: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/17.jpg)
1996 CSS level1 W3C 勧告
1998 CSS level2 W3C 勧告CSS level2.1 草案開始
■CSS の歴史
![Page 18: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/18.jpg)
1996 CSS level1 W3C 勧告
1998 CSS level2 W3C 勧告CSS level2.1 草案開始
2000 CSS level3 草案開始
■CSS の歴史
![Page 19: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/19.jpg)
1996 CSS level1 W3C 勧告
1998 CSS level2 W3C 勧告CSS level2.1 草案開始
2000 CSS level3 草案開始
2011 CSS level2.1 W3C 勧告
■CSS の歴史
![Page 20: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/20.jpg)
1996 CSS level1 W3C 勧告
1998 CSS level2 W3C 勧告CSS level2.1 草案開始
2000 CSS level3 草案開始
2011 CSS level2.1 W3C 勧告 現時点での WEB 標準
■CSS の歴史
![Page 21: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/21.jpg)
1996 CSS level1 W3C 勧告
1998 CSS level2 W3C 勧告CSS level2.1 草案開始
2000 CSS level3 草案開始
2011 CSS level2.1 W3C 勧告
CSS level4 草案開始
■CSS の歴史
現時点での WEB 標準
![Page 22: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/22.jpg)
1996 CSS level1 W3C 勧告
1998 CSS level2 W3C 勧告CSS level2.1 草案開始
2000 CSS level3 草案開始
2011 CSS level2.1 W3C 勧告
CSS level4 草案開始
■CSS の歴史
CSS level4 W3C 勧告???? CSS level3 W3C 勧告
現時点での WEB 標準
![Page 23: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/23.jpg)
1996 CSS level1 W3C 勧告
1998 CSS level2 W3C 勧告CSS level2.1 草案開始
2000 CSS level3 草案開始
2011 CSS level2.1 W3C 勧告
CSS level4 草案開始
■CSS の歴史
CSS level4 W3C 勧告???? CSS level3 W3C 勧告 将来的に標準となりうる
仕様
現時点での WEB 標準
![Page 24: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/24.jpg)
■ ベンダープレフィックス
![Page 25: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/25.jpg)
独自の拡張機能や、草案段階の仕様を実装する場合、 それが拡張機能であると示す識別子のこと。
■ ベンダープレフィックス
![Page 26: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/26.jpg)
-moz- Firefox
-ms- Internet Explorer
-o- Opera
-webkit- Safari 、 Google Chrome
■ ベンダープレフィックス
![Page 27: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/27.jpg)
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; }
■ ベンダープレフィックス
![Page 28: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/28.jpg)
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; }
これ
■ ベンダープレフィックス
![Page 29: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/29.jpg)
まだ草案の状態であることを示し、勧告候補になったときに外される。
現在、仕様の W3C 勧告を待たずに各ブラウザでCSS 3が先行実装されている。
■ ベンダープレフィックス
![Page 30: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/30.jpg)
2 . 仕様のモジュール化
![Page 31: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/31.jpg)
■ モジュール化の目的
![Page 32: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/32.jpg)
■ モジュール化の目的
CSS3 では、 300 の実装が追加される
![Page 33: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/33.jpg)
■ モジュール化の目的
CSS3 では、 300 の実装が追加される
中途半端な実装を避ける為、仕様をシステム構成の要素(モジュール)単位で分散
![Page 34: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/34.jpg)
■ モジュール化の目的
CSS3 では、 300 の実装が追加される
必要なモジュールだけを実装可能
中途半端な実装を避ける為、仕様をシステム構成の要素(モジュール)単位で分散
![Page 35: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/35.jpg)
■ 主なモジュールと進捗状況
![Page 36: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/36.jpg)
■ 主なモジュールと進捗状況
![Page 37: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/37.jpg)
■ 主なモジュールと進捗状況
2011/9 勧告
![Page 38: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/38.jpg)
■ モジュール化のメリット
![Page 39: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/39.jpg)
■ モジュール化のメリット
PC 、スマートフォン、タブレット等デバイスの多様化
![Page 40: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/40.jpg)
■ モジュール化のメリット
PC 、スマートフォン、タブレット等デバイスの多様化
使用環境に合わせたモジュールの実装を選択できる。
![Page 41: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/41.jpg)
3 .CSS3 で出来ること
![Page 42: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/42.jpg)
■ セレクタの追加
![Page 43: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/43.jpg)
■ セレクタの追加
セレクタの使用により正規表現のような指定が可能
![Page 44: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/44.jpg)
■ セレクタの追加
要素の中で指定した属性名属性値を持つ要素
スタイルを適用
セレクタの使用により正規表現のような指定が可能
![Page 45: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/45.jpg)
■ セレクタの追加E:nth-of-type(n) セレクタの活用
![Page 46: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/46.jpg)
■ セレクタの追加E:nth-of-type(n) セレクタの活用
3 番目に表れる p タグにのみスタイルを適用
![Page 47: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/47.jpg)
■ セレクタの追加
html
<p>1 行目 </p><p>2 行目 </p><p>3 行目 </p><p>4 行目 </p><p>5 行目 </p>
E:nth-of-type(n) セレクタの活用
3 番目に表れる p タグにのみスタイルを適用
![Page 48: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/48.jpg)
■ セレクタの追加
html CSS
<p>1 行目 </p><p>2 行目 </p><p>3 行目 </p><p>4 行目 </p><p>5 行目 </p>
p:nth-of-type(3) { font-weight:bold; color:red;}
E:nth-of-type(n) セレクタの活用
3 番目に表れる p タグにのみスタイルを適用
![Page 49: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/49.jpg)
■ セレクタの追加
html CSS
<p>1 行目 </p><p>2 行目 </p><p>3 行目 </p><p>4 行目 </p><p>5 行目 </p>
p:nth-of-type(3) { font-weight:bold; color:red;}
E:nth-of-type(n) セレクタの活用
3 番目に表れる p タグにのみスタイルを適用
![Page 50: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/50.jpg)
■ セレクタの追加
html CSS
<p>1 行目 </p><p>2 行目 </p><p>3 行目 </p><p>4 行目 </p><p>5 行目 </p>
p:nth-of-type(3) { font-weight:bold; color:red;}
E:nth-of-type(n) セレクタの活用
3 番目に表れる p タグにのみスタイルを適用
![Page 51: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/51.jpg)
■ セレクタの追加その他のセレクタ
![Page 52: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/52.jpg)
■ セレクタの追加その他のセレクタ
![Page 53: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/53.jpg)
■ セレクタの追加その他のセレクタ
等々。
![Page 54: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/54.jpg)
■ 高度なアニメーション表現が可能
![Page 55: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/55.jpg)
■ 高度なアニメーション表現が可能
今まではアニメーションの演出= Flash
![Page 56: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/56.jpg)
■ 高度なアニメーション表現が可能
サイトに負荷がかかる。アクセシビリティの犠牲。
今まではアニメーションの演出= Flash
![Page 57: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/57.jpg)
CSS3 では、回転・変形・ 3D などの高度な演出、タイムラインの編集も自由自在。
■ 高度なアニメーション表現が可能
![Page 58: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/58.jpg)
■ アニメーションプロパティ
![Page 59: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/59.jpg)
Transform2D 3D 変形 ( 2D 3D Transforms モジュール)要素にマトリクス変形を適用したり、 3D 変形の遠近効果を調節が可能
■ アニメーションプロパティ
![Page 60: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/60.jpg)
Transform2D 3D 変形 ( 2D 3D Transforms モジュール)要素にマトリクス変形を適用したり、 3D 変形の遠近効果を調節が可能
Transition時間的変化 ( Transitions モジュール)変化に掛かる時間を指定したり、変化のタイミング・進行割合を指定が可能
■ アニメーションプロパティ
![Page 61: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/61.jpg)
Transform2D 3D 変形 ( 2D 3D Transforms モジュール)要素にマトリクス変形を適用したり、 3D 変形の遠近効果を調節が可能
Animationアニメーション ( Animations モジュール)アニメーション一回分の時間の長さを指定したり、アニメーションの繰り返し回数を指定が可能
Transition時間的変化 ( Transitions モジュール)変化に掛かる時間を指定したり、変化のタイミング・進行割合を指定が可能
■ アニメーションプロパティ
![Page 62: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/62.jpg)
Sencha Animatorhttp://extjs.co.jp/products/animator/
■CSS3 アニメーション作成用アプリ
![Page 63: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/63.jpg)
■ テキストに影を付ける
![Page 64: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/64.jpg)
今までは…
■ テキストに影を付ける
![Page 65: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/65.jpg)
Photoshop などで影付きの文字を作成
■ テキストに影を付ける
![Page 66: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/66.jpg)
GIF に書き出す
Photoshop などで影付きの文字を作成
■ テキストに影を付ける
![Page 67: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/67.jpg)
GIF に書き出す
Photoshop などで影付きの文字を作成
HTML 内にイメージタグで挿入
■ テキストに影を付ける
![Page 68: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/68.jpg)
GIF に書き出す
Photoshop などで影付きの文字を作成
alt 指定でイメージの説明を記述
HTML 内にイメージタグで挿入
■ テキストに影を付ける
![Page 69: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/69.jpg)
■ テキストに影を付ける
めんどくさい!
![Page 70: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/70.jpg)
■ テキストに影を付ける
CSS3 のプロパティを使用すると…
![Page 71: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/71.jpg)
box-shadow: 5px 5px 5px 5px #888;
■ テキストに影を付ける
![Page 72: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/72.jpg)
■ テキストに影を付ける
だけ。
![Page 73: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/73.jpg)
「水平、垂直方向、影の拡散具合、影の色」が設定でき、Photoshop のようなコントロールが可能。
box-shadow: 5px 5px 5px 5px #888;
■ テキストに影を付ける
![Page 74: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/74.jpg)
「水平、垂直方向、影の拡散具合、影の色」が設定でき、Photoshop のようなコントロールが可能。
box-shadow: 5px 5px 5px 5px #888;
水平影 垂直影 ぼかし 広がり
■ テキストに影を付ける
![Page 75: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/75.jpg)
■ テキストに影を付ける
![Page 76: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/76.jpg)
.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;}
■ テキストに影を付ける
![Page 77: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/77.jpg)
■ その他のプロパティ
![Page 78: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/78.jpg)
■ その他のプロパティ・角丸
border-radius背景とボーダー ( Backgrounds and Borders モジュール)
![Page 79: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/79.jpg)
■ その他のプロパティ・角丸
・半透明
border-radius背景とボーダー ( Backgrounds and Borders モジュール)
Opacity透過色 ( Color モジュール)
![Page 80: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/80.jpg)
■ その他のプロパティ・角丸
・半透明
・グラデーション
border-radius背景とボーダー ( Backgrounds and Borders モジュール)
Opacity透過色 ( Color モジュール)
linear-gradient()グラデーション ( Image Values モジュール)
![Page 81: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/81.jpg)
■ その他のプロパティ・角丸
・半透明
・グラデーション
border-radius背景とボーダー ( Backgrounds and Borders モジュール)
Opacity透過色 ( Color モジュール)
linear-gradient()グラデーション ( Image Values モジュール) 等々。
![Page 83: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/83.jpg)
こんなこともできちゃいます。
![Page 84: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/84.jpg)
![Page 85: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/85.jpg)
Chrome5.0
![Page 86: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/86.jpg)
Firefox3.6
![Page 87: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/87.jpg)
Opera10.53
![Page 88: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/88.jpg)
IE8
![Page 89: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/89.jpg)
4 .CSS3 未実装 ブラウザへの対応
![Page 90: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/90.jpg)
■新技術と旧ブラウザの共生概念
![Page 91: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/91.jpg)
・クロスブラウザ
・プログレッシブ・エンハンスメント
・グレイスフル デグラデーション
・ポリフィル
■新技術と旧ブラウザの共生概念
![Page 92: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/92.jpg)
■ クロスブラウザ
![Page 93: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/93.jpg)
■ クロスブラウザ
どんなブラウザでも見栄えを同じにする。
![Page 94: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/94.jpg)
■ クロスブラウザ
どんなブラウザでも見栄えを同じにする。
古いブラウザに合わせて制作されることが多い。
![Page 95: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/95.jpg)
■ クロスブラウザ
どんなブラウザでも見栄えを同じにする。
古いブラウザに合わせて制作されることが多い。
新しい技術を取り入れることが困難
![Page 96: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/96.jpg)
■ クロスブラウザ
デバイスが多様化してきた現在にはそぐわない。
どんなブラウザでも見栄えを同じにする。
古いブラウザに合わせて制作されることが多い。
新しい技術を取り入れることが困難
![Page 97: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/97.jpg)
.PNG .PNG .PNG .PNG
IE8Opera10.53Firefox3.6Chrome5.0
IE8 に準拠し、全て画像。
■ クロスブラウザ
![Page 98: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/98.jpg)
CSS3 使いたい!
![Page 99: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/99.jpg)
■ プログレッシブ・エンハンスメント
![Page 100: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/100.jpg)
■ プログレッシブ・エンハンスメント
新しい技術を積極的に利用する概念
![Page 101: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/101.jpg)
■ プログレッシブ・エンハンスメント
一般的環境を基準にし、進んだ環境をも視野に入れる
![Page 102: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/102.jpg)
CSS3 .PNG
Opera10.53Firefox3.6Chrome5.0
CSS3 に準拠し、 IE8 のみ画像。
IE8
CSS3 CSS3
■ プログレッシブ・エンハンスメント
![Page 103: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/103.jpg)
■ グレイスフル デグラデーション
![Page 104: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/104.jpg)
■ グレイスフル デグラデーション
最近の環境を基準にし、古い環境にはレベルを落とす
![Page 105: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/105.jpg)
■ グレイスフル デグラデーション
最近の環境を基準にし、古い環境にはレベルを落とす
![Page 106: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/106.jpg)
CSS3 CSS2.1
Opera10.53Firefox3.6Chrome5.0 IE8
CSS3 CSS3
■ グレイスフル デグラデーション
![Page 107: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/107.jpg)
■ グレイスフル デグラデーションIE9
![Page 108: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/108.jpg)
■ グレイスフル デグラデーションIE6
![Page 109: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/109.jpg)
■ グレイスフル デグラデーション最新のブラウザのダウンロードを促す
![Page 110: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/110.jpg)
■ポリフィル
![Page 111: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/111.jpg)
■ポリフィル新しい環境を基準にし、古い環境を新しい環境に近づけて差をなくす
![Page 112: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/112.jpg)
■ポリフィル
IE の旧ブラウザには css3 に似た独自実装がある
Js や、ビヘイビアなどを使用する
![Page 114: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/114.jpg)
CSS3 PIE.htc
Opera10.53Firefox3.6Chrome5.0
IE8 には behavior を使用
IE8
CSS3 CSS3
■ポリフィル
![Page 115: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/115.jpg)
5 . 各ブラウザの CSS3 実装状況
![Page 116: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/116.jpg)
■2011/12 現在
![Page 117: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/117.jpg)
・ IE9
・ FF8
・ Chrome15
・ Safari5.1・ Opera11.5
52%
86%
90%
76%69%
■2011/12 現在
![Page 119: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/119.jpg)
御静聴ありがとうございました。
![Page 120: Css3](https://reader035.vdocuments.us/reader035/viewer/2022070303/54b7b0284a7959ba688b4586/html5/thumbnails/120.jpg)
■参考文献
http://weboook.blog22.fc2.com/blog-entry-280.html
webpark
KAYAC DESIGNER'S BLOGhttp://design.kayac.com/topics/2011/06/css-programing.php
shop DDhttp://shopdd.blog51.fc2.com/blog-entry-932.html
Wikipediahttp://ja.wikipedia.org/wiki/Cascading_Style_Sheets
W3Chttp://www.w3.org/Style/CSS/