display は最も基本的な CSS プロパティの1つです。これは要素がボックスをどのように生成するか、およびその子要素がどのようにレイアウトされるかを制御します。
css
{ : block; }
{ : inline; }
{ : inline-block; }
{ : none; }
{ : flex; }
{ : grid; }
display は実は2つのことを設定します：ボックスが外側でどのように動作するか (block/inline) と、内側で子要素をどのようにレイアウトするか (flow/flex/grid) です。display: flex は「このボックスはブロックレベルで、その子要素は flex アイテムである」という意味です。
.gone { display: none; } /* removed from layout — takes NO space */
.hidden { visibility: hidden; } /* invisible but STILL occupies its space */
重要な区別：display: none はレイアウトを折りたたみ (スクリーンリーダーから非表示にする)；visibility: hidden は要素があった場所にギャップを残します。本当に削除するには display: none を使用し、レイアウトを保持しながら非表示にするには visibility: hidden を使用します。
.container {
display: flex; /* lay children in a row/column (one dimension) */
gap: 1rem;
}
.grid {
display: grid; /* lay children in rows AND columns (two dimensions) */
grid-template-columns: repeat(3, 1fr);
}
モダンレイアウトはほぼ完全に flex (1D — 行または列) と grid (2D — 行と列) で構築されています。
display は要素のレイアウト動作全体を決定します。
block vs inline vs inline-block を理解することはデフォルトフローを説明し、flex/grid はモダンレイアウトの中核であり、none vs visibility の区別は頻繁にテストされ、実践的に重要な詳細です。