2012年12月27日木曜日

CSS Regions

http://html.adobe.com/jp/webstandards/cssregions/
http://adobe.github.com/web-platform/samples/css-regions/

CSS Regions

雑誌のようなレイアウトをシンプルなCSSで表現

Illustration showing how CSS regions can be used to flow content from one region to another in a magazine-like layout.

印刷用のコンテンツをデザインする際に当然のように使われている洗練されたテクニックを、Web標準に沿って実現するのは非常に難しい作業です。印刷出版の世界では、印刷向けコンテンツを同じように洗練された表現力を持つデジタルフォーマットに変換する方法を模索していることから、CSS Regionsの導入には大きな価値があります。CSS Regionsは、シンプルなCSSで雑誌のようなレイアウトを表現することができます。

An example of CSS regions showing a pie chart with explanatory text flowed into the regions which match the shape of each slice of the pie.
An example of CSS regions showing a magazine-like layout for an automotive article. The text flows across three columns and the top of the columns have an irregular shape.

体験する

(更新) GitHubからコードとサンプルをダウンロード →

CSS Regionsの想定される使用方法の1つは、複数のページに分割されたコンテンツを画面上に表示するケースです。「ページ分割」とは、コンテンツを複数のページに分けて表示し、矢印キー、ボタン、スワイプといった操作で閲覧させる方法です。ページ分割表示を実現する1つの方法として、1ページごとにCSS Regionを作成し、 各リージョンをつないでテキストを流し込むやり方があります。CSSだけを使ってこれを実現する方法を示したCSSページ分割テンプレート(非公式ドラフト)を制作しました。このテンプレートについての詳細(こちら)と、JavaScriptのプロトタイプ(こちら)を利用して学習することができます。

詳細を学ぶ

0 件のコメント:

コメントを投稿