フレックスアイテムの表示順序を変更するプロパティです。HTMLの記述順序を変えずに、視覚的な並び順だけを調整できます。アクセシビリティを保ちながらレスポンシブデザインに対応できます。
order: <integer>| order-1 | order: 1 |
| order-first | order: -9999 |
| order-last | order: 9999 |
一般形: order-{n}
任意値: order-[13]
.first {
order: 1;
}
.second {
order: 3;
}
.third {
order: 2;
}HTMLの順序（1,2,3）を視覚的に（1,3,2）の順序で表示
.sidebar {
order: 2;
}
.main {
order: 1;
}
@media (max-width: 768px) {
.sidebar {
order: 1;
}
.main {
order: 2;
}
}レスポンシブレイアウトでPC時とモバイル時の順序を切り替え
.feature-box:nth-child(2) {
order: -1;
}
.feature-box:nth-child(1) {
order: 1;
}
.feature-box:nth-child(3) {
order: 0;
}複数要素の順序を数値で細かく制御
.header {
order: -999;
}
.footer {
order: 999;
}
.content {
order: 0;
}ヘッダーを最初、フッターを最後に確実に配置
デフォルト値は0。負の値も使用可能で、小さい値ほど前に表示される。SEOとアクセシビリティを考慮してHTMLの順序は論理的に保つこと。レスポンシブデザインでの順序変更に非常に便利。
HTMLの論理的な順序を無視して視覚的な順序だけを重視すると、スクリーンリーダーでの読み上げ順序が不自然になる。orderは親要素がdisplay: flexまたはdisplay: gridの場合のみ有効。
AIは「表示順を変えたい」という要望にorderを気軽に使いますが、orderが変えるのは見た目だけで、スクリーンリーダーの読み上げ順やTabキーのフォーカス順はHTML順のままです。順序が本質的に違うならHTML自体を変えるのが正解で、orderはレスポンシブでの限定的な並び替えに留めるべきです。
スマホでは画像を先頭に、PCではテキストを先頭にしたい。orderを使う場合のアクセシビリティへの影響も説明して
このorderだらけのレイアウトを、HTML順の変更で解決できないか検討して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。