# order

> フレックスアイテムの表示順序を変更するプロパティです。HTMLの記述順序を変えずに、視覚的な並び順だけを調整できます。アクセシビリティを保ちながらレスポンシブデザインに対応できます。

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

## 構文

```css
order: <integer>
```

## Tailwindでは

- `order-1` → order: 1
- `order-first` → order: -9999
- `order-last` → order: 9999
- 一般形: `order-{n}`
- 任意値: `order-[13]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 29+ / Firefox 20+ / Safari 9+ / Edge 12+

## コード例

### 例1: HTMLの順序（1,2,3）を視覚的に（1,3,2）の順序で表示

```css
.first {
  order: 1;
}
.second {
  order: 3;
}
.third {
  order: 2;
}
```

### 例2: レスポンシブレイアウトでPC時とモバイル時の順序を切り替え

```css
.sidebar {
  order: 2;
}
.main {
  order: 1;
}

@media (max-width: 768px) {
  .sidebar {
    order: 1;
  }
  .main {
    order: 2;
  }
}
```

### 例3: 複数要素の順序を数値で細かく制御

```css
.feature-box:nth-child(2) {
  order: -1;
}
.feature-box:nth-child(1) {
  order: 1;
}
.feature-box:nth-child(3) {
  order: 0;
}
```

### 例4: ヘッダーを最初、フッターを最後に確実に配置

```css
.header {
  order: -999;
}
.footer {
  order: 999;
}
.content {
  order: 0;
}
```

## TIPS

デフォルト値は0。負の値も使用可能で、小さい値ほど前に表示される。SEOとアクセシビリティを考慮してHTMLの順序は論理的に保つこと。レスポンシブデザインでの順序変更に非常に便利。

## よくある間違い

HTMLの論理的な順序を無視して視覚的な順序だけを重視すると、スクリーンリーダーでの読み上げ順序が不自然になる。orderは親要素がdisplay: flexまたはdisplay: gridの場合のみ有効。

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

AIは「表示順を変えたい」という要望にorderを気軽に使いますが、orderが変えるのは見た目だけで、スクリーンリーダーの読み上げ順やTabキーのフォーカス順はHTML順のままです。順序が本質的に違うならHTML自体を変えるのが正解で、orderはレスポンシブでの限定的な並び替えに留めるべきです。

## AIへの依頼文例

- スマホでは画像を先頭に、PCではテキストを先頭にしたい。orderを使う場合のアクセシビリティへの影響も説明して
- このorderだらけのレイアウトを、HTML順の変更で解決できないか検討して

## 関連プロパティ

- [display](https://www.css-dictionary.com/property/display.md)
- [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)