Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS の
Flexible Box Layout が
ヤバい
2013/09/10(火) html5nagoya#7
<!-- ここから追記 -->
追記
• 今日話そうとしたネタが、綺麗にまとまって
いる(本日 9/10 付けの)ブログ記事を
見つけてしまいました・・・
• flexboxの旧仕様、改定仕様、現行仕様の一
覧(http://tech.naver.jp/blog/?p=247...
<!-- ここまで追記 -->
スマートフォンで
よくあるやつ
スマートフォンで
よくあるやつ
ここは幅固定にしたい ここも幅固定にしたい
スマートフォンで
よくあるやつ
スマートフォンで
よくあるやつ
ここは伸縮してほしい
Flexible Box Layout
• http://www.w3.org/TR/css3-flexbox/
ヤバい
何がヤバいって
何がヤバいって
その仕様の
変遷っぷりがヤバい
2009年ごろ
2009年ごろ
• 外側の要素に display: box;
• 内側の要素に box-flex: 1; など
• 初期のスマートフォンサイトなんかは
これが書かれてることが多い
2011年ごろ
2011年ごろ
• 外側の要素に display: flexbox;
• 内側の要素に box-flex: 1; など
2012年ごろ
2012年ごろ
• 外側の要素に display: flex;
• 内側の要素は指定しなくていいよー
Flexible Box Layout
• 3、3種類ある・・・ッ!
Flexible Box Layout
• 試しに全部やってみた
• http://codepen.io/girigiribauer/
pen/BdAeC
• ベンダープレフィックスとかは(調べ
るの面倒くさかったので)全部入り
• 一通りに対...
display: table;
• この例なら display: table; で
いいじゃない
• table タグ使わずに、テーブルレイア
ウト(rowspanとかは対応してない)
• IE8から使える
display: table;
display: table;
まとめ
まとめ
• 決まりきっていない仕様を使うのは
怖い面もあることを改めて認識した
まとめ
• 決まりきっていない仕様を使うのは
怖い面もあることを改めて認識した
• display: table はけっこう使える
まとめ
• 決まりきっていない仕様を使うのは
怖い面もあることを改めて認識した
• display: table はけっこう使える
• (試しにcodepen使ってみたけど)
スマートフォンでcodepenは
使いづらい
(スクロール出来ない・...
Upcoming SlideShare
Loading in …5
×

CSS の Flexible Box Layout がヤバい

1,204 views

Published on

2013/09/10 の 『HTML5勉強会 名古屋』で軽くしゃべったやつです

Published in: Technology
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

CSS の Flexible Box Layout がヤバい

  1. 1. CSS の Flexible Box Layout が ヤバい 2013/09/10(火) html5nagoya#7
  2. 2. <!-- ここから追記 -->
  3. 3. 追記 • 今日話そうとしたネタが、綺麗にまとまって いる(本日 9/10 付けの)ブログ記事を 見つけてしまいました・・・ • flexboxの旧仕様、改定仕様、現行仕様の一 覧(http://tech.naver.jp/blog/?p=2479) • こっち見た方が分かりやすくて良いと思いま すので、僕はヤバいってことだけ言います
  4. 4. <!-- ここまで追記 -->
  5. 5. スマートフォンで よくあるやつ
  6. 6. スマートフォンで よくあるやつ ここは幅固定にしたい ここも幅固定にしたい
  7. 7. スマートフォンで よくあるやつ
  8. 8. スマートフォンで よくあるやつ ここは伸縮してほしい
  9. 9. Flexible Box Layout • http://www.w3.org/TR/css3-flexbox/
  10. 10. ヤバい
  11. 11. 何がヤバいって
  12. 12. 何がヤバいって その仕様の 変遷っぷりがヤバい
  13. 13. 2009年ごろ
  14. 14. 2009年ごろ • 外側の要素に display: box; • 内側の要素に box-flex: 1; など • 初期のスマートフォンサイトなんかは これが書かれてることが多い
  15. 15. 2011年ごろ
  16. 16. 2011年ごろ • 外側の要素に display: flexbox; • 内側の要素に box-flex: 1; など
  17. 17. 2012年ごろ
  18. 18. 2012年ごろ • 外側の要素に display: flex; • 内側の要素は指定しなくていいよー
  19. 19. Flexible Box Layout • 3、3種類ある・・・ッ!
  20. 20. Flexible Box Layout • 試しに全部やってみた • http://codepen.io/girigiribauer/ pen/BdAeC • ベンダープレフィックスとかは(調べ るの面倒くさかったので)全部入り • 一通りに対応した書き方とか 怖くて考えたくない
  21. 21. display: table; • この例なら display: table; で いいじゃない • table タグ使わずに、テーブルレイア ウト(rowspanとかは対応してない) • IE8から使える
  22. 22. display: table;
  23. 23. display: table;
  24. 24. まとめ
  25. 25. まとめ • 決まりきっていない仕様を使うのは 怖い面もあることを改めて認識した
  26. 26. まとめ • 決まりきっていない仕様を使うのは 怖い面もあることを改めて認識した • display: table はけっこう使える
  27. 27. まとめ • 決まりきっていない仕様を使うのは 怖い面もあることを改めて認識した • display: table はけっこう使える • (試しにcodepen使ってみたけど) スマートフォンでcodepenは 使いづらい (スクロール出来ない・・・)

×