# display

> 要素の表示方法を指定するプロパティです。ブロック要素、インライン要素、フレックスコンテナ、グリッド、noneなど、様々な表示形式を設定できます。インライン・インラインブロックの違いも重要です。

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/display/

## 構文

```css
display: block | inline | inline-block | flex | grid | none | table | ...
```

## Tailwindでは

- `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ではない）。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 要素をフレックスコンテナにして、子要素を柔軟にレイアウト

```css
display: flex;
```

### 例2: 要素をグリッドコンテナにして、2次元レイアウトを実現

```css
display: grid;
```

### 例3: 要素を完全に非表示にする（領域も確保されない）

```css
display: none;
```

### 例4: インライン要素として表示。幅・高さ・margin/paddingの上下が効かない。

```css
display: inline;
```

### 例5: インライン要素のように並ぶが、幅・高さ・margin/paddingの上下も指定できる。

```css
display: inline-block;
```

## TIPS

flexとgridはモダンレイアウトの基本。display: noneとvisibility: hiddenの違い、inline/inline-blockの違いも覚えておこう。

## よくある間違い

display: noneを使うと要素が完全に消えるため、アニメーションが効かない。inlineは上下margin/paddingやwidth/heightが効かない。inline-blockは横並び時の隙間に注意。

## AIがよく間違えるポイント

AIはflexとgridの選択理由を説明せずにどちらかを使いがちです（目安: 1方向の並び=flex、行と列の2次元=grid）。またdisplay: noneはスクリーンリーダーからも完全に消える点を省略しがちで、視覚的にだけ隠したい場合の代替（sr-onlyパターン等）を確認する必要があります。

## AIへの依頼文例

- このUIのレイアウトはflexとgridのどちらが適切か、理由付きで提案して実装して
- display: noneで隠している要素のアクセシビリティへの影響を確認し、必要なら代替手段を提案して

## 関連プロパティ

- [flex-direction](https://www.css-dictionary.com/property/flex-direction.md)
- [justify-content](https://www.css-dictionary.com/property/justify-content.md)
- [align-items](https://www.css-dictionary.com/property/align-items.md)
- [grid-template-columns](https://www.css-dictionary.com/property/grid-template-columns.md)