Order（order）プロパティ

最終更新：2026-09-13

order Order（order）プロパティ

order プロパティはコンテナ内のフレックスアイテムの表示順序を設定します。初期値は 0 です。値が小さいアイテムが先に表示され、値が同じアイテムは DOM 上の位置順に並びます。このプロパティが変更するのは視覚的な順序だけで、DOM 構造を変えることはありません。そのため、スクリーンリーダーの読み上げ順や Tab キーのフォーカス順にも影響します。慎重に使用してください。

カテゴリ
初期値	0
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

order: <integer>;

⚙️ 値

値	タイプ	説明
`<integer>`	タイプ	フレックスアイテムの表示順序

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
order	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
すべての主要ブラウザーでサポート

ヒント： order は負の数を含む整数値を受け付けます。すべてのアイテムは既定で 0 です。負の値はアイテムを先頭に、正の値は末尾に移動させます。

注意： order はスクリーンリーダーやキーボードフォーカスの順序を変更し、DOM の順序と一致しなくなるため、アクセシビリティに影響します。純粋に視覚的な調整にのみ使用し、論理的な意味を持つコンテンツの並べ替えは避けてください。

❓ よくある質問

Qorder は DOM の順序を変更しますか？

Aいいえ。order が変更するのは視覚的な表示だけです。DOM 構造はそのままで、JavaScript のノード走査やスクリーンリーダーの読み上げ順、Tab キーのフォーカス順は元の DOM 順のままです。効果は純粋に視覚的であり、ページのシリアライズ方式は変わらないため、検索エンジンや支援技術も DOM の順序をそのまま認識します。アイテムがリンクやフォームコントロールの場合、フォーカス順と異なる視覚的順序はユーザーを混乱させる可能性があるため、使用する前にアクセシビリティへの影響を評価してください。

Qorder はレスポンシブレイアウトでどのように役立ちますか？

Aメディアクエリと組み合わせることで、HTML を変更せずに表示順序を変更できます。たとえばモバイルではメインコンテンツを先に、サイドバーを後に移動し、デスクトップでは元の順序に戻します。典型的なルールは @media (max-width: 768px) { .sidebar { order: 1 } } のようになります。デバイスごとにコンテンツ順が変わるレイアウトに適していますが、使いすぎないでください。過度な並べ替えはコードの可読性を損ないます。

Qorder 値が同じアイテムはどのような順序で並べられますか？

Aアイテムはまず order 値の小さい順に並べ替えられ、値が同じ場合は DOM 上の記述順に配置されます。既定の order は 0 で、負の値は通常のアイテムより前に来ます。したがって order: -1 はアイテムを最前列に、order: 1 は末尾に移動させます。実際には、order は個別のアイテムに控えめに使い、多くのアイテムにまたがる並び順スキームを作るのは避けてください。そうすると理解しづらくなります。