Css3

2,140
-1

Published on

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,140
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Css3

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

    Clipping is a handy way to collect important slides you want to go back to later.

×