order

CSS の order プロパティは、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは order の値の昇順に配置され、さらにソースコード内の順序で配置されます。

構文

/* <integer> 値 */
order: 5;
order: -5; 

/* グローバル値 */
order: inherit;
order: initial;
order: unset;

値

<integer>

アイテムが割り当てられる順序グループを表します。

形式文法

<integer>

例

基本的な HTML 一式:

<header>...</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>...</footer>

以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。 Flexible Box Layout Module では、垂直方向のサイズが同じで水平方向のスペースを可能な限り多く使用するブロックを、自動的に作成します。

main { display: flex;  text-align:center; }
main > article { flex:1;        order: 2; }
main > nav     { width: 200px;  order: 1; }
main > aside   { width: 200px;  order: 3; }

結果

アクセシビリティの考慮事項

order プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。

• Flexbox & the keyboard navigation disconnect — Tink
• Source Order Matters | Adrian Roselli
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0

仕様書

ブラウザーの互換性

関連情報

• CSS フレックスボックスガイド: フレックスボックスの基本概念
• CSS フレックスボックスガイド: フレックスアイテムの並べ替え
• CSS グリッドガイド: CSS グリッドレイアウトとアクセシビリティ