メインコンテンツまでスキップ

表示順序の制御

order プロパティは、フレックスアイテムの表示順序をHTMLの順序を変更することなく制御できるプロパティです。

order の値​

order プロパティは整数値（正の数、負の数、0）を取ります。

基本的な使用方法​

CSS
.item-a { order: 0; }  /* デフォルト */
.item-b { order: 1; }  /* 後に表示 */
.item-c { order: -1; } /* 前に表示 */
.item-d { order: 2; }  /* 最後に表示 */
A (order: 0)
B (order: 1)
C (order: -1)
D (order: 2)

並び替えのルール​

  1. order の値が小さいものから順に表示
  2. 同じ order 値の場合は HTML の順序を維持
  3. デフォルト値は 0

実用例​

レスポンシブナビゲーション​

モバイルではメニューボタンを右端に、デスクトップでは左端に配置する場合

CSS
.navbar {
  display: flex;
  align-items: center;
}

.logo {
  order: 1;
}

.menu-button {
  order: 2;
  margin-left: auto;
}

.nav-menu {
  order: 3;
  display: none;
}

@media (min-width: 768px) {
  .logo {
    order: 2;
  }
  
  .menu-button {
    order: 1;
    margin-left: 0;
  }
  
  .nav-menu {
    order: 3;
    display: flex;
    margin-left: auto;
  }
}

モバイル表示:

MyLogo

デスクトップ表示:

サイドバーレイアウト​

モバイルではサイドバーを下に、デスクトップでは左に配置する場合

CSS
.layout {
  display: flex;
  flex-direction: column;
}

.main-content {
  order: 1;
}

.sidebar {
  order: 2;
}

@media (min-width: 768px) {
  .layout {
    flex-direction: row;
  }
  
  .main-content {
    order: 2;
    flex: 1;
  }
  
  .sidebar {
    order: 1;
    flex: 0 0 200px;
  }
}

モバイル表示（縦）

メインコンテンツ
サイドバー

デスクトップ表示（横）

サイドバー
メインコンテンツ

カードの優先順位​

重要な情報を最初に表示し、補足情報を後に配置する場合：

CSS
.card-container {
  display: flex;
  flex-direction: column;
}

.card-title {
  order: 1;
}

.card-price {
  order: 2;
}

.card-description {
  order: 3;
}

.card-features {
  order: 4;
}

/* 特別オファーの場合は価格を最初に表示 */
.special-offer .card-price {
  order: 0; /* タイトルよりも前に表示 */
  color: #e74c3c;
  font-size: 1.5em;
}

通常の表示

スタンダードプラン

¥1,000/月

基本的な機能を含むプランです。

  • 機能A
  • 機能B

スペシャルオファー表示

特価！¥500/月

スペシャルプラン

期間限定の特別価格です。

  • 機能A
  • 機能B
  • 特別機能C

アクセシビリティへの配慮​

重要な注意点​

order プロパティは視覚的な順序のみを変更し、以下には影響しません。

  1. スクリーンリーダーの読み上げ順序（HTML順序を維持）
  2. 音声ブラウザの認識順序（HTML順序を維持）
  3. キーボードのTab順序（HTML順序を維持）

特にTabキーでの移動は多くのユーザーにとって混乱を招く可能性があるため、order プロパティを使用する際は注意が必要です。

試してみよう​

以下のインタラクティブなデモで、各アイテムの order を変更して動作を確認してみてください：

各アイテムのorderを設定:

HTML順序

A
B
C
D

視覚的順序 (order適用後)

A
B
C
D