BT

HTMLとCSS3を使ったリッチなページレイアウト

| 作者: Jonathan Allen フォローする 523 人のフォロワー , 翻訳者 徳武 聡 フォローする 0 人のフォロワー 投稿日 2012年3月26日. 推定読書時間: 1 分 |

原文(投稿日:2012/03/22)へのリンク

印刷媒体では長い間、複雑なレイアウトを実現することが主な関心事だった。雑誌や新聞には物理的な制約があるので、複数列いまたがった文章に表や画像を組み合わせるような複雑なレイアウトが発明された。しかも、このレイアウトは組版の過程で動的に変更できる必要がある。CSS Regions ModuleCSS Exclusions ModuleをW3Cに提案することで、Adobeはこのような複雑なレイアウトをウェブに持ち込もうとしている。

Arno Gourdol氏のプレスリリースによれば、この提案には4つの特徴が含まれている。

  • スレッディングコンテント: ある領域から別の領域へ流し込めるコンテンツ
  • 任意の形状のコンテナ: 矩形ではない領域へのテキストの表示
  • 任意の形状の除外領域: 任意の形状でテキストを囲める
  • 領域のスタイリング: 領域に依存して中のコンテンツをスタイリングする

複数の領域にコンテンツを流し込むには、CSSの“flow”属性を付加したdiv要素を使う。複数のdivを使う必要がある場合は、divのスタイルに“content: from(xxx);”という属性を付加する。xxxはflow属性の名前だ。こうすると各div内が満たされるようにして、コンテンツがdivに流し込まれる。

矩形ではない領域を使うには、wrap-shape属性とwrap-shape-mode属性を使う。現在、wrap-shape属性はポイントを指定することで多角形の形状を定義できる。しかし、“その他の幾何学的原型で形状を定義することも、画像のアルファ値を使って定義することもできるかもしれません。”.

除外領域はテキストを表示しない領域だ。これもwrap-shape-mode属性で実現する。ただし、“content”ではなく“around”を指定する。

WebKitのプロトタイプではまだ利用できないが、Adobeは領域のスタイリングも計画している。例えば、下記の画像では、同じコンテンツを表示している領域でも、最初の領域のフォントサイズが大きく、色も異なっている。

Note: The above image is Copyright © 2012 Adobe Systems Incorporated

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT