CSS の order
プロパティは、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは order
の値の昇順に配置され、さらにソースコード内の順序で配置されます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* <integer> 値 */
order: 5;
order: -5;
/* グローバル値 */
order: inherit;
order: initial;
order: unset;
メモ: order
は要素の視覚上の順序にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。order
を speech など、視覚的ではないメディアで使用してはいけません。
値
<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 の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Flexible Box Layout Module order の定義 |
勧告候補 | 初回定義 |
初期値 | 0 |
---|---|
適用対象 | flex items and absolutely-positioned flex container children |
継承 | なし |
計算値 | 指定値 |
アニメーションの種類 | integer |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: フレックスアイテムの並べ替え
- CSS グリッドガイド: CSS グリッドレイアウトとアクセシビリティ