Css3
- 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. ■奥3颁勧告
- 9. ■奥3颁勧告 草案
- 10. ■奥3颁勧告 草案 最終草案
- 11. ■奥3颁勧告 草案 最終草案 勧告候補
- 12. ■奥3颁勧告 草案 最終草案 勧告候補 勧告案
- 13. ■奥3颁勧告 草案 最終草案 勧告候補 W3C勧告 勧告案
- 14. ■颁厂厂の歴史
- 15. ■颁厂厂の歴史 1996 CSS level1 W3C勧告
- 16. ■颁厂厂の歴史 1996 CSS level1 W3C勧告 1998 CSS level2 W3C勧告
- 17. ■颁厂厂の歴史 1996 CSS level1 W3C勧告 1998 CSS level2 W3C勧告 CSS level2.1 草案開始
- 18. ■颁厂厂の歴史 1996 CSS level1 W3C勧告 1998 CSS level2 W3C勧告 CSS level2.1 草案開始 2000 CSS level3 草案開始
- 19. ■颁厂厂の歴史 1996 CSS level1 W3C勧告 1998 CSS level2 W3C勧告 CSS level2.1 草案開始 2000 CSS level3 草案開始 2011 CSS level2.1 W3C勧告
- 20. ■颁厂厂の歴史 1996 CSS level1 W3C勧告 1998 CSS level2 W3C勧告 CSS level2.1 草案開始 2000 CSS level3 草案開始 2011 CSS level2.1 W3C勧告 現時点でのWEB標準
- 21. ■颁厂厂の歴史 1996 CSS level1 W3C勧告 1998 CSS level2 W3C勧告 CSS level2.1 草案開始 2000 CSS level3 草案開始 2011 CSS level2.1 W3C勧告 現時点でのWEB標準 CSS level4 草案開始
- 22. ■颁厂厂の歴史 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. ■颁厂厂の歴史 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. ■ベンダープレフィックス
- 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; }
- 30. ２.仕様のモジュール化
- 31. ■モジュール化の目的
- 34. ■モジュール化の目的 CSS3では、300の実装が追加される 中途半端な実装を避ける為、仕様をシステム 構成の要素（モジュール）単位で分散 必要なモジュールだけを実装可能
- 35. ■主なモジュールと进捗状况
- 36. ■主なモジュールと进捗状况
- 37. ■主なモジュールと进捗状况 2011/9勧告
- 38. ■モジュール化のメリット
- 41. ３.颁厂厂3で出来ること
- 42. ■セレクタの追加
- 43. ■セレクタの追加 セレクタの使用により 正規表現のような指定が可能
- 44. ■セレクタの追加 セレクタの使用により 正規表現のような指定が可能 要素の中で指定した属性名 スタイルを適用 属性値を持つ要素
- 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>
- 53. ■セレクタの追加 その他のセレクタ 等々。
- 54. ■高度なアニメーション表现が可能
- 56. ■高度なアニメーション表现が可能 今まではアニメーションの演出＝Flash サイトに負荷がかかる。 アクセシビリティの犠牲。
- 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 モジュール） アニメーション一回分の時間の長さを指定したり、アニメーションの繰り返 し回数を指定が可能
- 63. ■テキストに影を付ける
- 64. ■テキストに影を付ける 今までは…
- 66. ■テキストに影を付ける Photoshopなどで影付きの文字を作成 骋滨贵に书き出す
- 67. ■テキストに影を付ける Photoshopなどで影付きの文字を作成 骋滨贵に书き出す HTML内にイメージタグで挿入
- 68. ■テキストに影を付ける Photoshopなどで影付きの文字を作成 骋滨贵に书き出す HTML内にイメージタグで挿入 alt指定でイメージの説明を記述
- 69. ■テキストに影を付ける めんどくさい！
- 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 モジュール） 等々。
- 83. こんなこともできちゃいます。
- 85. Chrome5.0
- 86. Firefox3.6
- 87. Opera10.53
- 88. IE8
- 90. ■新技术と旧ブラウザの共生概念
- 92. ■クロスブラウザ
- 95. ■クロスブラウザ どんなブラウザでも見栄えを同じにする。 古いブラウザに合わせて制作されることが多い。 新しい技术を取り入れることが困难
- 96. ■クロスブラウザ どんなブラウザでも見栄えを同じにする。 古いブラウザに合わせて制作されることが多い。 新しい技术を取り入れることが困难 デバイスが多様化してきた現在にはそぐわない。
- 97. ■クロスブラウザ .PNG .PNG .PNG .PNG Chrome5.0 Firefox3.6 Opera10.53 IE8 IE8に準拠し、全て画像。
- 98. 颁厂厂3使いたい！
- 102. ■プログレッシブ?エンハンスメント CSS3 CSS3 CSS3 .PNG Chrome5.0 Firefox3.6 Opera10.53 IE8 CSS3に準拠し、IE8のみ画像。
- 103. ■グレイスフル デグラデーション
- 106. ■グレイスフル デグラデーション CSS3 CSS3 CSS3 CSS2.1 Chrome5.0 Firefox3.6 Opera10.53 IE8
- 107. ■グレイスフル デグラデーション IE9
- 108. ■グレイスフル デグラデーション IE6
- 110. ■ポリフィル
- 112. ■ポリフィル IEの旧ブラウザにはcss3に似た独自実装がある 闯蝉や、ビヘイビアなどを使用する
- 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