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

1. CSS 3 の話 2～3なの？2なの？～ Kousuke (seven)Inamoto

2. Agenda CSS 3 Multiple background images Color Javascript One more thing…

3. Agenda CSS 3 Multiple background images Color Javascript One more thing…

4. CSS Cascading Style Sheetsとは、 HTML や XML の要素をどのように修飾（表示）するかを 指示する仕様であり、W3Cによる勧告の一つ。 文書の構造と体裁を分離させるという理念を実現する為に 提唱されたスタイルシートの、具体的な仕様の一つ。 (From wikipedia)

6. CSS 3 ≒ CSS 2.1 + javascript

8. Color

9. Namespaces

10. Media Query

11. Backgrounds & Borders

12. Template Layout

13. CSS Transitions

14. CSS Transform

15. CSS Animations

16. Fonts

17. Flexbox

18. Image Values>Module Cf:WebDesigning vol.100

19. Agenda CSS 3 Multiple background images Color Javascript One more thing…

20. Multiple background images CSS3 adds the ability to apply multiple background images on an element

23. Sample

24. Question

25. A案 B案 <div id=“box”> <div id=“box_container”> <div id=“box_inner”> <p>ダミーダミー</p> </div> </div> </div> <div id=“box_header”></div> <div id=“box_content”> <p>ダミーダミー</p> </div> <div id=“box_footer”></div>

26. Web標準はA案です。

27. Agenda CSS 3 Multiple background images Color Javascript One more thing…

28. Color RGB RGBA HSL HSLA opacity

29. HSL Hue, Saturation, Lightness 色相、彩度、明度

30. 出展：canon

31. gradient

32. Sample

33. Agenda CSS 3 Multiple background images Color Javascript One more thing…

34. CSS 3 ≒ CSS 2.1 + javascript

35. animation

37. Sample

38. Agenda CSS 3 Multiple background images Color Javascript One more thing…

39. HTML4 HTML5 CSS2.1 「極論」 一般ユーザーにとってはどうでもいいこと。 CSS3 XHTML jQuery flash

40. HTML4 HTML5 CSS2.1 これらの技術でどんな体験を ユーザーに与えることができるのか？ CSS3 XHTML jQuery flash

41. CSS3 ・・・・・・・・。

42. sevenstyleweb.com/blog/ @sevenina kouina@generalasahi.co.jp sevenina77@gmail.com