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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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ではﬂagを有効化すれば利用可能
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 Reﬂow CC
レイアウトデザインツール

13年11月30日土曜日

Adobe Edge Reﬂow CC
レイアウトデザインツール

CSSの知識があまりなくても、直感的な操作だけで
ブラウザで動作するレイアウトをデザインできる
13年11月30日土曜日

Edge ReﬂowでCSS Regions
現在のEdge Reﬂow CCプレビュー版では、
デフォルトでオフになっているので、
オンにして利用

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

Edge Reﬂow 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日土曜日

Share SlideShare

Facebook
Twitter
LinkedIn

Embed

Size (px)

Show related SlideShares at end

WordPress Shortcode

Link

Share
Email

モダンなCSS設計パターンを考える by 拓樹谷 42955 views
The Mobile Frontier at HTML5 Confer... by Yukio Andoh 4434 views
鳥取Python勉強会第7回 by Yuji Oyamada 493 views
実践Sass 後編 by kosei27 7304 views
HTML5とはなにか？マイクロソフトはHTML5をどう考えているのか？ by Microsoft 6337 views
実践Sass 前編 by Azusa Tomita 10075 views

Top clipped slide

View on SlideShare

1 of 32 Ad

1 of 32 Ad