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

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

  • 17,794 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
17,794
On Slideshare
0
From Embeds
0
Number of Embeds
28

Actions

Shares
Downloads
51
Comments
0
Likes
40

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日土曜日