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

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