[CSS]6つの代表的なCSSレイアウト方法の長所と短所を学んで使いこなす
Post on:2011年6月21日
sponsors
スタイルシートで実装する6つの代表的なCSSレイアウト方法、それぞれ実例を見ながら、その長所と短所を紹介します。
Pros And Cons Of 6 CSS Layout Patterns: Part 1
Pros And Cons Of 6 CSS Layout Patterns: Part 2
[ad#ad-2]
下記は各ポイントを意訳したものです。
- Fixed-Widthレイアウト
- Fluid/Liquidレイアウト
- Elasticレイアウト
- Hybridレイアウト
- Responsiveレイアウト
- Fluid/Elastic Gridsレイアウト
Fixed-Widthレイアウト
Firxed-Widthは、幅の全体を絶対値（px）で指定するスタティックなレイアウトです。このレイアウトを使用する場合には、ユーザーのために最適な幅を調査し、設定する必要があります。
典型的な例では大きい解像度を考慮し、デザインを真ん中に配置し両側に空白スペースを用います。今日、最もよく見かける普通のレイアウトといってもよいでしょう。
- 長所
-
- エレメントの配置において最もコントロールしやすいです。
- ブラウザのサイズが変更されてもレイアウトには影響はありません。
- 開発においても最もシンプルで最も早くでき、コストも少ないです。
- ピクセル単位で予めデザインすることが可能です。
- 正確な大きさが常に維持されます。
- 短所
-
- ブラウザウインドウのスペースは利用しません。
- ウェブの柔軟であるという特性を利用しません。
- 平均的なビジターのために設計することはできますが、すべてのビジターに理想的ではありません。
- ユーザーから若干の自由を奪います。
- 低い解像度の場合、水平スクロールバーがでることがあります。
Fluid/Liquidレイアウト
Fluid/Liquidは、幅の全体をブラウザのウインドウに対して相対値（%）で指定する流動的なレイアウトです。デザインの幅はブラウザの幅を変更することで、調整が可能です。
- 長所
-
- ビジターは、サイズを自由に変更できます。
- ユーザーが自由にサイズを変更してもレイアウトに問題はありません。
- 水平スクロールバーは現れません。
- 短所
-
- デザインエレメントの配置のコントロールは難しいものもあります。
- 見た目はそれほど予測可能ではありません。
- 開発には手間がかかります。
- エレメント間のホワイトスペースなどコントロールするのが難しいです。
- min-width, max-widthなどは若干のブラウザでサポートしません。
Elasticレイアウト
Elasticは、レイアウトを内部のデザインエレメント（主にフォントサイズ（em））で設定する柔軟なもので、Fluidレイアウトに似ています。エレメントはたいていの場合、メインコピーに使用するフォントサイズなどの内部に相対的になります。
- 長所
-
- FluidとFixedの両方の長所を備えます。
- Fluidよりコントロールしやすいです。
- サイズは内部のデザインエレメントに基づきます。
- 短所
-
- 開発時には複雑になるにつれ、数学が必要になります。
- 画像や動画などはそのサイズが最適化されないかもしれません。
- レイアウトは常に内部の影響を受けるため、維持するのが困難です。
Hybridレイアウト
Hybridは、「Fixed」と「Fluid」と「Elastic」をミックスさせるレイアウトで、下記のサイトではエレメントの配置はStatic、背景はFluidになっています。
Liquid Backgrounds with Fixed Content
- 長所
-
- Fixedレイアウトの長所である配置のコントロールができ、制作が楽です。
- ブラウザウインドウのサイズに関係なく、Fluidの長所である見た目を与えます。
- 短所
-
- すべての要素がFluidということではありません（背景のみなど）。
- Fixedの短所、柔軟性やユーザビリティなどはそのままです。
[ad#ad-2]
Responsiveレイアウト
Responsiveは、デスクトップやスマートフォンなどユーザーごとに異なるデバイスやブラウザ、解像度に合わせて最適なレイアウトを提供します。異なる環境を検出するのは主に、CSS3のMedia QueriesやJavaScriptを使用します。
- 長所
-
- さまざまな環境においてコントロールが可能です。
- キーとなるポイントをデザインします。
- 特定の環境用のスタイルシートを用意できます。
- 短所
-
- Mesia Queries（JavaScriptでも）で想定した数のスタイルシートを必要とします。
- 場合によっては画像もそれぞれ用に用意する必要があります。
- 異なる環境ごとにレイアウトを用意するのは多くの開発が必要になります。
Fluid/Elastic Gridsレイアウト
通常グリッドはスタティックなpx単位ですが、Fluid/Elastic Gridsは%などを使用したエラスティックなグリッドを利用したレイアウトです。
- 長所
-
- デザインエレメントをコントロールしやすいです。
- メンテナンスも簡単です。
- デザインはエラスティックなグリッド自身に常に相対的です。
- 短所
-
- 開発には時間がかかります。
- 数学的な要素が多くあります。
- デザインはグリッドと共に相対的です。
sponsors
