HTML5 Rocksに「Next Generation Web Layout: National Geographic Forest Giant」が掲載された。CSS Shapes、CSSトランジット、CSSトランスポート、WebGLなどの既存の技術に加えて、現在策定が進められている「CSS Regions」や「CSS Exclusions」を活用することでネイティブアプリケーションのようなデザインを実現できるというサンプルが公開された。

現在の実装および技術のままでも同様のレイアウトを実現することはできるが、JavaScriptとCSSを組み合わせたフレームワークやライブラリをいくつも併用する必要がある。Next Generation Web Layout: National Geographic Forest GiantではCSS RegionsやCSS Exclusionsを活用することで、スマートな実装のまま優れたデザインを実現している。これらデザインはそのままレスポンシブWebデザインにもつながっており、タブレットデバイスやスマートフォンでの表示もスマートに実現されている。

サンプルの表示につかわれたブラウザはChromeの開発版であるChrome Canary版。chrome://flagsで実験的機能一覧を表示させ、「experimental Webkit feature」と「CSS Shaders」の現在の実装および技術のままでも同様のレイアウトを実現することはできるが、JavaScriptとCSSを組み合わせたフレームワークやライブラリをいくつも併用する必要がある。Next Generation Web Layout: National Geographic Forest GiantではCSS RegionsやCSS Exclusionsを活用することで、スマートな実装のまま優れたデザインを実現している。これらデザインはそのままレスポンシブWebデザインにもつながっており、タブレットデバイスやスマートフォンでの表示もスマートに実現されている。

サンプル表示に使われたブラウザはChromeの開発版であるChrome Canary版。chrome://flagsで実験機能一覧を表示させ、「experimental WebKit furetures」および「CSS Shaders」を有効にしたほか、問題が発生する傾向があることから「accelerated 2D canvas」の機能は無効化することを薦めている。Next Generation Web Layout: National Geographic Forest GiantはWebコンテンツのみで雑誌や新聞のような複雑でスタイリッシュなデザインをシンプルに実現しつつ、さらに閲覧領域の広いデスクトップから表示領域の限られたスマートフォンやタブレットデバイスでの表示にも対応する方法として参考になる。

文字が回り込んでいる点に注目。CSS Exclusionsが使われている : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

フルページでの動画再生 : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

バランステキストの実装例。JavaScriptを経由させている : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

表示されるテキストはブラウザの表示幅によって変動 : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

CSS Regionsを使ったレイアウト : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

ブロッグごとに独立しており、幅が変わればそれに応じて回りこみが実施される : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

CSSトランジットの利用例。スクロール後は白黒だが : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

しばらくしてカラー表示になる : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

左中央の画像はジャイアントセコイアの全体画像(樹齢想定3,200年の巨大な木) : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

クリックするとWebGLで作成された3Dアニメーションが表示される : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

ジャイアントセコイアの巨大さを表現するために、複数の写真を組み合わせてひとつの巨大な木を表現していく : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

CSSトランジットの使用例 : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

CSSカスタムフィルタ : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

ページ全体にオーバーレイで解説を表示 : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

タブレットデバイスでコンテンツを表示させた場合 : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

CSS Exclusionsによるテキストの回り込みを確認 : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

CSSトランジットによる画像の回線 : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

CSSによるカスタムフィルタを使って画像を展開 : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

CSSトランジットの使用例 : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋

ワイプでページめくりを実現 : Next Generation web Layout: National Geographic Forest Giant - YouTube動画より抜粋