流動レイアウト

流動レイアウトとは、Webページのデザインの一種で、ウィンドウのサイズが変わるとページのレイアウトもサイズ変更されるものです。これは、固定されたピクセル幅ではなく、パーセンテージを使ってページの各領域を定義することで実現します。

ほとんどのWebページのレイアウトは、1列、2列、または3列で構成されています。ほとんどのユーザーが同じような画面サイズを使っていたWebデザインの初期には、Web開発者は列に固定幅を割り当てていました。たとえば、固定レイアウトには、幅960pxのメインコンテンツ領域と、幅がそれぞれ180px、600px、180pxの3列を含めることができます。このレイアウトは1024x768の画面では見栄えがよくても、1920x1080の画面では小さく見え、800x600の画面には収まりません。

流動レイアウトは、レイアウトの各領域をパーセンテージで定義することでこの問題を解決します。たとえば、960pxのコンテンツ領域を作成する代わりに、Web開発者は画面の80%を埋めるレイアウトを作成し、3列にそれぞれ18%、64%、18%を割り当てることができます。パーセンテージを使うことで、ユーザーのコンピューターのウィンドウに合わせてコンテンツを拡大または縮小できます。固定レイアウトと流動レイアウトを作成するために使うCSSを以下に示します。

例に示したCSSクラスは、それぞれページのHTML内のdivに割り当てることができます。この場合、.left、.right、.middleクラスは.contentクラスの中に含めます。contentクラスをtableに割り当て、他のクラスをセルに割り当てることもできます。固定幅の.contentクラスでは、囲まれたdivまたはセルの幅に自動的に広がるため、幅を定義する必要はありません。

流動レイアウトとレスポンシブデザインの違い

「流動レイアウト」と「レスポンシブWebデザイン」という用語は同じ意味で使われることがありますが、この2つは異なるものです。レスポンシブWebデザインを使って作成されたページにはCSSメディアクエリが含まれており、ウィンドウの幅や、ページへのアクセスに使われているデバイスの種類に応じて異なるスタイルを読み込みます。レスポンシブWebデザインには、基本的な流動レイアウトよりも多くのCSS場合によっては(JavaScriptも）が必要ですが、ページのレイアウトをより細かく制御できます。