CSS Regions：HTMLとCSS3でリッチなページレイアウトを実現する

作成日

2 September 2012

メモ：本記事執筆後に、CSS RegionsとCSS Exclusionsのシンタックス候補が変更されましたが、コンセプトには変更ありません。最新情報については、「CSS Regions W3C Working Draft」や「 CSS Exclusions and Shapes W3C Working Draft 」をご覧ください。

Webでは、参考資料／教材／ニュース／記事／インタラクティブアプリといった様々なコンテンツが配信されるようになりました。しかし、印刷物のデザインでは当たり前のように可能なことであっても、Web標準技術では未だに実装が不可能であったり、非常に困難なものがあります。

印刷物のコンテンツをリッチデジタルフォーマットへ変換・適応させるためのより良い方法が模索されている今、Adobeとしては、Webをもっと表現力豊かにする、より知的なレイアウトをサポートするためのよい機会だと捉えています。

Adobeはこれまでに、CSSを改善し、雑誌で見られるような複雑なレイアウトをWeb上でも表現しようと実験を行ってきました。そして、その成果をW3CのCSS Working Groupに提案するとともに、昨年、WebKitを使ってその提案内容を実装したプロトタイプを制作しました。このプロトタイプは、「CSS Regions | Web Standards | Adobe & HTML」から入手できます。

それ以来、WebKitでのCSS Regionsの実装に向けてWebKitプロジェクトに貢献し続けています。CSS Regionsは、WebKit Nightly BuildsやChromiumで利用できます。詳しくは、「Adobe & HTML」サイトのCSS Regionsページをご覧ください。なお、CSS Exclusionsの実装は進行中ですが、公開されているWebKitブラウザではまだ利用できません。

W3Cサイトには「CSS Regions Module Level 3」や「CSS Exclusions and Shapes Module Level 3」のエディター草案があります。また、これらの提案に関する議論は、W3C CSSメーリングリスト「www-style@w3.org Mail Archives」にて行われています。どうぞ、このメーリングリストにコメントをお寄せください。その際は、件名に[css3-regions]や[css3-exclusions]と入れてください。

注意事項：

CSS RegionsやCSS Exclusionsの実装は進行中であり、Adobeとしましては、今後も幅広いコミュニティと議論を行っていきます。そのため、将来的に何らかの変更が発生する可能性があります。実際、本記事執筆後に、CSS RegionsとCSS Exclusionsのシンタックス候補が変更されています。また、慣例上、WebKitのプロタイプ実装や本実装において、全ての提案段階のプロパティには「-webkit-」接頭語が付きます。なお、本記事では見やすくするために、接頭語を省略しています。

それでは、私たちが提案している新しい機能について紹介していきしょう。それらは、4つのカテゴリーに分けられます。

Content flow（コンテンツフロー）：ある領域から別の領域へと連続したコンテンツのフロー
Wrap shape（任意の形状のテキストコンテナ）：矩形以外の形状をしたテキスト領域
Exclusions（任意の形状のテキスト排他領域）：任意の形状を包み込むようにテキストを配置する
Region styling（領域のスタイリング）：領域に依存したコンテンツのスタイリング。該当する領域にコンテンツがフローされると、領域に定義されているスタイル設定がコンテンツに適用される

簡単なサンプルとともに、各機能について見ていきましょう。

Content flow（コンテンツフロー）

通常のHTMLでは、テキストを複数の領域に分けて表示させることができますが、これらの領域のテキストは互いに関連性のない状態です（図1）。そのため、複数のカラムに渡ってテキストを表示したい、あるいはもっと複雑なテキスト配置をしたい場合は、手作業でテキストが各領域に収まるように配置する必要があります。しかし、そのように配置しても、ユーザがテキストを拡大したり、制作者が定義したフォントとは異なるフォントが設定されていると、上手く表示されない可能性があります。また、この方法では、ウィンドウのリサイズや、タブレットの向きの変化（ポートレイトやランドスケープ）に適応できる可変レイアウトを実現できません。

もし、コンテンツ（テキストや図）のスレッドと、そのスレッドを一連の領域にどのようにフローさせるかを別々に定義できるとしたら、どうでしょうか？　それが、Content flowの機能です。

Content flowを使うには、まず、flow-intoプロパティを使って、コンテンツを含む領域に対してスレッド名を付けます。そうすると、このコンテンツ領域は通常のCSSレイアウトフローから解除されます。それから、flow-fromプロパティを使って、スレッドをフローさせる領域を指定します。

図1のような3カラムのContent flowを作るには、以下のようなマークアップになります。

CSS

    #source {
       flow-into: main-thread;
    }
    
    .region {
        flow-from: main-thread;
        background: #C5DFF0;
    }

