Your SlideShare is downloading. ×
0
CSS Regionsを使った新しい
CSSレイアウトを作る方法
新しいWeb標準で新しい表現

HTML5 Conference 2013, Nov 30, 2013
13年11月30日土曜日
Who?
- 轟 啓介(とどろき けいすけ)
- アドビのデベロッパーマーケティング
- 担当はFlashからHTML5まで多岐
- 前職は開発者
- Java/J2EE(7年)、AS3/Flex/AIR(2年)
- HTML/JS/PHPなど...
CSSのレイアウト
- Flexbox
- Multi-column
- Grid Layout
- CSS Regions
- CSS Shapes
- CSS Exclusions

13年11月30日土曜日

今日はこの辺
第一章
コンテンツとレイアウトの
分離

13年11月30日土曜日
CSS Regions
複数のコンテナをまたいだ
コンテンツの流し込み

13年11月30日土曜日
13年11月30日土曜日
CSS Regions Support

as of Nov 28

Safari 6.1とiOS7 Safariではサポート開始
Chromeではflagを有効化すれば利用可能
13年11月30日土曜日
CSS Regions in W3C

13年11月30日土曜日
CSS Regions in W3C

13年11月30日土曜日
基本的な考え方
コンテンツとレイアウトを分離
コンテンツ
ワーゲンバス
フォルクスワーゲン・タイプ
2(Volkswagen Type 2)はフォル
クスワーゲンが製造する商用向けの
自動車である。一般には…

レイアウト
.page
#box...
基本的な考え方
コンテンツとレイアウトを分離
コンテンツ
<article>
<h1>ワーゲンバス</h1>
<section>
<p>フォルクスワーゲン…
</p>
<img src= bus.jpg />
</section>
</arti...
基本的な書き方
コンテンツとレイアウトを分離
コンテンツ
<article>
<h1>ワーゲンバス</h1>
<section>
<p>フォルクスワーゲン…
</p>
<img src= bus.jpg />
</section>
</arti...
基本的な書き方
コンテンツとレイアウトを分離
コンテンツ

レイアウト

<article>
<div class= page >
<h1>ワーゲンバス</h1>
<div id= box1 class= region >
<section>
...
実際のコードを見てみる

13年11月30日土曜日
複数のフローもOK
A
広告
B

1
C

2
// コンテンツ

3
// コンテンツ

-webkit-flow-into: myThread_ABC;

-webkit-flow-into: myThread_123;

// レイアウ...
CSS Regionsの応用
Mediaクエリーとの組み合わせ ①
コンテンツがフローするRWD

http://codepen.io/adobe/pen/vKixh
13年11月30日土曜日
CSS Regionsの応用
Mediaクエリーとの組み合わせ ②
UIが最適化される可変レイアウト

http://adobe-webplatform.github.io/regions-adaptive/
13年11月30日土曜日
CSS Regionsのサンプルコード

http://codepen.io/collection/jabto
13年11月30日土曜日
CSS Regionsサポートツール

13年11月30日土曜日
Adobe Edge Code CC
超軽量コードエディター

13年11月30日土曜日
Adobe Edge Code CC
超軽量コードエディター

CSS Regionsプロパティのコードヒント

CSS Regionsプロパティの値のコードヒント
13年11月30日土曜日
Adobe Edge Reflow CC
レイアウトデザインツール

13年11月30日土曜日
Adobe Edge Reflow CC
レイアウトデザインツール

CSSの知識があまりなくても、直感的な操作だけで
ブラウザで動作するレイアウトをデザインできる
13年11月30日土曜日
Edge ReflowでCSS Regions
現在のEdge Reflow CCプレビュー版では、
デフォルトでオフになっているので、
オンにして利用

任意のコンテナをRegionコンテナにできる
13年11月30日土曜日
Edge Reflow Demo

13年11月30日土曜日
第二章
四角形からの脱却

13年11月30日土曜日
CSS Shapes
シェイプの内側または周囲への
テキストの流し込み

Chrome 29, 30, Webkit Nightly 537が一部実装
13年11月30日土曜日
シェイプの内側に流し込み
-webkit-shape-inside

