[CSS] [Web] [CSS]レイアウトの種類
はじめに
今日は主なレイアウトの種類について学びました。
レイアウト大別
グリッドレイアウト
- 文字や画像、カラムなど一定の規則に従い格子状にレイアウト
- 整然としたイメージ
- 主にfloatを使って要素を配置
フリーレイアウト
- グリッドにとらわれずに配置
- HTMLの順序にかかわらず* 可変レイアウトより固定レイアウトのほうが相性がいい
固定レイアウト(Fixed Layouts)
ページの横幅widthを固定。
古典的、一般的、意図しやすい、堅い
例：MS&ADホールディングス
東京メトロ
熊本赤十字病院
可変レイアウト(Fluid Layouts)
横幅を％で設計、ウインドウに合わせコンテンツの横幅が伸縮
最近は閲覧環境が多様なため採用多い
Fluid:流動性
リキッドレイアウト(Liquid Layout)
横幅を％で指定。最もベーシックな可変レイアウト
Liquid:液体
参考：これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方 | OXY NOTES
例：【楽天市場】Shopping is Entertainment! ： インターネット最大級の通信販売、通販オンラインショッピングコミュニティ
フレキシブルレイアウト（Flexible Layout）
要素単位を％で指定するが、最小幅と最大幅も指定してレイアウト崩れと可読性をカバー
可変グリッドレイアウト（Fluid Grid Layout)
一定のグリッドにそってカード（短冊）型のコンテンツを並べ、ウインドウ幅が変更されるたびにコンテンツを再配置。
再配置にはjQueryなどで動きをつける
現代的、動的なイメージ
参考：Fluid 960 Grid System | 16-column Grid
例：MORINAGA MILK
エラスティックレイアウト(Elastic Layout)
全ての単位をemで指定、ブラウザ幅をかえてもコンテンツ全体がズームする
現在はブラウザにズーム機能があるためあえて必要性はない
レスポンシブ・ウェブデザイン
ブラウザの横幅に応じてページのレイアウト・デザインや画像サイズを柔軟に調整できる
PC,タブレット、モバイルなど多様な環境を前提
現代的、静的なイメージ
参考：Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
夕日のまちのお菓子屋さん ルモンド｜留萌の銘菓｜デコレーションケーキ
カラムレイアウト
１カラムレイアウト
ウインドウ幅全体を使って上から下へ配置
１ページ完結の販促サイト（ランディングページ）などで採用
マルチカラムレイアウト
複数のカラム（段）に情報を整理
情報量が多いため、適切にナビを設計する必要
