1. エビスコムの著者NOTE

CSS補足解説: Regions(リージョン/領域)

Regions(リージョン/領域)はAdobeが提案している新しいレイアウト機能の1つです。flow-intoプロパティで指定したコンテンツを、flow-fromで指定したボックス(リージョン)に順番に流し込んでレイアウトすることができます。

IE10とChrome、Chrome for Androidが先行実装していますが、IE10では流し込むコンテンツを<iframe>で指定する必要があります。Chromeでは<div>などでマークアップしたコンテンツを流し込むことが可能です。

#content
   {-ms-flow-into: mydata;
   -webkit-flow-into: mydata;}

#box1, #box2, #box3
   {-ms-flow-from: mydata;
   -webkit-flow-from: mydata;}

空のボックス(リージョン)

ボックス(リージョン)にコンテンツを流し込んだときの表示

※Chrome 22で表示を確認するためには、chrome://flags で「CSS領域」を有効にする必要があります。この設定は試験機能として用意されたものですので、警告を確認した上で利用してください。

[掲載モジュール: CSS Regions Module Level 3 (Editor’s Draft)
[Adobe & HTML: CSS Regions