『HTML5実力テスト』答え合わせ勉強会       HTML/CSS編        面白法人カヤック     HTMLファイ部 比留間和也
自己紹介• 面白法人カヤック HTMLファイ部所属 比留間 和也• 最近はJSばっかりで、 あんまりHTML書いてません。
ちょっと書きましたすべての人に知っておいてほしいHTML5 & CSS3 の基本原則  すべての人に知っておいてほしい  スタイルシートデザインの基本原則
まずは結果発表
▼受験者数1249 名▼平均点44.02点※2012/11/07時点での数字です
▼全体の正解率HTML: 50.1%CSS: 41.4%ノウハウ: 46.9%レンダリング: 45.3%メディア: 57.5%
▼全体の正解率HTML: 50.1%CSS: 41.4%ノウハウ: 46.9%レンダリング: 45.3%メディア: 57.5%
▼最も正答率が低いカテゴリCSS: 41.4%▼2番目に正答率が低いカテゴリレンダリング: 45.3%
CSS、特にUI部分が意外と弱い
CSS、特にUI部分が意外と弱い(ということにして無理やり話を進めます)
ということで、今日はCSSの補習をしますw
みなさん、W3Cの仕様は追っていますか?
•   CSS Backgrounds and Borders Level 3              •   CSS (Grid) Template Layout•   CSS Image Values and Replaced Conte...
•   CSS Backgrounds and Borders Level 3              •   CSS (Grid) Template Layout•   CSS Image Values and Replaced Conte...
ちょっと多すぎるのでレイアウト周りを話します
ちょっと多すぎるのでレイアウト周りを話します(ここテストに出るよ)
CSS Exclusions and Shapes Module Level 3
CSS Regions Module Level 3
CSS Multi-column Layout Module
CSS Template Layout Module
CSS Grid Positioning Module Level 3
CSS Flexible Box Layout Module
• CSS Flexible Box Layout Module• CSS Exclusions and Shapes Module Level 3• CSS Multi-column Layout Module• CSS Regions Mo...
レイアウト関係だけでもこんなにたくさん!
レイアウト関係だけでもこんなにたくさん!(正直全部追っていけないよ…)
でもまだ大丈夫。そもそも実装がないものも多い
ということで
今日は、実装があり かつ ガラっと仕様が変わった      Flexible box のお話
Web Componentsなど、今後CSSでレイアウトを作る際にはこうしたフレキシブルな対応は必ず求められる
そのための予習をしておこう
CSS Flexible Box
ていうかそもそも Flexible boxって?
こんなのとか
こんなのとか
こんなのとか
こういうレイアウトは意外とむずかしい
でも Flexible box を使えば簡単に
Let s Live Coding!!
Let s Live Coding!!(せっかくなのでjsdo.it上でやります)
[DEMO]
ご清聴ありがとうございました
HTML5実力テスト 答え合わせ勉強会 HTML/CSS編
HTML5実力テスト 答え合わせ勉強会 HTML/CSS編
Upcoming SlideShare
Loading in …5
×

HTML5実力テスト 答え合わせ勉強会 HTML/CSS編

3,582 views

Published on

  • Be the first to comment

HTML5実力テスト 答え合わせ勉強会 HTML/CSS編

  1. 1. 『HTML5実力テスト』答え合わせ勉強会 HTML/CSS編 面白法人カヤック HTMLファイ部 比留間和也
  2. 2. 自己紹介• 面白法人カヤック HTMLファイ部所属 比留間 和也• 最近はJSばっかりで、 あんまりHTML書いてません。
  3. 3. ちょっと書きましたすべての人に知っておいてほしいHTML5 & CSS3 の基本原則 すべての人に知っておいてほしい スタイルシートデザインの基本原則
  4. 4. まずは結果発表
  5. 5. ▼受験者数1249 名▼平均点44.02点※2012/11/07時点での数字です
  6. 6. ▼全体の正解率HTML: 50.1%CSS: 41.4%ノウハウ: 46.9%レンダリング: 45.3%メディア: 57.5%
  7. 7. ▼全体の正解率HTML: 50.1%CSS: 41.4%ノウハウ: 46.9%レンダリング: 45.3%メディア: 57.5%
  8. 8. ▼最も正答率が低いカテゴリCSS: 41.4%▼2番目に正答率が低いカテゴリレンダリング: 45.3%
  9. 9. CSS、特にUI部分が意外と弱い
  10. 10. CSS、特にUI部分が意外と弱い(ということにして無理やり話を進めます)
  11. 11. ということで、今日はCSSの補習をしますw
  12. 12. みなさん、W3Cの仕様は追っていますか?
  13. 13. • 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
  14. 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. 15. ちょっと多すぎるのでレイアウト周りを話します
  16. 16. ちょっと多すぎるのでレイアウト周りを話します(ここテストに出るよ)
  17. 17. CSS Exclusions and Shapes Module Level 3
  18. 18. CSS Regions Module Level 3
  19. 19. CSS Multi-column Layout Module
  20. 20. CSS Template Layout Module
  21. 21. CSS Grid Positioning Module Level 3
  22. 22. CSS Flexible Box Layout Module
  23. 23. • 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
  24. 24. レイアウト関係だけでもこんなにたくさん!
  25. 25. レイアウト関係だけでもこんなにたくさん!(正直全部追っていけないよ…)
  26. 26. でもまだ大丈夫。そもそも実装がないものも多い
  27. 27. ということで
  28. 28. 今日は、実装があり かつ ガラっと仕様が変わった Flexible box のお話
  29. 29. Web Componentsなど、今後CSSでレイアウトを作る際にはこうしたフレキシブルな対応は必ず求められる
  30. 30. そのための予習をしておこう
  31. 31. CSS Flexible Box
  32. 32. ていうかそもそも Flexible boxって?
  33. 33. こんなのとか
  34. 34. こんなのとか
  35. 35. こんなのとか
  36. 36. こういうレイアウトは意外とむずかしい
  37. 37. でも Flexible box を使えば簡単に
  38. 38. Let s Live Coding!!
  39. 39. Let s Live Coding!!(せっかくなのでjsdo.it上でやります)
  40. 40. [DEMO]
  41. 41. ご清聴ありがとうございました

×