Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY.

Webページのデザインにおいて、フローレイアウトは大きなディスプレイから小さいディスプレイまで、単一のコンテンツで表示に対応できるという利点がある。うまく組まれていればさらに小さいスマートフォンやPDAの画面でも正しく表示されるだろう。しかし、適切にコーディングされていれば、という条件付きだ。実装に誤りがあれば逆にレイアウトが崩れる原因になる。

ではどういった機能を組み合わせてフローレイアウトを実現すればいいかだが、Kayla Knight氏がSmashing Magazineに掲載したAdaptive CSS-Layouts: New Era In Fluid Layouts?が興味深い。アダプティブCSSレイアウトを紹介しており、うまく機能するフローレイアウトを実施するための手法が説明されている。記事で紹介されているフローレイアウト手法は次のとおり。

1. グリッドを使ったフローレイアウト (グリッド設計したものを割合に置き換えてフローレイアウトを実現する。簡単でわかりやすい方法。マージンの幅をどうするかにはそれぞれに利点と欠点がある)
2. アダプティブコンテンツ (画面の解像度をベースに複数のレイアウトをCSSで用意し、ブラウザの幅に合わせて利用するCSSを選ぶようにする)
3. 画像をフローレイアウトに適用させる (固定サイズの画像はフローレイアウトにおいてはもっとも厄介な要素のひとつ。サーバサイドでレイアウトに合わせて自動的にサイズを変更した画像を送信するようにWebアプリケーションをかませる - A List Apart: Articles: Automatic Magazine Layoutなど)
4. jQuery Masonryを活用する (ボックスがいくつもあるレイアウトでは、ボックス間の空白がずれて汚くみえることがあるという問題がある。jQuery Masonryを使えばこの問題を解消できる)
5. Smart Columns w/ CSS & jQueryを活用する (ブラウザの幅を変更することでボックスのみならず各種要素のサイズを自動的に変更するスクリプト)
6. Text Zoomingを活用する (ブラウザの幅を変更することでテキストサイズを自動的に変更するスクリプト)

Adaptive CSS-Layouts: New Era In Fluid Layouts?は基本的なフローレイアウトをベースに、そこから発生する問題をそれぞれ解決するアプローチをとることで、フローレイアウトの適用できる対象をシームレスに広げるというアプローチをとっている。