CSS Regions と Edge Code & Reflow の更新

そして、この CSS Regions が、実環境でも利用できるようになりました、というのが今回のメインニュースです。先日公開された iOS 7 のブラウザでは、CSS Regions が利用可能になったとのこと。既に実機をお持ちの方はお試しあれ。

もう 1 つのニュースは、Edge Code と Reflow が、それぞれ CSS Region に対応したことです。Reflow の方は CSS Regions を使ったプロジェクトのサンプルファイルと、Reflow が生成したコード （Chrome で見てね！） も公開されています。

（あとは、基本的な使い方のサンプルが CodePen に集められています。興味があればご参考まで）

Edge Code CC の CSS Retions サポート

CSS Regions って InDesign ぽい ? と思ったならばそのとおりで、CSS Regions は、アドビの Web Platform チームが中心メンバーとして、初期段階から仕様策定やブラウザへの実装に関わっている仕様です。そのため、今回の Safari の公開には期待が高かったようで、このタイミングで 2 つのアドビ製品 （まだどちらもプレビュー版ですが） に、CSS Regions のサポートが追加されました。

その 1 つは Edge Code です。Brackets が 2 回更新されるごとに更新されるはずの Edge Code が、CSS Regions のためだけに更新されたことに力の入れ方が感じられます。

Edge Code はエディタなので、対応したのはコード保管機能です。CSS Regions 関連のコーディングをすると Edge Code が支援してくれます。

また、CSS Regions の使い方がわからなかったときのために、インラインに CSS Regions のドキュメントを表示できます （Ctrl/Cmd + K はご存知ですね？）。 ドキュメントのソースは WebPlatform.org （以前書いた説明記事はこちら） から取得されます。ので、日本語化は当面難しそうな雰囲気です。

Edge Reflow の CSS Regions サポート

Edge Reflow も　CSS Regions をサポートするためアップデートされました。こちらはデザインツールということで、Code よりは大きな変更となっています。

まだ、標準化までに変更のありそうな機能と考えられているためか、デフォルトの状態では利用できません。使うには、事前に 「View」 → 「Shiny Web Features」 と選択して、ダイアログが表示されたら 「CSS Retions」 をオンにしておきます。

基本的な使い方は以下の通りです。

1. CSS Regions 用の領域を作成
   1. ボックスツールを使って矩形を （いくつか） ステージ上に配置
   2. （複数の） 矩形を選択して、右クリック
   3. コンテキストメニューから 「Create Region Container」 を選択
   4. さらに領域を追加したければ、変換された領域の接続を示す 「＋」 アイコンのどれかをクリック、カーソル形状が変化したらステージ上の追加したい位置でクリック
2. 領域内に流し込むコンテンツの編集
   1. 上の手順で変換された領域 （のどれか） をダブルクリック
   2. 表示された領域内に、ボックス、テキスト、あるいは画像を配置
   3. 領域外をダブルクリックして通常のデザインモードに戻る
3. 領域の配置の調整と表示確認
   1. 領域の位置や大きさを適当に調整
   2. コンテンツが領域内に収まらない場合、フローの最後の領域の 「+」 アイコンが赤くなるのでクリックして領域を追加 （これはオプション）
   3. Tab キーを押してプレビューモードに移行、表示を確認
   4. 再度 Tab キーを押して編集モードに移行

F12 を押して、Chrome でのプレビュー表示による確認も可能です。Reflow はまだ実装の初期段階という話もありますが、とりあえずご紹介しておきます。