複数領域レイアウト
操作・主な内容・文脈を一緒に見たいとき、独立した領域に分けて連動させます。
記事を読むページ構成
主な内容と補助領域を配置します。本文が流れるCSS段組みとは区別します。
検索範囲: ページ構成
3 記事
| 概念 | 特徴 | 利点 | 制約 | 適する状況 | 組み合わせ条件 |
|---|---|---|---|---|---|
| 複数領域レイアウト | 操作・主な内容・文脈を一緒に見たいとき、独立した領域に分けて連動させます。 | 作業の隣に参考資料を表示できます。 | 領域が増えると注意が分散するため、小画面の順序を決めます。 | 作業の隣で文脈を確認したい場合に向きます。 | 領域内には平面の操作部、小画面には1列を使います。 |
| 単一カラムレイアウト | 次に読む順序を明確にしたい内容を、一つの縦の流れに置きます。 | ひとつの流れが次の読む順序を示します。 | 長いページはスクロールが必要なので、一行の長さを抑えます。 | 順に読む内容に向きます。 | 最小限の装飾と抑えた行長を組み合わせます。 |
| サイドバーレイアウト | 主領域の隣に細い補助領域を配置 | 条件と結果を一緒に確認 | 読み幅が不足する前に縦へ切り替える | 内容の隣にナビゲーションや条件を保つ | 主領域内にリストやグリッドを配置可能 |