レイアウトの種類
固定レイアウト（Fixed Layouts）
- コンテンツを特定の横幅で固定したレイアウト
- 横幅は pxベースで設計されます
- 現在では大型化したディスプレイに対してコンテンツの横幅が窮屈に感じられたり、古くさい印象を与えてしまう危険性があります
可変レイアウト（Fluid Layouts）
- ウィンドウ横幅が変わってもそれに合わせてコンテンツの横幅が伸縮するように「%」で横幅を設計したレイアウト
- リキッドレイアウト、フレキシブルレイアウトが代表例
- またコンテンツの横幅が伸縮するのではなく、ウィンドウ幅に応じて再配置される可変グリッドレイアウトも可変レイアウトの一種です
- 現在では閲覧環境の多様化により可変レイアウトが採用されるケースが多くなっています
リキッドレイアウト（Liquid Layout）
- 横幅を%で指定する最もベーシックな可変レイアウト
- 多段組にした場合には、すべてのカラムを%とする場合と、一部のカラムだけ%にする場合があります
フレキシブルレイアウト（Flexible Layout）
- min-width・max-widthを使って伸縮する際の最小値・最大値を設定することで、リキッドレイアウトのデメリットである極端に狭い・広い画面での可読性を良くした改良版のリキッドレイアウトです
可変グリッドレイアウト（Fluid Grid Layout）
- 一定のグリッドにそってカード（短冊）型のコンテンツを並べ、ウィンドウ幅が変更されるたびにコンテンツを再配置するタイプのレイアウト
- コンテンツが再配置される際には、jQueryなどのライブラリを使って動きをつける視覚効果を持たせるケースが多く見られます
複合的なレイアウト
エラスティックレイアウト（Elastic Layout）
- リキッドレイアウトと固定レイアウトの両方の特徴をあわせ持つレイアウト
- すべての要素の単位を「em」で指定します
- emは文字サイズを基準とした相対単位であるため、ユーザーの閲覧環境で文字サイズを変更された場合でも、全体の比率を保ったままコンテンツがズームします
- 現在では、ブラウザ自体にズーム機能が備わっているため、あえてエラスティックレイアウトにする必要はありません
レスポンシブ・ウェブデザイン（Responsive Web Design）
- ブラウザの横幅サイズなどに応じてページのレイアウト・デザインや画像サイズを柔軟に調整できるレイアウト
- CSS3のメディアクエリでレイアウトを制御します
カラムレイアウト
１カラムレイアウト
- ウィンドウ幅全体を使って上から下へ情報を配置していくレイアウト
- 基本的に上から下へ時系列に沿って情報を配置するため、閲覧者の注意をコンテンツに集中させる効果が高くなります
- １ページ完結型の販促サイト（ランディングページ）などで採用される場合が多い
マルチカラムレイアウト
- 複数のカラム（段）に情報を整理して配置するレイアウト
- マルチカラムレイアウトが採用されるサイトは一般的に情報量もページ数も多いものであるため、膨大なコンテンツの中からユーザーが欲しい情報を迷わず閲覧できるよう、適切にナビゲーションを設計することが求められます
グリッドレイアウトとフリーレイアウト
グリッドレイアウト
- 文字や画像、カラムなどの要素を一定の規則に従って格子状にレイアウトする手法
- 整然と情報を並べることができるため、多くの企業サイト、ECサイト、情報系のサイトなどで採用されています
- 主に「float」を使って要素を配置します
フリーレイアウト
- グリッドに囚われずに要素を配置していくレイアウトの手法
- HTMLでの順序に関係なく自由に画面上に要素が配置されることが多いため、一般的には「position」を使って要素を配置します
- 可変レイアウトより固定レイアウトのほうが相性がよい
