CSS Regionsを使った新しい CSSレイアウトを作る方法
45 likes23,755 views
CSS Regionsを使った新しいCSSレイアウトの可能性について、CSS Regionsの基本的な考え方と応用例を紹介します。at HTML5 Conference 2013 (Nov 30, 2013)
1 of 32
Downloaded 56 times
Ad
Recommended
More Related Content
Viewers also liked(20)
More from Keisuke Todoroki(19)
Ad
Recently uploaded(8)
Ad
CSS Regionsを使った新しい CSSレイアウトを作る方法
- 1.CSS Regionsを使った新しいCSSレイアウトを作る方法新しいWeb標準で新しい表現HTML5 Conference 2013, Nov 30, 201313年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 Exclusions13年11月30日土曜日今日はこの辺
- 7.CSS Regions Supportas of Nov 28Safari 6.1とiOS7 Safariではサポート開始Chromeではflagを有効化すれば利用可能13年11月30日土曜日
- 8.CSS Regions in W3C13年11月30日土曜日
- 9.CSS Regions in W3C13年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.複数のフローもOKA広告B1C2// コンテンツ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-insideCSS.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-outsideCSS.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日土曜日