"CSS Regionsを使った新しいCSSレイアウトを作る方法"セッションのメモ

最初に

HTML5 CONFERENCE 2013 に行ってきて、"CSS Regionsを使った新しいCSSレイアウトを作る方法" という 轟 啓介 さんのセッションを聴いてきたのでそのメモを残しておこう。 当日のセッションは ここ（ ルーム1A - HTML5 カンファレンス 2013 - YouTube ） で観れます。
当日使われたスライドは CSS Regionsを使った新しい CSSレイアウトを作る方法 に公開されています。

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

コンテンツのまわりこみを CSS で実装する。 コンテンツとレイアウトを分離するために CSS Regions を使う。
実際のコードもコンテンツとレイアウトで分離する。（スライドの 10 ~ 14 ページ参照）

CSS Resions の基本的なプロパティ、使い方

指定したコンテンツを指定したレイアウトに流し込むように使う。

コンテンツに flow-into プロパティを指定

article {
  flow-into: myThred;
}

レイアウトに flow-from プロパティを指定

.region {
  flow-from: myThred;
}

メディアクエリと CSS Regions の相性がいい

1. コンテンツがフローするRWD
2. UIが最適化される可変レイアウト

シェイプを使った回り込み

シェイプの中に文字を回り込み

.circle-inside {
  shape-inside: polygon(0px, 150px, ..);
}

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

.circle-outside {
  shape-outside: polygon(0px, 150px, ..);
}

参考

• 領域（Regions） | Adobe & HTML
• Diving Into CSS Regions | Nettuts+
• Regions | CODEPEN
• Using CSS Shapes to Enhance Visual Storytelling | Web Platform Team Blog

メモ

新しい Editor ( Adobe が開発中 )

• Adobe Edge Code CC
• Adobe Edge Reflow CC
• brackets

Adobe Edge Code CC は Brackets をベースに開発された。

その他メモ

発表用のスライドの画像に URI を貼るのいいなぁ。参考 URI を何処にやったか忘れて、発表中に危機が迫った時に活躍してた。

最後に

まだサポートされているブラウザは少ないけど、今のうちに手を付けておきたい。