CSS
.circle {
/* shape the element as a circle */
shape-inside: polygon(0px, 150px, ......
シェイプの周囲に回り込み
-webkit-shape-outside

CSS
.circle {
/* shape the element as a circle */
shape-outside: polygon(0px, 150px, ....
http://www.youtube.com/watch?v=zKjoZvRCyh0
13年11月30日土曜日
http://adobe-webplatform.github.io/Demo-forAlice-s-Adventures-in-Wonderland/
13年11月30日土曜日
13年11月30日土曜日
Upcoming SlideShare
Loading in...5
×

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

18,727

Published on

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,727
On Slideshare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
53
Comments
0
Likes
43
Embeds 0
No embeds

No notes for slide

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

  1. 1. CSS Regionsを使った新しい CSSレイアウトを作る方法 新しいWeb標準で新しい表現 HTML5 Conference 2013, Nov 30, 2013 13年11月30日土曜日
  2. 2. Who? - 轟 啓介(とどろき けいすけ) - アドビのデベロッパーマーケティング - 担当はFlashからHTML5まで多岐 - 前職は開発者 - Java/J2EE(7年)、AS3/Flex/AIR(2年) - HTML/JS/PHPなどは必要な範囲で - Web DesigningでOne s Viewの ショート連載を始めました - 空冷のフォルクスワーゲンが めちゃくちゃ好き 13年11月30日土曜日 @keisuke322 もうすぐ師走だなんて 信じらんない まじで
  3. 3. CSSのレイアウト - Flexbox - Multi-column - Grid Layout - CSS Regions - CSS Shapes - CSS Exclusions 13年11月30日土曜日 今日はこの辺
  4. 4. 第一章 コンテンツとレイアウトの 分離 13年11月30日土曜日
  5. 5. CSS Regions 複数のコンテナをまたいだ コンテンツの流し込み 13年11月30日土曜日
  6. 6. 13年11月30日土曜日
  7. 7. CSS Regions Support as of Nov 28 Safari 6.1とiOS7 Safariではサポート開始 Chromeではflagを有効化すれば利用可能 13年11月30日土曜日
  8. 8. CSS Regions in W3C 13年11月30日土曜日
  9. 9. CSS Regions in W3C 13年11月30日土曜日
  10. 10. 基本的な考え方 コンテンツとレイアウトを分離 コンテンツ ワーゲンバス フォルクスワーゲン・タイプ 2(Volkswagen Type 2)はフォル クスワーゲンが製造する商用向けの 自動車である。一般には… レイアウト .page #box1 #box2 #box3 13年11月30日土曜日
  11. 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. 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. 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. 14. 実際のコードを見てみる 13年11月30日土曜日
  15. 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. 16. CSS Regionsの応用 Mediaクエリーとの組み合わせ ① コンテンツがフローするRWD http://codepen.io/adobe/pen/vKixh 13年11月30日土曜日
  17. 17. CSS Regionsの応用 Mediaクエリーとの組み合わせ ② UIが最適化される可変レイアウト http://adobe-webplatform.github.io/regions-adaptive/ 13年11月30日土曜日
  18. 18. CSS Regionsのサンプルコード http://codepen.io/collection/jabto 13年11月30日土曜日
  19. 19. CSS Regionsサポートツール 13年11月30日土曜日
  20. 20. Adobe Edge Code CC 超軽量コードエディター 13年11月30日土曜日
  21. 21. Adobe Edge Code CC 超軽量コードエディター CSS Regionsプロパティのコードヒント CSS Regionsプロパティの値のコードヒント 13年11月30日土曜日
  22. 22. Adobe Edge Reflow CC レイアウトデザインツール 13年11月30日土曜日
  23. 23. Adobe Edge Reflow CC レイアウトデザインツール CSSの知識があまりなくても、直感的な操作だけで ブラウザで動作するレイアウトをデザインできる 13年11月30日土曜日
  24. 24. Edge ReflowでCSS Regions 現在のEdge Reflow CCプレビュー版では、 デフォルトでオフになっているので、 オンにして利用 任意のコンテナをRegionコンテナにできる 13年11月30日土曜日
  25. 25. Edge Reflow Demo 13年11月30日土曜日
  26. 26. 第二章 四角形からの脱却 13年11月30日土曜日
  27. 27. CSS Shapes シェイプの内側または周囲への テキストの流し込み Chrome 29, 30, Webkit Nightly 537が一部実装 13年11月30日土曜日
  28. 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. 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. 30. http://www.youtube.com/watch?v=zKjoZvRCyh0 13年11月30日土曜日
  31. 31. http://adobe-webplatform.github.io/Demo-forAlice-s-Adventures-in-Wonderland/ 13年11月30日土曜日
  32. 32. 13年11月30日土曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×