css regionsを使った新しい cssレイアウトを作る方法
DESCRIPTION
CSS Regionsを使った新しいCSSレイアウトの可能性について、CSS Regionsの基本的な考え方と応用例を紹介します。 at HTML5 Conference 2013 (Nov 30, 2013)TRANSCRIPT
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日土曜日