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の仕様を色々調べてみた

24,697 views

Published on

第3回HTML5ビギナーズ!(http://atnd.org/events/44530)の「新しいCSSの仕様を色々調べてみた」の資料です。

『CSS3から新たに加わったレイアウト仕様のCSS Flexbox、 Regions、Shapesで一体どんなことができるのか、ご紹介したいとおもいます。』

以下のCSS3の新しい機能の初心者向け資料です。
 ・Flexbox
 ・Regions
 ・Shapes
 ・Multi-column Layout
 ・Grid Layout
 ・Exclusions

Published in: Technology
  • Be the first to comment

新しいCSSの仕様を色々調べてみた

  1. 1. 新しいCSSの仕様を 色々調べてみた 第3回HTML5ビギナーズ!   2013/10/23 @hiromitsuuuuu 1
  2. 2. Who am I? @  hiromitsuuuuu   Hiromi  Morikawa   n  html5j スタッフ n  うどん県 → 福岡 → 東京なう n  Web Developper n  HTML5, CSS, JS, UI, Javaも少々 n  フロントエンド中心のR&Dチーム でWeb標準系技術担当やってます n  blog : RIAxDNP, Mitsu.log(); 2
  3. 3. みんなはじめはビギナー 調べてみることにしました \(^o^)/ 3
  4. 4. 新しいCSSの仕様 CSS3でできるようになったこと n  グラデーション n  ドロップシャドウ n  アニメーション n  角丸 n  不透明度 n  Webフォント            ・・・etc そのなかでも、レイアウト系の仕様のお話をします 4
  5. 5. Agenda n Flexbox 15min n Regions 5min n Shapes 5min n Multi-column 5min n Grid Layout 2min n Exclusions 2min n まとめ 【引用】  CSS  Regions  Module  Level1  ,  除外 (Internet  Explorer)   5
  6. 6. お話しすること n 何ができるの? n 使えたら便利になること、これまでと変わること n 基本的な考え方と使い方 n 簡単なデモ n 詳しく知りたい場合に参考になるURLなど 6
  7. 7. Attention n ほとんどが策定中の仕様の先行実装のため、   ベンダープレフィックスが必要です •  -webkit , -moz, -ms とか n 本日おはなししないこと •  プロパティや実装方法の詳細 •  ブラウザ間の実装差など さっそく しようを みてみよう 7
  8. 8. まえおきが長くなりましたが…ひとつめの仕様 Flexbox
  9. 9. Flexbox ができること コンテナ上で要素を縦横柔軟に配置できる!
  10. 10. 便利になること ∼要素の回り込み∼ Befor e float:  left;    float:  left;   ユニクロオンラインストア   clear:  both; clear:  both;   After display:  flex;    display:  flex;    floatの解除を気にしなくていい ヽ(○´∀`)ノ
  11. 11. 便利になること ∼可変幅∼ Yahoo!  JAPAN   Befor e 11 width:  33.33%; After flex:  1;    widthの面倒な計算もしなくていいヽ(○´∀`)ノ 11
  12. 12. 便利になること n 対象の要素以外に影響しない n 固定幅と可変幅の切り替えが簡単にできる n 並びの順番を簡単に変更できる 12
  13. 13. 基本になる考え方 Flexコンテナ Flexアイテム Flexアイテム Flexアイテム 13
  14. 14. Demo n display : flex; ※ラッパーとなる要素に指定 <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> .flex-container { display: flex; } CSS HTML 14
  15. 15. 基本になる考え方 Flexコンテナ Flexアイテム Flexアイテム Flexアイテム Flexコンテナ直下の子要素は 自動的にFlexアイテムになる Flexコンテナ用、Flexアイテム用のプロパティがある 15
  16. 16. プロパティ一覧 n 並びの方向を変える flex-direction n 折り返す順を決める flex-wrap n 並び順を変更する order n 可変幅に対応する flex n 横方向の寄せを指定する justify-content n 縦方向の寄せを指定する align-items etc… デモで かくにん してみよう。 16
  17. 17. 使われている例 flexbox適用前 flexbox適用後 html5j(hFp://html5j.org/)   <section> <a> <h4></h4> <img> </a> <p></p> </section> img要素   order:  -­‐1; a要素   display:  flex;   flex-­‐direction:  column; レイアウトと構造を分離できる 17
  18. 18. もっと詳しく 草案 最終草案 勧告候補 勧告案 W3C勧告 n CSS  Flexible  Box  Layout  Module n 過去の仕様に注意 •  box, flexbox, flex •  IE10だけflexbox仕様… •  flexboxの旧仕様、改定仕様、現行仕様の一覧   n  ベンダープレフィックス無しで動作する環境も n  CSS  Flexbox  Please!   18
  19. 19. 電子書籍とか雑誌レイアウトに使えそう Regions
  20. 20. Regions ができること 複数の要素にまたがって コンテンツを流し込むことができる 【引用】  CSS  Regions  Module  Level1  
  21. 21. 便利になること Flipboard   代官山DAIKANYAMA  T-­‐SITE   21
  22. 22. 便利になること Befor e できなかった!! でごりごり書かないといけな かった… まじやりたくない( `д´) After •  元となるコンテンツと表示エリアを 用意する •  CSSを指定する JSでの処理をしなくてもいいヽ(○´∀`)ノ   22
  23. 23. 基本になる考え方 abc…--------------------------------------------------------------------------------------------------------------------------- コンテンツの中身 <div> + <div> <div> コンテンツを表示 させたい領域 abc…--------------------------------- = ------------------------------------------------------------------流し込まれる! 23
  24. 24. Demo n flow-into, flow-from <!-- コンテンツの中身の定義 --> /* コンテンツの中身の定義 */ #source { -webkit-flow-into: sample; } ※任意の名前 <div id="source"> <p>むかしむかし、あるところに…</p>   <p>おじいさんは山へしばかれに…</p> </div> <!-- 表示する領域の定義 --> /* 表示する領域の定義 */ <article> <p class="region"></p> <p class="region"></p> </article> .region { -webkit-flow-from: sample;  } CSS HTML 24
  25. 25. 基本になる考え方 abc…--------------------------------------------------------------------------------------------------------------------------- コンテンツの中身 <div> + <div> <div> コンテンツを表示 させたい領域 abc…--------------------------------- = ------------------------------------------------------------------流し込まれる! レイアウトとコンテンツを切り離して考える 25
  26. 26. Demo n  はみ出し部分の表示方法 region-fragment •  overflowプロパティと同じような動作 n  特定の領域にスタイルを適用する 擬似要素regions n  Regions - a collection by Adobe Web Platform ‒ CodePen デモで かくにん してみよう。 26
  27. 27. もっと詳しく 作業草稿 Working Draft, WD 最終草案 Last Call WorkingDraft 勧告候補 勧告案 W3C勧告 Proposed W3C Recommendation, Candidate Recommendation, CR Recommendation, PR REC n CSS Regions Module Level1 n  Chrome, IE10+, iOS7 MobileSafari で動く n  Chromeブラウザのchrome://flags で 「試験運用版の ウェブプラットフォームの機能を有効にする」をONにする n  領域 |  レイアウト |  Adobe  &  HTML n  iOS 7 が対応した CSS Regions + Shapes による文字 レイアウトのサンプル 27
  28. 28. 四角形からの脱却! Shapes
  29. 29. Shapes ができること シェイプの内側、外側へテキストの流し込みができる Magazin  Layout  by  Ronel  van  Heerden 29
  30. 30. 便利になること Cooking  with  Shapes   画像・四角形からの脱却 ヽ(○´∀`)ノ   30
  31. 31. 基本の考え方 float + = abc…-------------------------------------------------------------------------------------------- 回り込みエリアの形状を定義する 31
  32. 32. Demo n shape-outside, shape-margin .circle { float: left; -webkit-shape-outside: circle(100px,100px,100px); -webkit-shape-margin: 10px; } <div> <div class='circle'></div> <p>ここの文章をまあるく回りこませてください…</p> </div> CSS HTML 32
  33. 33. 基本の考え方 ここ。 回り込みエリアの形状を定義する 33
  34. 34. Demo n  さまざまな形状のプロパティ n  複雑な形状も定義できる n  Polygon Dawn n  Nevermore n  Exclusions and Shapes - a collection by Adobe Web Platform - CodePen デモで かくにん してみよう。 34
  35. 35. もっと詳しく 作業草稿 Working Draft, WD 最終草案 Last Call WorkingDraft 勧告候補 勧告案 W3C勧告 Proposed W3C Recommendation, Candidate Recommendation, CR Recommendation, PR REC n  【仕様】 CSS Shapes Module Level 1 n  Chrome, iOS7 MobileSafari で動く n  Chromeブラウザはchrome://flags で 「試験運用版のウェブプ ラットフォームの機能を有効にする」をONにする n  シェイプの中への流し込みの仕様は  CSS Shapes Module Level 2 に延期された n  シェイプ ¦ レイアウト ¦ Adobe & HTML n  CSS Shapes the future of the web 35
  36. 36. 雑誌のようなレイアウトがWEBでできる! Multi-column Layout
  37. 37. Multi-column Layout ができること 段組みレイアウトが可能になる
  38. 38. 便利になること n Regionsと同じ流し込みの問題 + nicoスライム 2012  autumn  and  winter   雑誌のような   レイアウトができる   ヽ(○´∀`)ノ   CSS  3  の段組みとその使いどころ 38
  39. 39. Demo n column-count .column {     column-count:2; } n column-width .column { column-width: 250px; column-gap: 50px; } カラム数を指定する CSS <div class="column"> <p>むかしむかし、あるところに…</p>   <p>おじいさんは山へしばかれに…</p> </div> HTML 段の幅を指定する CSS <div class="column"> <p>むかしむかし、あるところに…</p>   <p>おじいさんは山へしばかれに…</p> HTML </div> 39
  40. 40. もっと詳しく 作業草稿 Working Draft, WD 最終草案 Last Call WorkingDraft 勧告候補 勧告案 W3C勧告 Proposed W3C Recommendation, Candidate Recommendation, CR Recommendation, PR REC n  【仕様】 CSS Multi-column Layout Module n  【対応状況】Can I use CSS3 Multiple column layout? n  MDN  :  CSS  マルチカラムレイアウトの利用   n  CSS3  MULTI  COLUMN   •  カラム数などを入力して確認することができるデモサイト   40
  41. 41. ほかにもこんなのがあります Grid Layout Exclusions &
  42. 42. Grid Layout 要素をグリッド状に 配置できる仕様 CSS Grid Layout Module Level 1 .myGrid {     display: grid; } 【引用】CSS  グリッドを使ってアダプティブ レイアウトを作成する方法   n  プロパティを使って列と行を設定する n  まさにテーブルレイアウト! n  IE10+ のみ (Can I use CSS Grid Layout?) •  [参考]グリッド レイアウト(Internet Explorer) 42
  43. 43. Exclusions 要素を囲むように テキストを折り返す仕様 CSS Exclusions Module Level 1 .myExclusions {     wrap-flow: both; } 【引用】除外 (Internet  Explorer)   n  要素の反対側にもフローさせることができる n  情報も少なく、変更も多いまだまだの仕様 •  HTMLとCSS3でリッチなページレイアウトを実現する (Adobe) •  除外 (Internet Explorer) •  Adobe&HTML:除外領域とシェイプ 43
  44. 44. 似たようなのがたくさん出てきてややこしくなってきましたが… まとめ
  45. 45. 新しいCSSの仕様 n Flexbox Floatのような要素の回り込み や、可変幅なボックスに n Multi-column 雑誌のような段組レイアウト をしたいときに n Regions 複数の要素にまたがってコン テンツを流し込みたいときに n Grid Layout 要素をグリッド上に配置し たいときに n Shapes シェイプの内外にテキストを 流し込みたいときに n Exclusions 要素を囲むようにテキス トを折り返すときに 【引用】  CSS  Regions  Module  Level1  ,  除外 (Internet  Explorer)   45
  46. 46. まとめ n  これまでのレイアウトがより簡単に! n  複雑なレイアウトがCSSでできる! n  でも実用にはもうすこしかかりそうなものも n  調べる際に注意したいこと •  Working Draftは仕様がころころ変わるので注意 •  新旧どちらのプロパティが実装されてるか •  なるべく日付の新しい記事を読む かんたんになると ビギナーにもうれしい !! わたしもできるかも ! 46
  47. 47. 新しいCSSの仕様を 色々調べてみた 第3回HTML5ビギナーズ!   2013/10/23 Thank you so much :) @hiromitsuuuuu Special thanks @ChisaMi

×