CSS の order プロパティを使うと、HTML の記述順を変えずに、要素の表示される並び順だけを入れ替えられます。「メインとサイドバーの位置をスマホのときだけ逆にしたい」といった場面で役立つプロパティです。この記事では、order の基本的な使い方から、初期値や負の値の扱い、Flexbox・Grid での使いどころ、そして見落としがちなアクセシビリティ上の注意点までを、コーディング初心者から中級者の方に向けて丁寧に解説します。
目次
order プロパティで何ができるのか
order は、フレックスコンテナやグリッドコンテナの中に並ぶ子要素（アイテム）に対して、表示上の並び順を数値で指定するプロパティです。通常、要素は HTML に書いた順番どおりに並びます。しかし order を指定すると、その数値の小さい順に並び替わります。つまり HTML そのものは書き換えずに、CSS だけで見た目の順序をコントロールできるわけです。
注意したいのは、order が効くのは Flexbox（display: flex）と Grid（display: grid）のアイテムに限られるという点です。通常のブロック要素やインライン要素にいくら order を書いても、並び順は変わりません。親要素をフレックスコンテナ／グリッドコンテナにして初めて機能するプロパティだと覚えておいてください。
基本の使い方と初期値
まずは最小の例を見てみましょう。下のデモでは、4 つのボックスのうち 2 番目の要素（.featured）にだけ order: -1 を指定しています。HTML 上は 2 番目に書かれているにもかかわらず、表示上は先頭に移動します。
<div class="menu">
<div class="item">1番目（HTML上は先頭）</div>
<div class="item featured">2番目（order: -1）</div>
<div class="item">3番目</div>
<div class="item">4番目</div>
</div>
.menu {
display: flex;
gap: 8px;
}
.item {
flex: 1;
padding: 16px;
text-align: center;
background: #eef2ff;
border: 1px solid #c7d2fe;
border-radius: 6px;
}
/* order の初期値は 0。
負の値を指定すると、0 の要素より前に並ぶ */
.featured {
order: -1;
background: #fee2e2;
border-color: #fca5a5;
}
order の初期値は 0 です。何も指定していない要素はすべて order: 0 として扱われます。上の例では .featured だけが -1 なので、0 の要素たちより前に配置されました。このように 負の値も指定できるのが order の特徴で、「特定の要素を先頭に持ってきたい」というときは、他をいじらずにその要素へ負の値を与えるのが手軽です。
指定できるのは整数（<integer>）です。小数は使えません。値が大きいほど後ろに、小さいほど前に並びます。
同じ order 値のときはソース順で決まる
order を理解するうえで大切なのが、同じ order 値を持つ要素どうしは、HTML に書かれた順序（ソース順）で並ぶというルールです。ブラウザはまず order の値でグループ分けし、値の小さいグループから順に配置します。そして同じ値のグループの中では、元の記述順を保ちます。
たとえば 5 つの要素があり、3 番目だけに order: 1、それ以外は初期値の 0 だとします。すると 0 のグループ（1・2・4・5 番目）がソース順のまま先に並び、そのあとに order: 1 の 3 番目が最後尾へ回ります。値だけでなく「同値ならソース順」という点まで押さえておくと、複数の要素に order を振ったときの結果を正確に予測できます。
それぞれの値がどう作用するかを整理すると次のとおりです。
| order の値 | 並びへの影響 |
|---|---|
0（初期値） | 指定なしの要素と同じグループ。ソース順を保つ |
正の整数（例: 1, 2） | 値が大きいほど後ろへ。0 の要素より後ろに並ぶ |
負の整数（例: -1） | 値が小さいほど前へ。0 の要素より前に並ぶ |
レスポンシブで表示順を入れ替える
order が最も活躍するのは、画面幅によって要素の並びを変えたいときです。よくあるのが「PC ではメインコンテンツを左、サイドバーを右に置きたいが、スマホではサイドバーを上に持ってきたい」というパターンです。HTML の並びを条件によって書き換えることはできませんが、order ならメディアクエリの中で値を切り替えるだけで実現できます。
下のデモは、HTML では main を先に書きつつ、幅が狭いときだけ aside（サイドバー）に order: -1 を当てて先頭に移動させる例です。プレビュー枠の幅を変えると（表示環境によってはブラウザ幅で）並びが入れ替わります。
<div class="layout">
<main class="main">メインコンテンツ（HTML では先に書く）</main>
<aside class="side">サイドバー</aside>
</div>
.layout {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.main {
flex: 1 1 300px;
padding: 24px;
background: #dbeafe;
border-radius: 6px;
}
.side {
flex: 1 1 120px;
padding: 24px;
background: #fef9c3;
border-radius: 6px;
}
/* 画面が狭いときだけ、見た目上サイドバーを先頭に持ってくる。
HTML の順序（main が先）は変えずに order だけで入れ替える */
@media (max-width: 500px) {
.side { order: -1; }
}
このように、HTML では意味的に自然な順序（本文を先に書く）を保ったまま、見た目の順序だけを画面幅に応じて調整できます。SEO やアクセシビリティの観点では本文が先にあるほうが望ましいことが多いので、order はそのバランスを取るのに向いています。
Grid でも同じように使える
order は Flexbox 専用ではなく、Grid レイアウトのアイテムにも同じルールで効きます。display: grid の子要素に order を指定すると、グリッドの自動配置（オートフロー）でアイテムを置く順番が変わります。値の小さいものから先に配置され、同値ならソース順、というルールも共通です。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
/* Grid でも order は有効。
この要素だけ最後に配置される */
.grid .last {
order: 1;
}
ただし Grid の場合、アイテムを特定のマス目に固定したいなら grid-column や grid-row、grid-template-areas といった配置専用のプロパティを使うほうが直感的です。order はあくまで「自動配置の順番」を変えるものなので、明示的にセルを指定した要素とは相性が悪くなることもあります。Grid では順番を軽く入れ替えたいときに order、レイアウトそのものを組みたいときは配置系プロパティ、と使い分けると迷いにくくなります。
見た目は変わってもDOMの順序は変わらない
order を使ううえで最も重要な注意点がこれです。order が変えるのは あくまで「視覚的な並び順」だけで、HTML の構造（DOM の順序）そのものは一切変わりません。この違いが、いくつかの場面で問題を引き起こすことがあります。
キーボード操作や読み上げは元の順序のまま
Tab キーでフォーカスを移動する順序（タブ順）や、スクリーンリーダーが読み上げる順序は、order の影響を受けません。これらは order による見た目の並びではなく、HTML のソース順にもとづいて決まります。つまり、画面上では 2 番目に見えているボタンが、Tab キーでは最初にフォーカスされる、といった食い違いが起こり得ます。
見た目の順序とキーボード操作の順序がずれると、目で追う順番と操作の順番が一致せず、利用者を混乱させてしまいます。W3C の WCAG でも、見た目の並びと DOM の並びが大きく食い違うことは避けるべきとされています。order（および Flexbox の flex-direction: row-reverse など）で順序を大きく入れ替える場合は、キーボードだけで操作したときに違和感がないかを必ず確認してください。
意味的な順序が重要なら HTML 側を直す
order は「本来の順序はこうだが、この画面幅のときだけ見た目を少し入れ替えたい」といった視覚的な微調整に使うのが安全です。逆に、コンテンツの意味そのものとして順番が重要な場合（手順の 1・2・3 など）は、order で並べ替えるのではなく HTML の記述順を正しくしておくべきです。見た目のためだけに DOM 順と視覚順を大きくずらすのは、保守のしにくさとアクセシビリティ低下の両面でおすすめできません。
order が効かないときに確認すること
order を書いたのに並び順が変わらない、というときは、多くの場合いくつかの決まった原因に絞られます。
親要素が flex / grid になっていない
最も多いのがこれです。order はフレックスアイテムかグリッドアイテムにしか効きません。並べたい要素の親に display: flex か display: grid が指定されているかを確認してください。子要素側にいくら order を書いても、親がただのブロック要素のままでは何も起こりません。
order を書いた要素が直接の子ではない
order が効くのは、フレックス／グリッドコンテナの直接の子要素だけです。さらに深くネストされた孫要素に order を指定しても、その要素は別の親の中にいるため並び替わりません。並べ替えたい要素が、コンテナの直下にあるかを確認しましょう。
単位を付けている・小数を書いている
order の値は単位のない整数です。order: 1px のように単位を付けたり、order: 1.5 のように小数を書いたりすると無効な値になり、初期値の 0 として扱われます。order: 1 のように、素の整数で書いてください。
まとめ
order プロパティは、Flexbox・Grid のアイテムの表示順を数値で入れ替えるためのプロパティです。要点を振り返ると次のようになります。初期値は 0 で、値の小さい順に並び、同じ値どうしはソース順を保ちます。負の値も使え、特定の要素を先頭に出すのに便利です。効くのは display: flex または display: grid の直接の子要素に限られ、値は単位なしの整数で指定します。
そして最も大切なのは、order が変えるのは視覚的な順序だけで、DOM の順序・タブ順・読み上げ順は変わらないという点です。レスポンシブでの見た目の微調整に留め、意味的に重要な順序は HTML 側で正しく保つ——この使い分けを意識すれば、order を安全に活用できます。