order
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年9月以降、すべてのブラウザーで利用可能です。
order は CSS のプロパティで、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは order の値の昇順に配置され、さらにソースコード内の順序で配置されます。明示的に order 値が指定されていないアイテムには、既定値である 0 が代入されます。
試してみましょう
order: 0;
order: 3;
order: -1;
order: 2;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">Box 1:</div>
<div style="order: 1">Box 2: <code>order: 1;</code></div>
<div style="order: 2">Box 3: <code>order: 2;</code></div>
<div style="order: 2">Box 4: <code>order: 2;</code></div>
<div style="order: 3">Box 5: <code>order: 3;</code></div>
</section>
.default-example {
max-height: 300px;
display: flex;
flex-flow: column;
}
.default-example > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
margin: 0.5rem;
padding: 0.5rem;
flex: 1;
}
#example-element {
background-color: rgb(255 0 200 / 0.2);
border: 3px solid rebeccapurple;
}
#example-element::after {
content: attr(style);
outline: 2px dashed;
font-family: monospace;
}
上記のデモでは、左側のオプションを選択して、ピンクのボックスの order プロパティの値を変更してください。水色のボックスには、固定の order 値が指定されています。
ソースの順序による効果に注意してください。例えば、order: 2; を選択すると、ピンクのボックスは order: 2; の 2 つの青いボックスの前に配置されます。これは、ソースコードではピンクのボックスが青いボックスの前に表示されるためです。
構文
/* <integer> 値 */
order: 5;
order: -5;
/* グローバル値 */
order: inherit;
order: initial;
order: revert;
order: revert-layer;
order: unset;
order は要素の視覚上の順序にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えないので、 speech など、視覚的ではないメディアで使用してはいけません。
このプロパティはCSS 表示方法モジュールで定義されていますが、グリッドおよびフレックスアイテムにのみ影響します。その要素が親要素の display プロパティがフレックスまたはグリッドコンテナーを形成しない場合、order を設定しても、効果はありません。
値
<integer>-
アイテムが割り当てられる順序グループを表します。
アクセシビリティ
order プロパティを指定すると、コンテンツの視覚的な表示と DOM の順序が一致しなくなります。これにより、スクリーンリーダーなどの支援技術を使用して操作を行う視覚障害のあるユーザーに悪影響が及びます。視覚的な順序が DOM の順序と異なる場合、ユーザーはコンテンツへのアクセス方法によって異なる体験をしてしまいます。
公式定義
| 初期値 | 0 |
|---|---|
| 適用対象 | フレックスアイテム、グリッドアイテム、フレックスおよびグリッドコンテナーの絶対位置指定の子 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | integer |
形式文法
order =
<integer>
<integer> =
<number-token>
例
フレックスコンテナー内のアイテムの並べ替え
この例では、2 つのサイドバーを備えた伝統的なレイアウトを作成します。
HTML
ヘッダー、フッター、および本文領域が含まれます。本文には、記事と 2 つのサイドバーが含まれます。その順序に注意してください。 CSS の order プロパティを使用して、視覚的な順序を変更します。
<header>ヘッダー</header>
<main>
<article>記事</article>
<nav>ナビ</nav>
<aside>余談</aside>
</main>
<footer>フッター</footer>
CSS
メイン領域は、フレキシブルボックスレイアウトモジュールの機能を使用してスタイルを設定します。display を flex に設定すると、<main> 要素がフレックスコンテナーになります。既定では、これにより、垂直サイズが等しいフレックスアイテムが作成されます。サイドバーにはどちらも絶対的な width が指定されており、 <article> は正の余白を、 flex 一括指定で設定した flex-grow 係数に応じて消費します。
次に、フレックスコンテナーの 3 つの子要素それぞれに異なる order プロパティの値を設定します。これは、 CSS が HTML で宣言された順序ではなく、その要素の視覚的な順序を定義していることを意味します。
main {
display: flex;
text-align: center;
}
main > article {
flex: 1;
order: 2;
}
main > nav {
width: 200px;
order: 1;
}
main > aside {
width: 200px;
order: 3;
}
結果
<article> はソースの順序では最初に現れますが、視覚的には中央に表示されます。
仕様書
| 仕様書 |
|---|
| CSS Display Module Level 3 # order-property |