新しいCSSの仕様を色々調べてみた
•
142 likes•26,135 views
第3回HTML5ビギナーズ！（http://atnd.org/events/44530）の「新しいCSSの仕様を色々調べてみた」の資料です。 『CSS3から新たに加わったレイアウト仕様のCSS Flexbox、 Regions、Shapesで一体どんなことができるのか、ご紹介したいとおもいます。』 以下のCSS3の新しい機能の初心者向け資料です。 ・Flexbox ・Regions ・Shapes ・Multi-column Layout ・Grid Layout ・Exclusions
Recommended
Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (20)
Similar to 新しいCSSの仕様を色々調べてみた
Similar to 新しいCSSの仕様を色々調べてみた (20)
Recently uploaded
Recently uploaded (16)
新しい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