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. ■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. ■ベンダープレフィックス
- 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. ３.CSS3で出来ること
- 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などで影付きの文字を作成 GIFに書き出す
- 67. ■テキストに影を付ける Photoshopなどで影付きの文字を作成 GIFに書き出す HTML内にイメージタグで挿入
- 68. ■テキストに影を付ける Photoshopなどで影付きの文字を作成 GIFに書き出す 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. CSS3使いたい！
- 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に似た独自実装がある Jsや、ビヘイビアなどを使用する
- 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