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などは必要な範囲で

- Web DesigningでOne’s Viewのショート連載を始めました

- 空冷のフォルクスワーゲンがめちゃくちゃ好き

@keisuke322

もうすぐ師走だなんて信じらんないまじで

13年11月30日土曜日

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

Safari 6.1とiOS7 Safariではサポート開始Chromeではflagを有効化すれば利用可能

as of Nov 28

13年11月30日土曜日

CSS Regions in W3C

13年11月30日土曜日

CSS Regions in W3C

13年11月30日土曜日

レイアウト

.page

基本的な考え方

コンテンツ

“ワーゲンバスフォルクスワーゲン・タイプ2（Volkswagen Type 2）はフォルクスワーゲンが製造する商用向けの自動車である。一般には…”

コンテンツとレイアウトを分離

#box1 #box2

#box3

13年11月30日土曜日

基本的な考え方

コンテンツ レイアウト

<div class=”page”> <div id=”box1”></div> <div id=”box2”></div> <div id=”box3”></div></div>

<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>

<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>

<article> <h1>ワーゲンバス</h1> <section> <p>フォルクスワーゲン… </p> <img src=”bus.jpg” /> </section></article>

コンテンツとレイアウトを分離

CSSarticle { -webkit-flow-into: myThread;}

.region { -webkit-flow-from: myThread;}

流し込み（contents flow）

13年11月30日土曜日

実際のコードを見てみる

13年11月30日土曜日

複数のフローもOK

B C

広告

2

1

A

-webkit-flow-into: myThread_ABC;

3

-webkit-flow-into: myThread_123;

-webkit-flow-from: myThread_ABC; -webkit-flow-from: myThread_123;

// コンテンツ

// レイアウト

// コンテンツ

// レイアウト

13年11月30日土曜日

CSS Regionsの応用Mediaクエリーとの組み合わせ ①“コンテンツがフローするRWD”

http://codepen.io/adobe/pen/vKixh13年11月30日土曜日

CSS Regionsの応用Mediaクエリーとの組み合わせ ②“UIが最適化される可変レイアウト”

http://adobe-webplatform.github.io/regions-adaptive/13年11月30日土曜日

CSS Regionsのサンプルコード

http://codepen.io/collection/jabto13年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日土曜日

シェイプの内側に流し込み

CSS.circle { /* shape the element as a circle */ shape-inside: polygon(0px, 150px, ...); }

.heart { /* shape the element as a heart */ shape-inside: polygon(150px, 32px, ...); }

-webkit-shape-inside

13年11月30日土曜日

シェイプの周囲に回り込み

CSS.circle { /* shape the element as a circle */ shape-outside: polygon(0px, 150px, ...); }

.heart { /* shape the element as a heart */ shape-outside: polygon(150px, 32px, ...); }

-webkit-shape-outside

13年11月30日土曜日

http://www.youtube.com/watch?v=zKjoZvRCyh013年11月30日土曜日

http://adobe-webplatform.github.io/Demo-for-Alice-s-Adventures-in-Wonderland/

13年11月30日土曜日

13年11月30日土曜日