Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

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

Dev

最初に

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, ..);
}

参考

メモ

新しい Editor ( Adobe が開発中 )

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

その他メモ

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

最後に

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