新しい颁厂厂の仕様を色々调べてみた
?
142 likes?26,137 views
第3回HTML5ビギナーズ！（http://atnd.org/events/44530）の「新しい颁厂厂の仕様を色々调べてみた」の資料です。 『CSS3から新たに加わったレイアウト仕様のCSS Flexbox、 Regions、Shapesで一体どんなことができるのか、ご紹介したいとおもいます。』 以下のCSS3の新しい機能の初心者向け資料です。 ?Flexbox ?Regions ?Shapes ?Multi-column Layout ?Grid Layout ?Exclusions
![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](https://image.slidesharecdn.com/html5jbigginercss3newspec-131023071252-phpapp01/85/CSS-42-320.jpg)
新しい颁厂厂の仕様を色々调べてみた
- 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
- 4. 新しいCSSの仕様 CSS3でできるようになったこと n?? グラデーション n?? ドロップシャドウ n?? アニメーション n?? 角丸 n?? 不透明度 n?? Webフォント ???etc そのなかでも、レイアウト系の仕様のお話をします 4
- 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
- 7. Attention n??ほとんどが策定中の仕様の先行実装のため、 ? ベンダープレフィックスが必要です ?? -webkit , -moz, -ms とか n??本日おはなししないこと ?? プロパティや実装方法の詳細 ?? ブラウザ間の実装差など さっそく しようを みてみよう 7
- 10. 便利になること?～要素の回り込み～ Befor e float: ?left; ? float: ?left; ? ユニクロオンラインストア ? clear: ?both; clear: ?both; ? After display: ?flex; ? display: ?flex; ? ?oatの解除を気にしなくていい ヽ(○??｀)?
- 11. 便利になること?～可変幅～ Yahoo! ?JAPAN ? Befor e 11 width: ?33.33%; After flex: ?1; ? widthの面倒な計算もしなくていいヽ(○??｀)? 11
- 14. Demo n??display : ?ex; ※ラッパーとなる要素に指定 <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> .flex-container { display: flex; } CSS HTML 14
- 16. プロパティ一覧 n??並びの方向を変える ?ex-direction n??折り返す順を決める ?ex-wrap n??並び順を変更する order n??可変幅に対応する ?ex n??横方向の寄せを指定する justify-content n??縦方向の寄せを指定する align-items etc… デモで かくにん してみよう。 16
- 17. 使われている例 ?exbox適用前 ?exbox適用後 html5j(hFp://html5j.org/) ? <section> <a> <h4></h4> <img> </a> <p></p> </section> img要素 ? order: ?-?‐1; a要素 ? display: ?flex; ? flex-?‐direction: ?column; レイアウトと構造を分離できる 17
- 18. もっと詳しく 草案 最終草案 勧告候補 勧告案 W3C勧告 n??CSS ?Flexible ?Box ?Layout ?Module n??過去の仕様に注意 ?? box, ?exbox, ?ex ?? IE10だけ?exbox仕様… ?? ?exboxの旧仕様、改定仕様、現行仕様の一覧 ? n?? ベンダープレフィックス無しで動作する環境も n?? CSS ?Flexbox ?Please! ? 18
- 20. Regions ができること 複数の要素にまたがって コンテンツを流し込むことができる 【引用】 ?CSS ?Regions ?Module ?Level1 ?
- 22. 便利になること Befor e できなかった！！ でごりごり書かないといけな かった… まじやりたくない（ ｀д?） After ?? 元となるコンテンツと表示エリアを 用意する ?? CSSを指定する JSでの処理をしなくてもいいヽ(○??｀)? ? 22
- 24. Demo n???ow-into, ?ow-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
- 26. Demo n?? はみ出し部分の表示方法 region-fragment ?? over?owプロパティと同じような動作 n?? 特定の領域にスタイルを適用する 擬似要素regions n?? Regions - a collection by Adobe Web Platform ? CodePen デモで かくにん してみよう。 26
- 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://?ags で 「試験運用版の ウェブプラットフォームの機能を有効にする」をONにする n?? 領域 | ?レイアウト | ?Adobe ?& ?HTML n?? iOS 7 が対応した CSS Regions + Shapes による文字 レイアウトのサンプル 27
- 28. 四角形からの脱却！ Shapes
- 29. Shapes ができること シェイプの内側、外側へテキストの流し込みができる Magazin ?Layout ?by ?Ronel ?van ?Heerden 29
- 30. 便利になること Cooking ?with ?Shapes ? 画像?四角形からの脱却 ヽ(○??｀)? ? 30
- 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
- 34. Demo n?? さまざまな形状のプロパティ n?? 複雑な形状も定義できる n?? Polygon Dawn n?? Nevermore n?? Exclusions and Shapes - a collection by Adobe Web Platform - CodePen デモで かくにん してみよう。 34
- 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://?ags で 「試験運用版のウェブプ ラットフォームの機能を有効にする」をONにする n?? シェイプの中への流し込みの仕様は CSS Shapes Module Level 2 に延期された n?? シェイプ ? レイアウト ? Adobe & HTML n?? CSS Shapes the future of the web 35
- 38. 便利になること n??Regionsと同じ流し込みの問題 ＋ nicoスライム 2012 ?autumn ?and ?winter ? 雑誌のような ? レイアウトができる ? ヽ(○??｀)? ? CSS ?3 ?の段組みとその使いどころ 38
- 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. もっと詳しく 作業草稿 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
- 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. Exclusions 要素を囲むように テキストを折り返す仕様 CSS Exclusions Module Level 1 .myExclusions { wrap-flow: both; } 【引用】除外 (Internet ?Explorer) ? n?? 要素の反対側にもフローさせることができる n?? 情報も少なく、変更も多いまだまだの仕様 ?? HTMLとCSS3でリッチなページレイアウトを実現する (Adobe) ?? 除外 (Internet Explorer) ?? Adobe&HTML：除外領域とシェイプ 43
- 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. まとめ n?? これまでのレイアウトがより簡単に！ n?? 複雑なレイアウトがCSSでできる！ n?? でも実用にはもうすこしかかりそうなものも n?? 調べる際に注意したいこと ?? Working Draftは仕様がころころ変わるので注意 ?? 新旧どちらのプロパティが実装されてるか ?? なるべく日付の新しい記事を読む かんたんになると ビギナーにもうれしい !! わたしもできるかも ! 46
- 47. 新しいCSSの仕様を 色々調べてみた 第3回HTML5ビギナーズ！ ? 2013/10/23 Thank you so much :) @hiromitsuuuuu Special thanks?@ChisaMi