要素の表示方法を指定するプロパティです。ブロック要素、インライン要素、フレックスコンテナ、グリッド、noneなど、様々な表示形式を設定できます。インライン・インラインブロックの違いも重要です。
display: block | inline | inline-block | flex | grid | none | table | ...| block | display: block |
| inline-block | display: inline-block |
| inline | display: inline |
| hidden | display: none |
flex / grid は display-flex・display-grid の項を参照。「hidden」がdisplay: noneに当たる点に注意（visibility: hiddenではない）。
.element {
display: block;
}display: flex;要素をフレックスコンテナにして、子要素を柔軟にレイアウト
display: grid;要素をグリッドコンテナにして、2次元レイアウトを実現
display: none;要素を完全に非表示にする（領域も確保されない）
display: inline;インライン要素として表示。幅・高さ・margin/paddingの上下が効かない。
display: inline-block;インライン要素のように並ぶが、幅・高さ・margin/paddingの上下も指定できる。
flexとgridはモダンレイアウトの基本。display: noneとvisibility: hiddenの違い、inline/inline-blockの違いも覚えておこう。
display: noneを使うと要素が完全に消えるため、アニメーションが効かない。inlineは上下margin/paddingやwidth/heightが効かない。inline-blockは横並び時の隙間に注意。
AIはflexとgridの選択理由を説明せずにどちらかを使いがちです（目安: 1方向の並び=flex、行と列の2次元=grid）。またdisplay: noneはスクリーンリーダーからも完全に消える点を省略しがちで、視覚的にだけ隠したい場合の代替（sr-onlyパターン等）を確認する必要があります。
このUIのレイアウトはflexとgridのどちらが適切か、理由付きで提案して実装して
display: noneで隠している要素のアクセシビリティへの影響を確認し、必要なら代替手段を提案して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。