新しいCSSの仕様を色々調べてみた
142 likes26,143 views
第3回HTML5ビギナーズ！（http://atnd.org/events/44530）の「新しいCSSの仕様を色々調べてみた」の資料です。 『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)
新しいCSSの仕様を色々調べてみた
- 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; floatの解除を気にしなくていい ヽ(○´∀｀)ﾉ
- 11. 便利になること ∼可変幅∼ Yahoo! JAPAN Befor e 11 width: 33.33%; After flex: 1; widthの面倒な計算もしなくていいヽ(○´∀｀)ﾉ 11
- 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
- 16. プロパティ一覧 n 並びの方向を変える flex-direction n 折り返す順を決める flex-wrap n 並び順を変更する order n 可変幅に対応する flex n 横方向の寄せを指定する justify-content n 縦方向の寄せを指定する align-items etc… デモで かくにん してみよう。 16
- 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. もっと詳しく 草案 最終草案 勧告候補 勧告案 W3C勧告 n CSS Flexible Box Layout Module n 過去の仕様に注意 • box, flexbox, flex • IE10だけflexbox仕様… • flexboxの旧仕様、改定仕様、現行仕様の一覧 n ベンダープレフィックス無しで動作する環境も n CSS Flexbox Please! 18
- 20. Regions ができること 複数の要素にまたがって コンテンツを流し込むことができる 【引用】 CSS Regions Module Level1
- 22. 便利になること Befor e できなかった！！ でごりごり書かないといけな かった… まじやりたくない（ ｀д´） After • 元となるコンテンツと表示エリアを 用意する • CSSを指定する JSでの処理をしなくてもいいヽ(○´∀｀)ﾉ 22
- 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
- 26. Demo n はみ出し部分の表示方法 region-fragment • overflowプロパティと同じような動作 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://flags で 「試験運用版の ウェブプラットフォームの機能を有効にする」を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://flags で 「試験運用版のウェブプ ラットフォームの機能を有効にする」を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