CSS Regionsを使った新しい CSSレイアウトを作る方法
•
45 likes•23,746 views
CSS Regionsを使った新しいCSSレイアウトの可能性について、CSS Regionsの基本的な考え方と応用例を紹介します。 at HTML5 Conference 2013 (Nov 30, 2013)
CSS Regionsを使った新しい CSSレイアウトを作る方法
- 1. CSS Regionsを使った新しい CSSレイアウトを作る方法 新しいWeb標準で新しい表現 HTML5 Conference 2013, Nov 30, 2013 13年11月30日土曜日
- 2. Who? - 轟 啓介（とどろき けいすけ） - アドビのデベロッパーマーケティング - 担当はFlashからHTML5まで多岐 - 前職は開発者 - Java/J2EE（7年）、AS3/Flex/AIR（2年） - HTML/JS/PHPなどは必要な範囲で - Web DesigningでOne s Viewの ショート連載を始めました - 空冷のフォルクスワーゲンが めちゃくちゃ好き 13年11月30日土曜日 @keisuke322 もうすぐ師走だなんて 信じらんない まじで
- 3. CSSのレイアウト - Flexbox - Multi-column - Grid Layout - CSS Regions - CSS Shapes - CSS Exclusions 13年11月30日土曜日 今日はこの辺
- 6. 13年11月30日土曜日
- 7. CSS Regions Support as of Nov 28 Safari 6.1とiOS7 Safariではサポート開始 Chromeではflagを有効化すれば利用可能 13年11月30日土曜日
- 8. CSS Regions in W3C 13年11月30日土曜日
- 9. CSS Regions in W3C 13年11月30日土曜日
- 11. 基本的な考え方 コンテンツとレイアウトを分離 コンテンツ <article> <h1>ワーゲンバス</h1> <section> <p>フォルクスワーゲン… </p> <img src= bus.jpg /> </section> </article> 13年11月30日土曜日 レイアウト <div class= page > <div id= box1 ></div> <div id= box2 ></div> <div id= box3 ></div> </div>
- 12. 基本的な書き方 コンテンツとレイアウトを分離 コンテンツ <article> <h1>ワーゲンバス</h1> <section> <p>フォルクスワーゲン… </p> <img src= bus.jpg /> </section> </article> 13年11月30日土曜日 レイアウト <div class= page > <div id= box1 class= region > <div id= box2 class= region > <div id= box3 class= region > </div>
- 13. 基本的な書き方 コンテンツとレイアウトを分離 コンテンツ レイアウト <article> <div class= page > <h1>ワーゲンバス</h1> <div id= box1 class= region > <section> <div id= box2 class= region > <p>フォルクスワーゲン… <div id= box3 class= region > </p> </div> <img src= bus.jpg /> </section> CSS 流し込み（contents flow） </article> article { -webkit-flow-into: myThread; } 13年11月30日土曜日 .region { -webkit-flow-from: myThread; }
- 15. 複数のフローもOK A 広告 B 1 C 2 // コンテンツ 3 // コンテンツ -webkit-flow-into: myThread_ABC; -webkit-flow-into: myThread_123; // レイアウト // レイアウト -webkit-flow-from: myThread_ABC; 13年11月30日土曜日 -webkit-flow-from: myThread_123;
- 20. Adobe Edge Code CC 超軽量コードエディター 13年11月30日土曜日
- 21. Adobe Edge Code CC 超軽量コードエディター CSS Regionsプロパティのコードヒント CSS Regionsプロパティの値のコードヒント 13年11月30日土曜日
- 22. Adobe Edge Reflow CC レイアウトデザインツール 13年11月30日土曜日
- 23. Adobe Edge Reflow CC レイアウトデザインツール CSSの知識があまりなくても、直感的な操作だけで ブラウザで動作するレイアウトをデザインできる 13年11月30日土曜日
- 24. Edge ReflowでCSS Regions 現在のEdge Reflow CCプレビュー版では、 デフォルトでオフになっているので、 オンにして利用 任意のコンテナをRegionコンテナにできる 13年11月30日土曜日
- 27. CSS Shapes シェイプの内側または周囲への テキストの流し込み Chrome 29, 30, Webkit Nightly 537が一部実装 13年11月30日土曜日
- 28. シェイプの内側に流し込み -webkit-shape-inside CSS .circle { /* shape the element as a circle */ shape-inside: polygon(0px, 150px, ...); } 13年11月30日土曜日 .heart { /* shape the element as a heart */ shape-inside: polygon(150px, 32px, ...); }
- 29. シェイプの周囲に回り込み -webkit-shape-outside CSS .circle { /* shape the element as a circle */ shape-outside: polygon(0px, 150px, ...); } 13年11月30日土曜日 .heart { /* shape the element as a heart */ shape-outside: polygon(150px, 32px, ...); }
- 32. 13年11月30日土曜日