order

レイアウト・配置

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

構文

Syntax

order: <integer>

コード例

例 1

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

実行結果

HTMLの順序（1,2,3）→ 視覚的順序（1,3,2）

HTML順序：1番目、2番目、3番目

1番目 (order: 1)

2番目 (order: 3)

3番目 (order: 2)

表示順序：1番目、3番目、2番目

💡 HTMLは論理的順序、CSSで視覚的順序を調整

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

例 2

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

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

実行結果

レスポンシブ順序変更 - PC vs モバイル

PC表示（画面幅大）

メインコンテンツ

サイドバー

モバイル表示（画面幅小）

サイドバー

メインコンテンツ

💡 メディアクエリと組み合わせて画面サイズごとに順序を変更

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

例 3

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

実行結果

負の値を使った優先順位 - order: -1, 0, 1

通常 (order: 0)

最優先 (order: -1)

後回し (order: 1)

💡 負の値は最前面、0がデフォルト、正の値は後ろに配置

複数要素の順序を数値で細かく制御

例 4

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

実行結果

実用例 - ヘッダー・コンテンツ・フッター

ヘッダー (order: -999)

メインコンテンツ (order: 0)

フッター (order: 999)

💡 極端な値でヘッダー・フッターの位置を確実に固定

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

💡 TIPS

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

⚠️ よくある間違い

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

ブラウザサポート

IE11+, 全モダンブラウザ

order

構文

コード例

例 1

例 2

例 3

例 4

💡 TIPS

⚠️ よくある間違い

関連プロパティ

ブラウザサポート