Your SlideShare is downloading. ×
0
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS Regionsを使った新しい CSSレイアウトを作る方法

18,435

Published on

CSS Regionsを使った新しいCSSレイアウトの可能性について、CSS Regionsの基本的な考え方と応用例を紹介します。 …

CSS Regionsを使った新しいCSSレイアウトの可能性について、CSS Regionsの基本的な考え方と応用例を紹介します。
at HTML5 Conference 2013 (Nov 30, 2013)

Published in: Technology
0 Comments
43 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
18,435
On Slideshare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
53
Comments
0
Likes
43
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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日土曜日 今日はこの辺
  • 4. 第一章 コンテンツとレイアウトの 分離 13年11月30日土曜日
  • 5. CSS Regions 複数のコンテナをまたいだ コンテンツの流し込み 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日土曜日
  • 10. 基本的な考え方 コンテンツとレイアウトを分離 コンテンツ ワーゲンバス フォルクスワーゲン・タイプ 2(Volkswagen Type 2)はフォル クスワーゲンが製造する商用向けの 自動車である。一般には… レイアウト .page #box1 #box2 #box3 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; }
  • 14. 実際のコードを見てみる 13年11月30日土曜日
  • 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;
  • 16. CSS Regionsの応用 Mediaクエリーとの組み合わせ ① コンテンツがフローするRWD http://codepen.io/adobe/pen/vKixh 13年11月30日土曜日
  • 17. CSS Regionsの応用 Mediaクエリーとの組み合わせ ② UIが最適化される可変レイアウト http://adobe-webplatform.github.io/regions-adaptive/ 13年11月30日土曜日
  • 18. CSS Regionsのサンプルコード http://codepen.io/collection/jabto 13年11月30日土曜日
  • 19. CSS Regionsサポートツール 13年11月30日土曜日
  • 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日土曜日
  • 25. Edge Reflow Demo 13年11月30日土曜日
  • 26. 第二章 四角形からの脱却 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, ...); }
  • 30. http://www.youtube.com/watch?v=zKjoZvRCyh0 13年11月30日土曜日
  • 31. http://adobe-webplatform.github.io/Demo-forAlice-s-Adventures-in-Wonderland/ 13年11月30日土曜日
  • 32. 13年11月30日土曜日

×