このページの中だけを絞ります。ページは移りません。
レイアウトの混同されやすい語
レイアウトで境界が曖昧になりやすい語の対。全 134 組・44 語。
| この語 | と混同されやすい語 | 違い |
|---|---|---|
| 12-Column Grid（12カラムグリッド） | Column（カラム） | カラムは分割の単位 |
| CSS Grid | CSS Grid は実装技術 | |
| 16カラム | より細かい分割。約数は1,2,4,8,16 | |
| 8-Point Grid（8ポイントグリッド） | Spacing Scale（余白スケール） | 余白スケールは段の一覧。8ポイントは生成規則の1つ |
| Vertical Rhythm（垂直リズム） | 垂直リズムは行送り基準 | |
| Baseline Grid（ベースライングリッド） | ベースライングリッドは行位置の格子 | |
| Above the Fold（ファーストビュー） | Hero（ヒーロー） | ヒーローは上部に置く大きな領域という部品名 |
| LCP（Largest Contentful Paint） | LCP は初期表示の速度指標 | |
| Focal Point（焦点） | 焦点は視線が最初に落ちる点 | |
| Adaptive Design（アダプティブデザイン） | Responsive Web Design（レスポンシブWebデザイン） | レスポンシブは連続的に変化 |
| 動的配信 | サーバー側で端末を判定し別 HTML を返す方式 | |
| Progressive Enhancement（プログレッシブエンハンスメント） | 段階的な機能追加の考え方 | |
| Aspect Ratio（アスペクト比） | Proportion（比率） | 比率は一般語。アスペクト比は幅と高さに限定 |
| 解像度 | 画素数。比率とは別 | |
object-fit | 指定した枠に画像をどう収めるかの方法 | |
| Asymmetric Layout（非対称レイアウト） | Asymmetry（非対称） | 非対称は原則としての概念 |
| Hierarchical Grid（階層グリッド） | 階層グリッドは不均等な格子 | |
| 崩れたレイアウト | 意図のない偏り | |
| Baseline Grid（ベースライングリッド） | Vertical Rhythm（垂直リズム） | 垂直リズムは格子が生む状態 |
| 8-Point Grid（8ポイントグリッド） | 8ポイントは寸法の刻み。行送り基準ではない | |
| Grid（グリッド） | 一般にグリッドは縦の分割を指す | |
| Bento Grid（ベントーグリッド） | Modular Grid（モジュラーグリッド） | モジュラーは等分割の升目 |
| Masonry（メーソンリー） | メーソンリーは高さがばらばらで隙間ができる | |
| Card Layout（カードレイアウト） | カードは等サイズで並べる構成 | |
| Breakpoint（ブレークポイント） | Media Query（メディアクエリ） | メディアクエリは実装する構文 |
| Container Query（コンテナクエリ） | コンテナクエリは親要素の幅で判定する | |
| Fluid Layout（可変レイアウト） | 可変レイアウトは境界なしで連続的に変化 | |
| Card Layout（カードレイアウト） | Card（カード） | カードは部品名 |
| Bento Grid（ベントーグリッド） | Bento は大きさに差をつける | |
| リスト | 1行1項目の一覧。境界を持たない | |
| clamp()（クランプ関数） | min() / max() | 2値の比較。範囲は作れない |
| Max-width（最大幅） | 上限だけを与える | |
| Breakpoint（ブレークポイント） | 段階的に切り替える | |
| Column（カラム） | Gutter（ガター） | ガターはカラムどうしの間の空き |
| Measure（行長） | 行長は読みやすさの指標。カラム幅が行長を決める | |
| CSS Multi-column | column-count による段組み。グリッドのカラムとは別 | |
| Container Query（コンテナクエリ） | Media Query（メディアクエリ） | 画面全体の条件 |
| Container（コンテナ） | 版面という設計概念 | |
| Container（コンテナ） | Max-width（最大幅） | 最大幅はコンテナを実装するプロパティ |
| Container Query（コンテナクエリ） | コンテナクエリは親の幅に応じて子を変える仕組み | |
| Full Bleed（断ち落とし） | 断ち落としはコンテナを越えて全幅にする手法 | |
| CSS Grid | Grid（グリッド） | グリッドは設計上の基準体系 |
| Flexbox | フレックスは1方向 | |
| Subgrid（サブグリッド） | 親の格子を子が継承する仕組み | |
| dvh / svh / lvh（動的ビューポート単位） | 単位 | 基準 |
vh | 多くの環境で lvh 相当 | |
lvh | アドレスバーが隠れた大きい高さ | |
svh | アドレスバーが表示された小さい高さ | |
dvh | 現在の状態に追従 | |
| Fluid Layout（可変レイアウト） | 固定幅レイアウト | px で幅を固定する方式 |
| Adaptive Design（アダプティブデザイン） | アダプティブは離散的に切り替える | |
| Responsive Web Design（レスポンシブWebデザイン） | レスポンシブは可変を含む上位の手法 | |
| Full Bleed（断ち落とし） | Container（コンテナ） | コンテナは版面。断ち落としはそれを越える手法 |
| 全画面表示 | ブラウザのフルスクリーン機能 | |
100vw | ビューポート幅。スクロールバーを含むため溢れることがある | |
| Gap（ギャップ） | Margin（マージン） | マージンは子が自分で持つ余白。相殺が起きる |
| Gutter（ガター） | ガターは列の間という設計上の概念 | |
| Padding（パディング） | パディングは要素の内側 | |
| Grid（グリッド） | CSS Grid | CSS Grid は実装技術の名前 |
| Alignment（整列） | 整列はグリッドに揃える行為 | |
| Baseline Grid（ベースライングリッド） | ベースライングリッドは縦方向の格子 | |
| Gutter（ガター） | Gap（ギャップ） | ギャップは CSS のプロパティ名かつ一般的な空き |
| Margin（マージン） | マージンは要素の外側の余白 | |
| 綴じ代 | 印刷で製本のために確保する余白 | |
| Hero（ヒーロー） | Above the Fold（ファーストビュー） | ファーストビューは初期表示領域という概念 |
| バナー | 広告や告知の帯 | |
| Full Bleed（断ち落とし） | 断ち落としは画面端まで広げる手法 | |
| Hierarchical Grid（階層グリッド） | Modular Grid（モジュラーグリッド） | モジュラーは等分割の升目 |
| Asymmetric Layout（非対称レイアウト） | 非対称レイアウトは結果としての構図 | |
| グリッドなし | 基準がない状態。階層グリッドには基準がある | |
| Layout（レイアウト） | Grid（グリッド） | グリッドはレイアウトを作るための基準体系 |
| Information Architecture（情報設計） | 情報設計はサイト全体の構造。レイアウトは1画面の配置 | |
| Wireframe（ワイヤーフレーム） | ワイヤーフレームはレイアウトを検討するための図 | |
| Macro / Micro Whitespace（マクロ余白・ミクロ余白） | Whitespace（余白） | 余白は上位概念 |
| Proximity（近接） | 近接は余白の差でグループを作る原則 | |
| Spacing Scale（余白スケール） | スケールは値の候補集 | |
| Manuscript Grid（単一カラムグリッド） | Column（カラム） | 多段グリッドは複数の列を持つ |
| Container（コンテナ） | コンテナは版面を実装する要素 | |
| Measure（行長） | 行長は読みやすさの指標 | |
| Margin（マージン） | Padding（パディング） | パディングは境界の内側 |
| Gap（ギャップ） | ギャップは親が子の間に作る空き。相殺しない | |
| Whitespace（余白） | 余白は設計上の概念 | |
| Masonry（メーソンリー） | Bento Grid（ベントーグリッド） | Bento は格子に沿って隙間なく埋める |
| Card Layout（カードレイアウト） | カードは高さを揃える | |
| CSS Multi-column | column-count による段組み。読み順が縦になる | |
| Max-width（最大幅） | width | 固定値を与える。狭い環境で溢れる |
| Container（コンテナ） | コンテナは版面という設計概念 | |
| clamp()（クランプ関数） | clamp は下限・推奨・上限を1つで書く | |
max-inline-size | 論理プロパティ版。書字方向に依存しない | |
| Media Query（メディアクエリ） | Container Query（コンテナクエリ） | 親要素の幅を基準にする |
| Breakpoint（ブレークポイント） | ブレークポイントは切り替える値 | |
@supports | 機能への対応を判定する | |
| Mobile First（モバイルファースト） | Responsive Web Design（レスポンシブWebデザイン） | レスポンシブは手法、モバイルファーストは順序 |
| モバイル専用 | モバイル向けに別サイトを作る方式 | |
| Progressive Enhancement（プログレッシブエンハンスメント） | 対象が機能。モバイルファーストは画面幅 | |
| Modular Grid（モジュラーグリッド） | Column（カラム） | カラムグリッドは縦の分割のみ |
| Bento Grid（ベントーグリッド） | Bento は升目の大きさを不均等にする近年のデザインスタイル | |
| Baseline Grid（ベースライングリッド） | ベースライングリッドは行の位置を揃える細かい格子 | |
| Negative Space（ネガティブスペース） | Whitespace（余白） | 余白は空いている領域全般。ネガティブスペースはその空きを形として扱う視点 |
| Figure-Ground（図と地） | 図と地は知覚の法則。ネガティブスペースはそれを利用した造形手法 | |
| Counter（カウンター） | カウンターは文字の内側にできる空間という書体用語 | |
| Optical Spacing（光学的余白） | Optical Alignment（光学的整列） | 光学的整列は位置の補正 |
| Spacing Scale（余白スケール） | スケールは値の候補集 | |
| Icon Grid（アイコングリッド） | アイコングリッドは字形側で余白を揃える仕組み | |
| Padding（パディング） | Margin（マージン） | マージンは境界の外側 |
| Gap（ギャップ） | ギャップは子要素どうしの間 | |
| Target Size（ターゲットサイズ） | ターゲットサイズは操作領域の基準値 | |
| Responsive Web Design（レスポンシブWebデザイン） | Adaptive Design（アダプティブデザイン） | アダプティブは複数の固定レイアウトを切り替える |
| モバイル対応 | 曖昧な語。手法を特定しない | |
| Mobile First（モバイルファースト） | モバイルファーストは設計の順序 | |
| Safe Area（セーフエリア） | Viewport（ビューポート） | ビューポートは表示領域全体。セーフエリアはその内側 |
| Target Size（ターゲットサイズ） | ターゲットサイズは操作領域の大きさ | |
| Spacing Scale（余白スケール） | 8-Point Grid（8ポイントグリッド） | 8ポイントは刻みを8の倍数に固定する方式 |
| Modular Scale（モジュラースケール） | モジュラースケールは等比で生成する方式 | |
| Design Token（デザイントークン） | トークンは値に名前を付ける仕組み | |
| Split Screen（分割レイアウト） | Asymmetric Layout（非対称レイアウト） | 非対称は釣り合いの取り方全般 |
| Column（カラム） | 多段カラムは文章を流し込む段 | |
| Full Bleed（断ち落とし） | 断ち落としは要素を画面端まで広げる手法 | |
| Sticky（スティッキー） | position: fixed | 常にビューポート基準で固定。流れから外れる |
position: absolute | 親要素基準で配置。流れから外れる | |
| Above the Fold（ファーストビュー） | 初期表示領域という概念 | |
| Subgrid（サブグリッド） | 入れ子のグリッド | 子が独立したグリッドを持つ |
align-items: stretch | 高さを揃えるだけ | |
| Baseline Grid（ベースライングリッド） | 行の位置を揃える設計概念 | |
| Viewport（ビューポート） | 画面解像度 | デバイスの物理的な画素数 |
| DPR（デバイスピクセル比） | 物理画素と CSS px の比 | |
| Container Query（コンテナクエリ） | コンテナクエリは親要素の幅を基準にする | |
| Whitespace（余白） | Negative Space（ネガティブスペース） | ネガティブスペースは地の側を形として造形する考え方 |
| Proximity（近接） | 近接は余白の「差」でグループを作る原則 | |
| Margin（マージン） | マージンは CSS の外側の余白という実装上の語 | |
| Padding（パディング） | パディングは要素の内側の余白 | |
| z-index（重ね順） | Figure-Ground（図と地） | 図と地は知覚上の前後 |
| DOM 順序 | z-index 未指定なら後の要素が上になる | |
isolation | 新しいスタッキングコンテキストを明示的に作る |