HTML

    <div id="source">
        <p>Lorem ipsum dolor [...]</p>
    </div>

    <div id="region1" class="region"></div>
    <div id="region2" class="region"></div>
    <div id="region3" class="region"></div>

1つのページ内に、複数のContent flowを混在させることも可能です。

このシンプルなブロック構成を使って、複雑なレイアウトを実現することもできます。例えば図2のように、複数カラムのテキスト、幅や高さの違うカラム、複数カラムにまたがる領域など。

Wrap shape（任意の形状のテキストコンテナ）

Wrap shapeを使えば、テキストをフローさせる領域の形状を制御することができます（図3）。Wrap shapeとContent flowを組み合わせることで、面白いデザインを作ることができるでしょう。

Wrap shapeを使うには、shape-insideプロパティを定義します。

図3のような円形やハート形にテキストをフローさせるには、以下のようなマークアップになります。

CSS

.circle{
	/* shape the element as a circle */
	shape-inside: polygon(0px, 150px /* ...more points */); 
}

.heart{
	/* shape the element as a heart */
	shape-inside: polygon(150px, 32px /* ...more points */); 
}

HTML

<div class="circle"></div>
<div class="heart"></div>

仕様には定義できる形状として矩形／円形／楕円形／シンプルな多角形が用意されているほか、SVG形式による任意の形状を参照することもできます。

Exclusions（任意の形状のテキスト排他領域）

shape-outsideプロパティを使えば、テキスト排他領域の形状を定義することができます。

CSS

    .exclusion{
        /* flow text around this element */
        shape-outside: polygon(…);
    }

HTML

    <div class="exclusion circle">
        <p>Lorem ipsum dolor [...]</p>
    </div>

Region styling（領域のスタイリング）

雑誌記事では、「同一の領域にあるコンテンツに対して、異なるスタイルを適用する」というデザインをよく見かけます。これを私達は「Region styling（領域のスタイリング）」と呼んでいます。例えば、図5では、4つの領域に対してテキストがフローされています。Introductionという見出しがある最初の領域だけでテキストが紺色になっており、残りの領域ではグレーとなっています。

CSS

   p {
       color: gray:
   }

   @region-style #region_1 {
       p {
           color: #0C3D5F;
       }
   }

HTML

    <div id="article">
        <h1>Introduction</h1>
        <p>This is an example [...]</p>
    </div>
    <div id="region_1"></div>
    <div id="region_2"></div>
    <div id="region_3"></div>
    <div id="region_4"></div>

Region stylingは、WebKit Nightly Buildsにて実装されており、backgroundプロパティやcolorプロパティに対応しています。

ここまでに紹介した内容の詳細については、「Adobe & HTML」サイトのCSS Regionsページをご覧ください。CSS Regionsは、WebKit Nightly BuildsやChromiumで利用できます。

CSS Regionsとメディアクエリー

上記の機能を組み合わせれば、印刷物で見かけるような、面白くて複雑なレイアウトを実現することができるでしょう。また、これらの機能は他のWeb標準技術と併用することができます。例えば、CSSメディアクエリーと組み合わせれば、デバイスの向きの変化（ポートレイトやランドスケープ）に適応できるレイアウトを構築できます。

図6は、shape-insideプロパティとCSSメディアクエリーを組み合わせて構築したレイアウトです。デバイスの向きの変化に適応できています。

図7は、同一コンテンツでデバイスの向きの変化に適応できるようにオーサリングした例。デバイスの向きによって、カラム数を変化させています。

CSS RegionsとJavaScript

これらの機能とJavaScriptを組み合わせて、インタラクティブコンテンツを作成することもできます。図8の例では、矢印部分を指でスライドすると写真部分だけがスライドし、その写真内の山や自動車の形状に沿うようにテキストがリフローされます。

上記で紹介した3つのサンプルは、「Adobe & HTML」サイトのCSS Exclusionsページから入手できるプロトタイプに同梱されます。なお、サンプルでは、変更前の古いシンタックスが使用されている点に注意してください。これらのサンプルがWebKitで動作するようになった際には、新しいシンタックスで書き直して公開する予定です。

みなさん、ダウンロードして、自分の手で触って確かめてみてください。私たちが提案する機能を使ったクリエイティブなアイデアを楽しみにしてます。一緒により良いWebを創造していきましょう。

目次

作成日

注意事項：

Content flow（コンテンツフロー）

Wrap shape（任意の形状のテキストコンテナ）

Exclusions（任意の形状のテキスト排他領域）

Region styling（領域のスタイリング）

CSS Regionsとメディアクエリー

CSS RegionsとJavaScript