CSS Regionsを使った新しい CSSレイアウトを作る方法
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 18,419 views

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

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

Statistics

Views

Total Views
18,419
Views on SlideShare
7,114
Embed Views
11,305

Actions

Likes
39
Downloads
49
Comments
0

25 Embeds 11,305

http://stocker.jp 5499
http://html5experts.jp 5342
https://twitter.com 162
http://feedly.com 162
http://syossan.hateblo.jp 40
http://www.feedspot.com 35
http://dottab.com 20
http://www.newsblur.com 12
http://eventifier.com 5
http://digg.com 5
https://www.facebook.com 3
http://eventifier.co 3
http://plus.url.google.com 3
http://newsblur.com 2
http://s.deeeki.com 2
https://m.facebook.com&_=1388076725647 HTTP 1
https://m.facebook.com&_=1388062241908 HTTP 1
https://www.google.co.jp 1
http://r.awks.jp 1
http://reader.aol.com 1
https://www.commafeed.com 1
http://www12243uf.sakura.ne.jp 1
https://reader.aol.co.jp 1
https://m.facebook.com&_=1385976860809 HTTP 1
http://www.google.co.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS Regionsを使った新しい CSSレイアウトを作る方法 CSS Regionsを使った新しい CSSレイアウトを作る方法 Presentation 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の ショート連載を始めました - 空冷のフォルクスワーゲンが めちゃくちゃ好き 13年11月30日土曜日 @keisuke322 もうすぐ師走だなんて 信じらんない まじで
    • 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 #box1 #box2 #box3 13年11月30日土曜日
    • 基本的な考え方 コンテンツとレイアウトを分離 コンテンツ <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>
    • 基本的な書き方 コンテンツとレイアウトを分離 コンテンツ <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> <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; }
    • 実際のコードを見てみる 13年11月30日土曜日
    • 複数のフローも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;
    • 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, ...); } 13年11月30日土曜日 .heart { /* shape the element as a heart */ shape-inside: polygon(150px, 32px, ...); }
    • シェイプの周囲に回り込み -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, ...); }
    • 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日土曜日