2. 『HTML5実力テスト』答え合わせ勉強会
HTML/CSS編
面白法人カヤック
HTMLファイ部 比留間和也

3. 自己紹介
• 面白法人カヤック
HTMLファイ部所属
比留間 和也
• 最近はJSばっかりで、
あんまりHTML書いてません。

4. ちょっと書きました
すべての人に知っておいてほしい
HTML5 & CSS3 の基本原則
すべての人に知っておいてほしい
スタイルシートデザインの基本原則

5. まずは結果発表

6. ▼受験者数
1249 名
▼平均点
44.02点
※2012/11/07時点での数字です

7. ▼全体の正解率
HTML: 50.1%
CSS: 41.4%
ノウハウ: 46.9%
レンダリング: 45.3%
メディア: 57.5%

8. ▼全体の正解率
HTML: 50.1%
CSS: 41.4%
ノウハウ: 46.9%
レンダリング: 45.3%
メディア: 57.5%

9. ▼最も正答率が低いカテゴリ
CSS: 41.4%
▼2番目に正答率が低いカテゴリ
レンダリング: 45.3%

10. CSS、特にUI部分が意外と弱い

11. CSS、特にUI部分が意外と弱い
（ということにして無理やり話を進めます）

12. ということで、今日はCSSの補習をしますｗ

13. みなさん、W3Cの仕様は追っていますか？

14. • CSS Backgrounds and Borders Level 3 • CSS (Grid) Template Layout
• CSS Image Values and Replaced Content Level 3 • CSS Line Grid
• CSS Marquee • CSS Lists Level 3
• CSS Multi-column Layout • CSS Positioned Layout Level 3
• CSS Speech • CSS Presentation Levels Inactive
• CSS Values and Units Level 3 • CSS Regions
• CSS Mobile Profile 2.0 • CSS Tables Level 3
• CSS TV Profile 1.0 • Selectors Level 4
• CSS Animations • CSS Object Model
• CSS Flexible Box Layout • Compositing and Blending
• CSS Text Level 3 • Filter Effects
• CSS Fragmentation Level 3 • CSS Masking
• CSS Transforms • CSS Box Alignment Module Level 3
• CSS Transitions • CSS Text Decoration Module Level 3
• CSS Print Profile • CSS Intrinsic & Extrinsic Sizing Module Level 3
• CSS Conditional Rules Level 3 • CSS Counter Styles Level 3
• CSS Fonts Level 3 • CSS Basic Box Model Level 3
• CSS Paged Media Level 3 • CSS Generated Content Level 3
• CSS Basic User Interface Level 3 • CSS Line Layout Level 3
• CSS Writing Modes Level 3 • CSS Ruby
• CSSOM View • CSS Syntax Level 3
• CSS Cascading and Inheritance Level 3 Inactive • CSS Backgrounds and Borders Level 4
• CSS Device Adaptation • Behavioral Extensions to CSS
• CSS Exclusions and Shapes • CSS Hyperlink Presentation
• CSS Generated Content for Paged Media • CSS Grid Positioning
• CSS Grid Layout

15. • CSS Backgrounds and Borders Level 3 • CSS (Grid) Template Layout
• CSS Image Values and Replaced Content Level 3 • CSS Line Grid
• CSS Marquee • CSS Lists Level 3
• CSS Multi-column Layout • CSS Positioned Layout Level 3
• CSS Speech • CSS Presentation Levels Inactive
• CSS Values and Units Level 3 • CSS Regions
• CSS Mobile Profile 2.0 • CSS Tables Level 3
• CSS TV Profile 1.0 • Selectors Level 4
多すぎ
• CSS Animations • CSS Object Model
• CSS Flexible Box Layout • Compositing and Blending
• CSS Text Level 3 • Filter Effects
• CSS Fragmentation Level 3 • CSS Masking
• CSS Transforms • CSS Box Alignment Module Level 3
• CSS Transitions • CSS Text Decoration Module Level 3
• CSS Print Profile • CSS Intrinsic & Extrinsic Sizing Module Level 3
• CSS Conditional Rules Level 3 • CSS Counter Styles Level 3
• CSS Fonts Level 3 • CSS Basic Box Model Level 3
• CSS Paged Media Level 3 • CSS Generated Content Level 3
• CSS Basic User Interface Level 3 • CSS Line Layout Level 3
• CSS Writing Modes Level 3 • CSS Ruby
• CSSOM View • CSS Syntax Level 3
• CSS Cascading and Inheritance Level 3 Inactive • CSS Backgrounds and Borders Level 4
• CSS Device Adaptation • Behavioral Extensions to CSS
• CSS Exclusions and Shapes • CSS Hyperlink Presentation
• CSS Generated Content for Paged Media • CSS Grid Positioning
• CSS Grid Layout

16. ちょっと多すぎるのでレイアウト周りを話します

17. ちょっと多すぎるのでレイアウト周りを話します
（ここテストに出るよ）

18. CSS Exclusions and Shapes Module Level 3

19. CSS Regions Module Level 3

20. CSS Multi-column Layout Module

21. CSS Template Layout Module

22. CSS Grid Positioning Module Level 3

23. CSS Flexible Box Layout Module

24. • CSS Flexible Box Layout Module
• CSS Exclusions and Shapes Module Level 3
• CSS Multi-column Layout Module
• CSS Regions Module Level 3
• CSS Template Layout Module
• CSS Grid Positioning Module Level 3

25. レイアウト関係だけでもこんなにたくさん！

26. レイアウト関係だけでもこんなにたくさん！
（正直全部追っていけないよ…）

27. でもまだ大丈夫。そもそも実装がないものも多い

28. ということで

29. 今日は、実装があり かつ ガラっと仕様が変わった
Flexible box のお話

30. Web Componentsなど、今後CSSでレイアウトを
作る際にはこうしたフレキシブルな対応は必ず求められる

31. そのための予習をしておこう

32. CSS Flexible Box

33. ていうかそもそも Flexible boxって？

34. こんなのとか

35. こんなのとか

36. こんなのとか

38. こういうレイアウトは意外とむずかしい

39. でも Flexible box を使えば簡単に

40. Let s Live Coding!!

41. Let s Live Coding!!
（せっかくなのでjsdo.it上でやります）

42. [DEMO]

43. ご清聴ありがとうございました