操作・主な内容・文脈を一緒に見たいとき、独立した領域に分けて連動させます。
植物博物館のページで来館者は展示を選び、特徴を観察します。一覧・標本・説明を往復すると比較が途切れます。解説にも独立した表示領域が必要で、単純なサイドバーだけでは足りません。
ローズマリーの葉を選ぶと中央の写真・名前と横の解説が連動します。観察の問いも開けます。狭い画面では操作・展示・説明の順に続きます。
日陰の展示室
ハーブの展示室
本文内の架空のデモです。リセット・再読み込みで初期状態に戻ります。
複数領域レイアウトはページの独立した領域を連動させます。文章を列間に流すCSS段組みとは別のページ構成です。領域が増えると注意が分かれるため、モバイルとキー操作の順序が必要です。
任意の参考資料 · 概要の読了時間には含みません
選択・作業・独立した文脈が同時に必要なときに使います。主作業と補助操作が一つずつならサイドバーが簡潔です。領域数だけで使いやすさを証明できません。
展示ごとに写真と観察の問いを結び付けます。編集画面や参考ツールにも応用できます。生成した植物写真は配置を示し、実際の収蔵品の記録ではありません。
CSS Gridは独立領域を配置し、CSS段組みは一つの内容の流れを分割します。DOMを操作→展示→説明にし、小画面でも同じ順序にします。一つの選択状態で写真と文脈を更新します。
勧告候補草案は二次元のグリッド配置を定義し、このサイトのページ分類を規定するものではありません。
確認狭い画面や拡大の検査を支えるもので、配置や書体の定義ではありません。
確認ページ領域とは別に、文章を複数の段へ分割する仕組みを定義します。
確認| 概念 | 特徴 | 利点 | 制約 | 適する状況 | 組み合わせ条件 |
|---|---|---|---|---|---|
| 複数領域レイアウト | 操作・主な内容・文脈を一緒に見たいとき、独立した領域に分けて連動させます。 | 作業の隣に参考資料を表示できます。 | 領域が増えると注意が分散するため、小画面の順序を決めます。 | 作業の隣で文脈を確認したい場合に向きます。 | 領域内には平面の操作部、小画面には1列を使います。 |
これからプロジェクトを始めますか？説明を入力して最初のプロンプトを準備しましょう。
自分に合うプロンプトを作る →すでに外部AIと会話中なら、この記事のリンクと自分のプロジェクトに合う理由、重視する利点や制約を伝えましょう。合意した要件にどう適用するか依頼してください。
この記事のリンク: 複数領域レイアウト
この選択を話し合う
コメントは全言語で共有。投稿にはGitHubログインが必要です。