CSS 3 の話 2~3なの?2なの?~<br />Kousuke (seven)Inamoto<br />
Agenda<br />CSS 3<br />Multiple background images<br />Color<br />Javascript<br />One more thing…<br />
Agenda<br />CSS 3<br />Multiple background images<br />Color<br />Javascript<br />One more thing…<br />
CSS<br />Cascading Style Sheetsとは、<br />HTML や XML の要素をどのように修飾(表示)するかを<br />指示する仕様であり、W3Cによる勧告の一つ。<br />文書の構造と体裁を分離させるという理...
CSS 3 ≒ CSS 2.1 + javascript <br />
<ul><li>Selectors
Color
Namespaces
Media Query
Backgrounds & Borders
Template Layout
CSS Transitions
CSS Transform
CSS Animations
Fonts
Flexbox
Image Values</li></ul>>Module<br />Cf:WebDesigning vol.100<br />
Agenda<br />CSS 3<br />Multiple background images<br />Color<br />Javascript<br />One more thing…<br />
Multiple background images<br />CSS3 adds the ability to apply <br />multiple background images on an element<br />
Sample<br />
Question<br />
A案<br />B案<br /><div id=“box”><br /><div id=“box_container”><br /><div id=“box_inner”><br />	<p>ダミーダミー</p><br /></div><br ...
Web標準はA案です。<br />
Agenda<br />CSS 3<br />Multiple background images<br />Color<br />Javascript<br />One more thing…<br />
Color<br />RGB<br />RGBA<br />HSL<br />HSLA<br />opacity<br />
HSL<br />Hue, Saturation, Lightness<br />色相、彩度、明度<br />
出展:canon <br />
gradient<br />
Sample<br />
Upcoming SlideShare
Loading in …5
×

about CSS3 vol.2

975 views

Published on

2011/2/18に行われたHTML5+α@福岡で発表した資料です。CSS3の機能の紹介から、ちょっと生意気なことまで発表しました。

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

  • Be the first to like this

No Downloads
Views
Total views
975
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

about CSS3 vol.2

  1. 1. CSS 3 の話 2~3なの?2なの?~<br />Kousuke (seven)Inamoto<br />
  2. 2. Agenda<br />CSS 3<br />Multiple background images<br />Color<br />Javascript<br />One more thing…<br />
  3. 3. Agenda<br />CSS 3<br />Multiple background images<br />Color<br />Javascript<br />One more thing…<br />
  4. 4. CSS<br />Cascading Style Sheetsとは、<br />HTML や XML の要素をどのように修飾(表示)するかを<br />指示する仕様であり、W3Cによる勧告の一つ。<br />文書の構造と体裁を分離させるという理念を実現する為に<br />提唱されたスタイルシートの、具体的な仕様の一つ。<br />(From wikipedia)<br />
  5. 5.
  6. 6. CSS 3 ≒ CSS 2.1 + javascript <br />
  7. 7. <ul><li>Selectors
  8. 8. Color
  9. 9. Namespaces
  10. 10. Media Query
  11. 11. Backgrounds & Borders
  12. 12. Template Layout
  13. 13. CSS Transitions
  14. 14. CSS Transform
  15. 15. CSS Animations
  16. 16. Fonts
  17. 17. Flexbox
  18. 18. Image Values</li></ul>>Module<br />Cf:WebDesigning vol.100<br />
  19. 19. Agenda<br />CSS 3<br />Multiple background images<br />Color<br />Javascript<br />One more thing…<br />
  20. 20. Multiple background images<br />CSS3 adds the ability to apply <br />multiple background images on an element<br />
  21. 21.
  22. 22.
  23. 23. Sample<br />
  24. 24. Question<br />
  25. 25. A案<br />B案<br /><div id=“box”><br /><div id=“box_container”><br /><div id=“box_inner”><br /> <p>ダミーダミー</p><br /></div><br /></div><br /></div><br /><div id=“box_header”></div><br /><div id=“box_content”><br /> <p>ダミーダミー</p><br /></div><br /><div id=“box_footer”></div><br />
  26. 26. Web標準はA案です。<br />
  27. 27. Agenda<br />CSS 3<br />Multiple background images<br />Color<br />Javascript<br />One more thing…<br />
  28. 28. Color<br />RGB<br />RGBA<br />HSL<br />HSLA<br />opacity<br />
  29. 29. HSL<br />Hue, Saturation, Lightness<br />色相、彩度、明度<br />
  30. 30. 出展:canon <br />
  31. 31. gradient<br />
  32. 32. Sample<br />
  33. 33. Agenda<br />CSS 3<br />Multiple background images<br />Color<br />Javascript<br />One more thing…<br />
  34. 34. CSS 3 ≒ CSS 2.1 + javascript <br />
  35. 35. animation<br />
  36. 36.
  37. 37. Sample<br />
  38. 38. Agenda<br />CSS 3<br />Multiple background images<br />Color<br />Javascript<br />One more thing…<br />
  39. 39. HTML4<br />HTML5<br />CSS2.1<br />「極論」<br />一般ユーザーにとってはどうでもいいこと。<br />CSS3<br />XHTML<br />jQuery<br />flash<br />
  40. 40. HTML4<br />HTML5<br />CSS2.1<br />これらの技術でどんな体験を<br />ユーザーに与えることができるのか?<br />CSS3<br />XHTML<br />jQuery<br />flash<br />
  41. 41. CSS3<br />・・・・・・・・。<br />
  42. 42. sevenstyleweb.com/blog/<br />@sevenina<br />kouina@generalasahi.co.jp<br />sevenina77@gmail.com<br />

×