MENU
  1. ホーム
  2. CSS
  3. 【CSS】orderプロパティの使い方と順番：優先順位や一括指定

【CSS】orderプロパティの使い方と順番：優先順位や一括指定

CSS
css-order

CSSのorderプロパティは、HTMLの構造を変更することなく、FlexboxやGridレイアウト内で要素の「視覚的な表示順」を入れ替えることができる機能です。

本記事では、レスポンシブ対応で活躍する基本的な使い方、特定の要素を先頭・末尾にする実践テクニック、効かない時の原因やアクセシビリティの注意点まで解説します。

また、CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のCSSページをご確認ください。

CSS | Code Stock
目次

orderプロパティとは：Flexbox・Gridでの並び替え

例えば、Webサイトをレスポンシブ対応させる際、「スマホ表示の時だけサイドバーにあるバナーをメインコンテンツの上に持っていきたい」といった要望が発生します。

そんな時に活躍するのが、HTMLの記述を変更せずにCSSだけで見た目の順番を入れ替えるorderプロパティです。

orderはFlexboxやGridレイアウトと組み合わせて使うプロパティであり、JavaScriptを使わずに柔軟なレイアウト変更が可能になります。

ここでは、実務で必須となる「orderプロパティの使い方」や要素の順番の計算ルール、効かない原因まで解説します。

FlexboxとGridの使い方を詳しく知りたい人は以下から一読ください。

orderプロパティとは：Flexbox・Gridでの並び替え
  • FlexboxやGridで要素の順番を入れ替える
  • 逆順や一番最後にする指定方法
  • orderが効かない！原因と解決策

FlexboxやGridで要素の順番を入れ替える

要素の順番を変更する基本ルールはシンプルです。

orderプロパティの初期値は「0」であり、数値が小さいものから順に並びます。

マイナスの数値（例：-1）も指定可能です。

この機能は、親要素がdisplay: flex;またはdisplay: grid;である場合の「直下の子要素」に対してのみ有効に働きます。

特定のdivだけを先頭に持ってくる場合はorder: -1;、後ろに持っていく場合はorder: 1;といった形で指定します。

ただし、論理的な意味を持つコンテンツ（見出しや文章の順序）の並び替えにorderを使用しません。

orderは、「スマホ表示時の広告バナーの配置変更」や「装飾的な画像の並び替え」など、「視覚的なレイアウト変更のみ」に用途を限定するのがアクセシビリティを守るルールです。

⭕️ orderプロパティは初期値が「0」。小さい数値ほど前に出る！

Box 1（通常）
Box 2（一番最後に移動）
Box 3（一番最初に移動）
/* 💡 親要素は必ずFlexboxかGridにする（css order flex） */
.flex-container {
  display: flex;
  gap: 15px;
}

/* ⭕️ -1を指定して一番先頭に持ってくる */
.box-3 {
  order: -1; /* 💡 初期値0より小さいので先頭に出る */
  background-color: #dc3545;
}

/* 💡 1を指定して一番最後に持っていく */
.box-2 {
  order: 1; /* 💡 初期値0より大きいので後ろに下がる */
  background-color: #0d6efd;
}
HTMLコード表示
<div class="order-tech-wrapper">
  
  <p class="order-caption">⭕️ orderプロパティは初期値が「0」。小さい数値ほど前に出る！</p>

  <div class="order-demo-area">
    
    <div class="order-flex-container">
      <div class="order-item is-box-1">Box 1（通常）</div>
      <div class="order-item is-box-2">Box 2（一番最後に移動）</div>
      <div class="order-item is-box-3">Box 3（一番最初に移動）</div>
    </div>

  </div>

  <div class="order-code">
    /* 💡 親要素は必ずFlexboxかGridにする（css order flex） */<br>
    <span class="hl-blue">.flex-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-green">gap: 15px;</span><br>
    }<br><br>

    /* ⭕️ -1を指定して一番先頭に持ってくる */<br>
    <span class="hl-blue">.box-3</span> {<br>
      <span class="hl-red">order: -1;</span> /* 💡 初期値0より小さいので先頭に出る */<br>
      <span class="hl-green">background-color: #dc3545;</span><br>
    }<br><br>

    /* 💡 1を指定して一番最後に持っていく */<br>
    <span class="hl-blue">.box-2</span> {<br>
      <span class="hl-red">order: 1;</span> /* 💡 初期値0より大きいので後ろに下がる */<br>
      <span class="hl-green">background-color: #0d6efd;</span><br>
    }
  </div>

</div>
CSSコード表示
.order-tech-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.order-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.order-demo-area {
  background-color: #e9ecef;
  padding: 30px;
  border-radius: 4px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

/* 💡 Flexboxコンテナ */
.order-flex-container {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.order-item {
  padding: 20px;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  text-align: center;
  flex: 1;
}

/* 💡 Box 1: 指定なし（初期値 0） */
.is-box-1 {
  background-color: #6c757d;
  /* order: 0; と同義 */
}

/* 💡 Box 2: 最後に移動（css flex order last） */
.is-box-2 {
  background-color: #0d6efd;
  order: 1; /* 他が0と-1なので一番後ろになる */
}

/* 💡 Box 3: 最初に移動 */
.is-box-3 {
  background-color: #dc3545;
  order: -1; /* マイナスなので一番前になる */
}

/* コードブロック装飾 */
.order-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }

逆順や一番最後にする指定方法

要素を完全に逆順に配置したいケースや特定の要素だけを一番最後に配置したいケースもよくあります。

逆順にしたい場合は子要素のorderを触るのではなく、親要素に対してflex-direction: row-reverse;（またはcolumn-reverse;）を指定するのがスタンダードです。

また、特定の要素を「一番最後」にしたい場合、他の要素が追加されることを考慮してorder: 1;ではなくorder: 999;のような極端に大きな数値を指定するのが実務でレイアウト崩れを防ぐライフハックです。

⭕️ 全体逆順は「親」の flex-direction で制御。最後尾は「999」が安全

親要素で全体を逆順（row-reverse）

Item 1
Item 2
Item 3

必ず最後尾に配置（order: 999）

絶対に最後尾のボタン
通常コンテンツ A
通常コンテンツ B
/* ⭕️ 要素全体の逆順は order を使わず、親の並び方向を逆にする */
.reverse-container {
  display: flex;
  flex-direction: row-reverse; /* 💡 左から右の並びを、右から左に逆転 */
  gap: 15px;
}

/* 💡 動的に要素が増えても絶対に「最後尾」を維持する指定 */
.item-always-last {
  order: 999; /* 💡 極端に大きな値を入れるのが実務のライフハック */
  background-color: #198754;
}
HTMLコード表示
<div class="order-tech-wrapper">
  
  <p class="order-caption">⭕️ 全体逆順は「親」の flex-direction で制御。最後尾は「999」が安全</p>

  <div class="order-demo-area" style="display: flex; flex-direction: column; gap: 30px;">
    
    <div class="order-box-wrapper">
      <p class="order-label">親要素で全体を逆順（row-reverse）</p>
      <div class="order-reverse-container">
        <div class="order-item" style="background-color: #6c757d;">Item 1</div>
        <div class="order-item" style="background-color: #6c757d;">Item 2</div>
        <div class="order-item" style="background-color: #6c757d;">Item 3</div>
      </div>
    </div>

    <div class="order-box-wrapper">
      <p class="order-label">必ず最後尾に配置（order: 999）</p>
      <div class="order-flex-container">
        <div class="order-item is-last-item">絶対に最後尾のボタン</div>
        <div class="order-item" style="background-color: #6c757d;">通常コンテンツ A</div>
        <div class="order-item" style="background-color: #6c757d;">通常コンテンツ B</div>
      </div>
    </div>

  </div>

  <div class="order-code">
    /* ⭕️ 要素全体の逆順は order を使わず、親の並び方向を逆にする */<br>
    <span class="hl-blue">.reverse-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">flex-direction: row-reverse;</span> /* 💡 左から右の並びを、右から左に逆転 */<br>
      <span class="hl-green">gap: 15px;</span><br>
    }<br><br>

    /* 💡 動的に要素が増えても絶対に「最後尾」を維持する指定 */<br>
    <span class="hl-blue">.item-always-last</span> {<br>
      <span class="hl-red">order: 999;</span> /* 💡 極端に大きな値を入れるのが実務のライフハック */<br>
      <span class="hl-green">background-color: #198754;</span><br>
    }
  </div>

</div>
CSSコード表示
.order-box-wrapper {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ced4da;
}

.order-label {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

/* ⭕️ 全体を逆順にする */
.order-reverse-container {
  display: flex;
  flex-direction: row-reverse; /* これで順番がひっくり返る */
  gap: 15px;
}

/* ⭕️ order: 999 で絶対に最後にする */
.is-last-item {
  background-color: #198754;
  order: 999; /* 他の要素が0や1でも、必ず一番最後になる */
}

orderが効かない！原因と解決策

「order: -1;を書いたのに順番が変わらない」と悩む初心者は後を絶ちません。

「orderが効かない」と思ったら、「その要素の直接の親」がdisplay: flex;またはdisplay: grid;になっているか確認してください。

また、「孫要素」の順番は入れ替えられません。

orderの恩恵を受けられるのは、Flexコンテナの「直下の子要素」だけであるという階層構造のルールを意識しましょう。

⭕️ 鉄則：order は「親が Flex か Grid」でなければ絶対に効かない

❌ 親が display: block;（効かない）

Item A
Item B（order: -1）
Item C

⭕️ 親が display: flex;（効く）

Item A
Item B（order: -1）
Item C
/* ❌ 親要素の display が block（デフォルト）のままだと無視される */
.block-container {
  display: block;
}
.item-b {
  order: -1; /* 💡 無視されるため、順番はそのまま */
}

/* ⭕️ 親要素を display: flex; にする（縦並びなら column にする） */
.flex-column-container {
  display: flex; /* 💡 これが必須！ */
  flex-direction: column; /* 💡 縦並びを維持する */
  gap: 10px;
}
.item-b-correct {
  order: -1; /* 💡 ちゃんと一番上に移動する！ */
}
HTMLコード表示
<div class="order-tech-wrapper">
  
  <p class="order-caption">⭕️ 鉄則：order は「親が Flex か Grid」でなければ絶対に効かない</p>

  <div class="order-demo-area" style="display: flex; gap: 30px;">
    
    <div class="order-box-wrapper" style="flex: 1;">
      <p class="order-label">❌ 親が display: block;（効かない）</p>
      
      <div class="order-block-container">
        <div class="order-item" style="background-color: #6c757d; margin-bottom:10px;">Item A</div>
        <div class="order-item is-wrong-order" style="margin-bottom:10px;">Item B（order: -1）</div>
        <div class="order-item" style="background-color: #6c757d;">Item C</div>
      </div>
    </div>

    <div class="order-box-wrapper" style="flex: 1;">
      <p class="order-label" style="color:#0d6efd;">⭕️ 親が display: flex;（効く）</p>
      
      <div class="order-flex-col-container">
        <div class="order-item" style="background-color: #6c757d;">Item A</div>
        <div class="order-item is-correct-order">Item B（order: -1）</div>
        <div class="order-item" style="background-color: #6c757d;">Item C</div>
      </div>
    </div>

  </div>

  <div class="order-code">
    /* ❌ 親要素の display が block（デフォルト）のままだと無視される */<br>
    <span class="hl-blue">.block-container</span> {<br>
      <span class="hl-green">display: block;</span><br>
    }<br>
    <span class="hl-blue">.item-b</span> {<br>
      <span class="hl-red">order: -1;</span> /* 💡 無視されるため、順番はそのまま */<br>
    }<br><br>

    /* ⭕️ 親要素を display: flex; にする（縦並びなら column にする） */<br>
    <span class="hl-blue">.flex-column-container</span> {<br>
      <span class="hl-red">display: flex;</span> /* 💡 これが必須！ */<br>
      <span class="hl-green">flex-direction: column;</span> /* 💡 縦並びを維持する */<br>
      <span class="hl-green">gap: 10px;</span><br>
    }<br>
    <span class="hl-blue">.item-b-correct</span> {<br>
      <span class="hl-red">order: -1;</span> /* 💡 ちゃんと一番上に移動する！ */<br>
    }
  </div>

</div>
CSSコード表示
/* ❌ 失敗：親がブロック要素 */
.order-block-container {
  display: block; /* デフォルト状態 */
}

.is-wrong-order {
  background-color: #dc3545;
  order: -1; /* 親がflexではないので効かない */
}

/* ⭕️ 成功：親がFlex要素で縦並び */
.order-flex-col-container {
  display: flex; /* これが必須 */
  flex-direction: column; /* 縦並びにする */
  gap: 10px;
}

.is-correct-order {
  background-color: #0d6efd;
  order: -1; /* 正しく一番上に移動する */
}

CSSの優先順位と読み込み順序のルール

Webサイトのコーディングをしていると、「指定したはずのCSSが効かない」「文字色が変わらない」というパニックに直面します。

この原因の99%は、CSSの根幹である「カスケードの順序」や「優先順位」の理解不足によるものです。

ブラウザは複数のスタイルが衝突した際、「どのスタイルを最終的に適用するか」を厳格な計算式に基づいて決定しています。

ここでは、実務で必須となる「詳細度」の仕組みからファイルの読み込み順、最新仕様である@layerを使った順序コントロールまで解説します。

CSSの優先順位と読み込み順序のルール
  • 詳細度と適用される優先順位
  • ファイルの読み込み順やメディアクエリの記述順
  • @layerを使ったレイヤー順序コントロール

詳細度と適用される優先順位

CSSが競合した際に、ブラウザが最初に判定するのが「詳細度」です。

これは「どれだけ具体的に要素を指し示しているか」という点数のことで、以下の順番で強さが決まります。

  1. !important （最強・最優先）
  2. インラインスタイル （<div style="...">）
  3. IDセレクタ （#headerなど）
  4. クラス・属性・疑似クラス （.btn,[type="text"],:hoverなど）
  5. 要素・疑似要素 （div,p,::beforeなど）
  6. ユニバーサルセレクタ （*：点数0）

CSS設計におけるルールは、「詳細度を可能な限り低く、均一に保つこと」です。

スタイリングには「ID」を使わず「クラス（Class）」のみを使用し、!importantは「どうしても必要なユーティリティクラス（.u-hidden { display: none !important; }など）」以外では原則使用禁止とするのがモダンなWeb開発のスタンダードです。

⭕️ IDはクラスより強い！詳細度の計算を意識する

このテキストは何色になるでしょうか？
結果：赤色（IDの勝利）になります。
/* ❌ 初心者が悩みやすいパターン：後から書いたのに効かない */

/* 💡 詳細度：[ID=1, Class=0, Tag=0] */
#target-id {
  color: #dc3545; /* 💡 赤色 */
}

/* 💡 詳細度：[ID=0, Class=1, Tag=0] */
/* クラスはIDより詳細度が低いため、後から書いても上書きできません！ */
.target-class {
  color: #0d6efd; /* 💡 青色（無視される） */
}

/* ⭕️ CSSのスタイリングは「クラス」だけで行う */
.base-text {
  color: #333;
}
.error-text {
  color: #dc3545; /* 💡 クラス同士なら、後から書いたものが勝つ！ */
}
HTMLコード表示
<div class="cascade-tech-wrapper">
  
  <p class="cascade-caption">⭕️ IDはクラスより強い！詳細度の計算を意識する</p>

  <div class="cascade-demo-area" style="flex-direction: column; gap: 20px;">
    
    <div id="target-id" class="target-class">
      このテキストは何色になるでしょうか？
    </div>

    <div class="cascade-result-box">
      結果：<span style="color: #dc3545; font-weight: bold;">赤色（IDの勝利）</span>になります。
    </div>

  </div>

  <div class="cascade-code">
    /* ❌ 初心者が悩みやすいパターン：後から書いたのに効かない */<br>
    <br>
    <span class="hl-comment">/* 💡 詳細度：[ID=1, Class=0, Tag=0] */</span><br>
    <span class="hl-blue">#target-id</span> {<br>
      <span class="hl-green">color: #dc3545;</span> /* 💡 赤色 */<br>
    }<br><br>

    <span class="hl-comment">/* 💡 詳細度：[ID=0, Class=1, Tag=0] */</span><br>
    <span class="hl-comment">/* クラスはIDより詳細度が低いため、後から書いても上書きできません！ */</span><br>
    <span class="hl-blue">.target-class</span> {<br>
      <span class="hl-green">color: #0d6efd;</span> /* 💡 青色（無視される） */<br>
    }<br><br>

    /* ⭕️ CSSのスタイリングは「クラス」だけで行う */<br>
    <span class="hl-blue">.base-text</span> {<br>
      <span class="hl-green">color: #333;</span><br>
    }<br>
    <span class="hl-blue">.error-text</span> {<br>
      <span class="hl-green">color: #dc3545;</span> /* 💡 クラス同士なら、後から書いたものが勝つ！ */<br>
    }
  </div>

</div>
CSSコード表示
.cascade-tech-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.cascade-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.cascade-demo-area {
  display: flex;
  align-items: center;
  background-color: #e9ecef;
  padding: 30px;
  border-radius: 4px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

#target-id.target-class {
  /* デモ用強制上書き防止のため、あえてここにインラインっぽく記述 */
  padding: 15px;
  background-color: #fff;
  border: 2px solid #dc3545;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
  color: #dc3545; /* IDが勝っている状態の再現 */
}

.cascade-result-box {
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
  border: 1px solid #ced4da;
}

/* コードブロック装飾 */
.cascade-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

CSSの優先順位について詳しく知りたい人は「CSSの優先順位はどう決まる？どこに書くかと外部CSSの読み込み＆インラインの記述」を一読ください。

CSSの優先順位はどう決まる？どこに書くかと外部CSSの読み込み＆インラインの記述

ファイルの読み込み順やメディアクエリの記述順

「詳細度」が同じだった場合、ブラウザはどうやって優先順位を決めるのでしょうか？

答えは「あとから書いたものが勝つ」です。

これが「ファイルの読み込み順」やブラウザの描画順序、メディアクエリの記述順の基本ルールとなります。

ファイル読み込みは、「外部ライブラリ（リセットCSSやBootstrapなど）」を先に読み込み、「自作のCSSファイル」を最後に読み込みます。（自作CSSで上書きできるようにするため。）

メディアクエリは、min-widthで書くなら「数値の小さい順（スマホ → タブレット → PC）」に記述します。

max-widthで書くなら「数値の大きい順（PC → タブレット → スマホ）」に記述します。

⭕️ 同じ詳細度なら「下に書いたもの」が勝つ。メディアクエリは順序が命！

この箱の色は？
（青と赤のクラスを両方持っています）
結果：青色（後に書かれた方の勝利）になります。
※HTMLのクラス属性に書いた順番 `div class=”red blue”` は関係ありません。CSSファイルの中で「下に書かれた方」が勝ちます。
/* 💡 同じ詳細度なら「後出しジャンケン」 */
.box-red {
  background-color: #dc3545;
}
.box-blue {
  background-color: #0d6efd; /* 💡 下に書かれているのでこっちが勝つ！ */
}

/* ⭕️ モバイルファースト（min-width）の正しい記述順 */
/* 1. ベース（スマホ用）を一番上に書く */
.container {
  padding: 10px;
}

/* 2. タブレット用（768px以上）を次に書く */
@media (min-width: 768px) {
  .container {
    padding: 20px;
  }
}

/* 3. PC用（1024px以上）を最後に書く */
@media (min-width: 1024px) {
  .container {
    padding: 40px; /* 💡 画面が1024px以上の時、これが最強になる */
  }
}
HTMLコード表示
<div class="cascade-tech-wrapper">
  
  <p class="cascade-caption">⭕️ 同じ詳細度なら「下に書いたもの」が勝つ。メディアクエリは順序が命！</p>

  <div class="cascade-demo-area" style="flex-direction: column; gap: 20px;">
    
    <div class="cascade-box is-blue">
      この箱の色は？<br>
      <small>（青と赤のクラスを両方持っています）</small>
    </div>

    <div class="cascade-result-box">
      結果：<span style="color: #0d6efd; font-weight: bold;">青色（後に書かれた方の勝利）</span>になります。<br>
      ※HTMLのクラス属性に書いた順番 `div class="red blue"` は関係ありません。CSSファイルの中で「下に書かれた方」が勝ちます。
    </div>

  </div>

  <div class="cascade-code">
    /* 💡 同じ詳細度なら「後出しジャンケン」 */<br>
    <span class="hl-blue">.box-red</span> {<br>
      <span class="hl-green">background-color: #dc3545;</span><br>
    }<br>
    <span class="hl-blue">.box-blue</span> {<br>
      <span class="hl-green">background-color: #0d6efd;</span> /* 💡 下に書かれているのでこっちが勝つ！ */<br>
    }<br><br>

    /* ⭕️ モバイルファースト（min-width）の正しい記述順 */<br>
    <span class="hl-comment">/* 1. ベース（スマホ用）を一番上に書く */</span><br>
    <span class="hl-blue">.container</span> {<br>
      <span class="hl-green">padding: 10px;</span><br>
    }<br><br>

    <span class="hl-comment">/* 2. タブレット用（768px以上）を次に書く */</span><br>
    <span class="hl-blue">@media (min-width: 768px)</span> {<br>
      <span class="hl-blue">.container</span> {<br>
        <span class="hl-green">padding: 20px;</span><br>
      }<br>
    }<br><br>

    <span class="hl-comment">/* 3. PC用（1024px以上）を最後に書く */</span><br>
    <span class="hl-blue">@media (min-width: 1024px)</span> {<br>
      <span class="hl-blue">.container</span> {<br>
        <span class="hl-green">padding: 40px;</span> /* 💡 画面が1024px以上の時、これが最強になる */<br>
      }<br>
    }
  </div>

</div>
CSSコード表示
.cascade-box {
  width: 100%;
  max-width: 300px;
  padding: 20px;
  color: white;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}

/* デモ用：実際は青が適用されることを表現 */
.cascade-box.is-blue {
  background-color: #0d6efd;
}

min-widthやmax-widthの使い方を詳しく知りたい人は「【html&css】min-widthとmax-widthの使い方【レスポンシブ対応】」を一読ください。

【html&css】min-widthとmax-widthの使い方【レスポンシブ対応】

@layerを使ったレイヤー順序コントロール

これまでCSSの優先順位は「詳細度」と「読み込み順」という2つのルールに縛られていました。

しかし、近年すべてのモダンブラウザでサポートされたカスケードレイヤー（@layer） という機能があります。

@layerの画期的な点は、「どれだけ詳細度が高いセレクタ（IDなど）であっても、優先度の高いレイヤーに書かれたスタイルが絶対に勝つ」という点です。

外部のUIライブラリ（BootstrapやTailwindなど）を導入する際、それらが持つ高い詳細度に苦しめられてきた問題は@layerで解決します。

実務では、CSSの最初の行で@layer reset, vendor, base, components, utilities;のようにレイヤーの優先順位を宣言し、外部ライブラリをvendorレイヤーに押し込めることで、自作のcomponentsレイヤーのクラス（詳細度が低くても）で上書きできるよう制御します。

⭕️ @layer を使えば、IDの暴力（高い詳細度）を低い詳細度で安全に上書きできる

結果：緑色（componentsレイヤーの勝利）になります。
ID（#demo-btn）を持つ vendor レイヤーよりも、優先順位の高い components レイヤーの単なるクラス（.demo-btn）が勝利します！
/* ⭕️ ファイルの一番上でレイヤーの「優先順位」を宣言する */
/* 左から読み込まれ、右に行くほど優先度が強くなる */
@layer vendor, components;

/* 💡 外部ライブラリ（vendorレイヤー）のスタイル */
@layer vendor {
  /* 詳細度が非常に高い IDセレクタ */
  #demo-btn {
    background-color: #dc3545; /* 赤色 */
  }
}

/* ⭕️ 自作コンポーネント（componentsレイヤー）のスタイル */
@layer components {
  /* 詳細度が低い クラスセレクタ */
  .demo-btn {
    background-color: #198754; /* 緑色 */
    /* 💡 vendorよりcomponentsの方がレイヤー優先順位が高いため、 */
    /* 詳細度を無視してこちらの緑色が勝利する！！ */
  }
}
HTMLコード表示
<div class="cascade-tech-wrapper">
  
  <p class="cascade-caption">⭕️ @layer を使えば、IDの暴力（高い詳細度）を低い詳細度で安全に上書きできる</p>

  <div class="cascade-demo-area" style="flex-direction: column; gap: 20px;">
    
    <button id="demo-btn" class="demo-btn">
      このボタンの色は？
    </button>

    <div class="cascade-result-box">
      結果：<span style="color: #198754; font-weight: bold;">緑色（componentsレイヤーの勝利）</span>になります。<br>
      ID（#demo-btn）を持つ vendor レイヤーよりも、優先順位の高い components レイヤーの単なるクラス（.demo-btn）が勝利します！
    </div>

  </div>

  <div class="cascade-code">
    /* ⭕️ ファイルの一番上でレイヤーの「優先順位」を宣言する */<br>
    <span class="hl-comment">/* 左から読み込まれ、右に行くほど優先度が強くなる */</span><br>
    <span class="hl-blue">@layer vendor, components;</span><br><br>

    /* 💡 外部ライブラリ（vendorレイヤー）のスタイル */<br>
    <span class="hl-blue">@layer vendor</span> {<br>
      <span class="hl-comment">/* 詳細度が非常に高い IDセレクタ */</span><br>
      <span class="hl-blue">#demo-btn</span> {<br>
        <span class="hl-green">background-color: #dc3545;</span> /* 赤色 */<br>
      }<br>
    }<br><br>

    /* ⭕️ 自作コンポーネント（componentsレイヤー）のスタイル */<br>
    <span class="hl-blue">@layer components</span> {<br>
      <span class="hl-comment">/* 詳細度が低い クラスセレクタ */</span><br>
      <span class="hl-blue">.demo-btn</span> {<br>
        <span class="hl-green">background-color: #198754;</span> /* 緑色 */<br>
        <span class="hl-comment">/* 💡 vendorよりcomponentsの方がレイヤー優先順位が高いため、 */<br>
        /* 詳細度を無視してこちらの緑色が勝利する！！ */</span><br>
      }<br>
    }
  </div>

</div>
CSSコード表示
/* =========================================
   UIの装飾用ベーススタイル
   ========================================= */
.cascade-tech-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.cascade-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.cascade-demo-area {
  display: flex;
  align-items: center;
  background-color: #e9ecef;
  padding: 30px;
  border-radius: 4px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.cascade-result-box {
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid #ced4da;
}

/* コードブロック装飾 */
.cascade-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }


/* =========================================
   ⭕️ ここからが @layer の実用コードです
   ========================================= */

/* 1. レイヤーの優先順位を定義（右に書くほど強い） */
@layer vendor, components;

/* ベースとなるボタンスタイル（レイヤー無所属） */
.demo-btn {
  color: white;
  font-weight: bold;
  padding: 15px 30px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 2. 外部ライブラリを想定した vendor レイヤー */
@layer vendor {
  /* 詳細度が非常に高い IDセレクタ（1-0-0） */
  #demo-btn {
    background-color: #dc3545; /* 赤色 */
  }
}

/* 3. 自作CSSを想定した components レイヤー */
@layer components {
  /* 詳細度が低い クラスセレクタ（0-1-0） */
  /* IDより詳細度が低いですが、レイヤー順位が上なのでこちらの緑色が勝ちます！ */
  .demo-btn {
    background-color: #198754; /* 緑色 */
  }
}

迷わない！CSSショートハンド（一括指定）の記述順序

CSSを書く際、コードの量を減らしてスッキリ見せるために欠かせないのが「ショートハンド（一括指定）」です。

しかし、複数の値をまとめて書くため、「あれ？どっちが上下で、どっちが左右だっけ？」「太さと色、どっちを先に書くんだっけ？」と記述順序に迷ってしまうことはありませんか？

ここでは、実務で使うマージンやパディングの法則から複雑なアニメーションや背景のショートハンド、CSSプロパティ自体を美しく並べるベストプラクティスまで解説します。

CSSショートハンド（一括指定）の記述順序
  • margin・paddingの「上右下左（時計回り）」のルール
  • border・background・fontプロパティの正しい順番
  • CSSプロパティを書く順番のベストプラクティス

margin・paddingの「上右下左（時計回り）」のルール

ボックスモデルの余白を調整するmarginやpaddingのショートハンドは、CSSを書く上で使用頻度が高いプロパティです。

これらの値を4つ指定する場合、ルールはシンプルで「上・右・下・左」の順番になります。

ショートハンドの順番を忘れたら、「時計の12時（上）からスタートして時計回り」と覚えておきましょう。

また、実務ではmargin: 10px 0;のような2つ指定は使いますが、3つ指定は直感的にわかりにくいため、チーム開発ではあえてmargin: 10px 20px 30px 20px;と4つしっかり書くか、論理プロパティ（margin-inlineなど）を使って可読性を上げる工夫も求められます。

⭕️ margin / padding：値の数による「時計回りの法則」を視覚化

1つ指定（上下左右）
padding: 15px;

コンテンツ

2つ指定（上下・左右）
padding: 10px 30px;

コンテンツ

4つ指定（時計回り）
10px 20px 30px 40px

コンテンツ
/* 💡 1つ指定：上下左右すべてに適用される */
.box-1 {
  padding: 15px;
}

/* 💡 2つ指定：1つ目が「上下」、2つ目が「左右」 */
.box-2 {
  padding: 10px 30px; /* 💡 上下10px、左右30px */
  margin: 0 auto; /* 💡 上下0、左右auto(中央寄せ)は超頻出！ */
}

/* ⭕️ 4つ指定は 12時(上)から時計回り！ */
.box-4 {
  /* 💡 上(10px) 右(20px) 下(30px) 左(40px) */
  padding: 10px 20px 30px 40px;
}
HTMLコード表示
<div class="sh-basic-wrapper">
  
  <p class="sh-caption">⭕️ margin / padding：値の数による「時計回りの法則」を視覚化</p>

  <div class="sh-demo-area" style="gap: 30px; align-items: flex-end;">
    
    <div class="sh-box-wrapper">
      <p class="sh-label">1つ指定（上下左右）<br><small>padding: 15px;</small></p>
      <div class="sh-box is-1val">
        <div class="sh-inner">コンテンツ</div>
      </div>
    </div>

    <div class="sh-box-wrapper">
      <p class="sh-label" style="color:#0d6efd;">2つ指定（上下・左右）<br><small>padding: 10px 30px;</small></p>
      <div class="sh-box is-2val">
        <div class="sh-inner">コンテンツ</div>
      </div>
    </div>

    <div class="sh-box-wrapper">
      <p class="sh-label" style="color:#dc3545;">4つ指定（時計回り）<br><small>10px 20px 30px 40px</small></p>
      <div class="sh-box is-4val">
        <div class="sh-inner">コンテンツ</div>
      </div>
    </div>

  </div>

  <div class="sh-code">
    /* 💡 1つ指定：上下左右すべてに適用される */<br>
    <span class="hl-blue">.box-1</span> {<br>
      <span class="hl-red">padding: 15px;</span><br>
    }<br><br>

    /* 💡 2つ指定：1つ目が「上下」、2つ目が「左右」 */<br>
    <span class="hl-blue">.box-2</span> {<br>
      <span class="hl-red">padding: 10px 30px;</span> /* 💡 上下10px、左右30px */<br>
      <span class="hl-green">margin: 0 auto;</span> /* 💡 上下0、左右auto(中央寄せ)は超頻出！ */<br>
    }<br><br>

    /* ⭕️ 4つ指定は 12時(上)から時計回り！ */<br>
    <span class="hl-blue">.box-4</span> {<br>
      <span class="hl-comment">/* 💡 上(10px) 右(20px) 下(30px) 左(40px) */</span><br>
      <span class="hl-red">padding: 10px 20px 30px 40px;</span><br>
    }
  </div>

</div>
CSSコード表示
.sh-basic-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.sh-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.sh-demo-area {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #e9ecef;
  padding: 40px 20px;
  border-radius: 4px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.sh-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sh-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  text-align: center;
  line-height: 1.4;
}

/* デモ用の親箱（paddingを可視化するための背景色） */
.sh-box {
  background-color: #ffc107; /* padding領域を黄色で表現 */
  border-radius: 4px;
}

/* デモ用の中身 */
.sh-inner {
  background-color: #fff;
  border: 1px solid #333;
  padding: 10px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

/* 1つ指定 */
.is-1val { padding: 15px; }

/* 2つ指定 */
.is-2val { padding: 10px 30px; }

/* 4つ指定 */
.is-4val { padding: 10px 20px 30px 40px; }

/* コードブロック装飾 */
.sh-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

paddingやmarginの使い方を詳しく知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番

border・background・fontプロパティの正しい順番

余白以外のショートハンドにも、それぞれ独自のルールが存在します。

例えば、枠線や背景、フォント、さらにはアニメーションなどです。

  • borderの順序は任意ですが、実務では可読性のために 「太さ → 種類 → 色（例：1px solid #000）」 の順で書くのが暗黙のルールです。
  • animationとtransitionにおける時間のルールは絶対です。
    「1つ目の時間が変化にかかる時間、2つ目の時間が遅延時間」と暗記してください。

⭕️ font、border、transition 等の必須ルールを1つのボタンに凝縮

.rich-btn {
  /* ⭕️ border は「太さ・種類・色」の順に書く */
  border: 2px solid #0d6efd;

  /* 💡 border-radius は「左上・右上・右下・左下（時計回り）」 */
  border-radius: 15px 15px 0 0;

  /* 💡 font は「太さ・サイズ/行間・ファミリー」※サイズとファミリーは省略不可！ */
  font: bold 16px/1.5 “Helvetica Neue”, Arial, sans-serif;

  /* ⭕️ transition の時間は「1つ目が変化時間(Duration)、2つ目が遅延(Delay)」 */
  /* プロパティ(all)・変化時間(0.3s)・イージング・遅延時間(0s) */
  transition: all 0.3s ease-in-out 0s;

  color: #0d6efd;
  background-color: transparent;
  padding: 15px 40px;
  cursor: pointer;
}

.rich-btn:hover {
  background-color: #0d6efd;
  color: #fff;
}
HTMLコード表示
<div class="sh-complex-wrapper">
  
  <p class="sh-caption">⭕️ font、border、transition 等の必須ルールを1つのボタンに凝縮</p>

  <div class="sh-demo-area" style="text-align: center;">
    
    <button class="sh-complex-btn">
      ホバーしてみてください
    </button>

  </div>

  <div class="sh-code">
    <span class="hl-blue">.rich-btn</span> {<br>
      <span class="hl-comment">/* ⭕️ border は「太さ・種類・色」の順に書く */</span><br>
      <span class="hl-red">border: 2px solid #0d6efd;</span><br><br>

      <span class="hl-comment">/* 💡 border-radius は「左上・右上・右下・左下（時計回り）」 */</span><br>
      <span class="hl-red">border-radius: 15px 15px 0 0;</span><br><br>
    
      <span class="hl-comment">/* 💡 font は「太さ・サイズ/行間・ファミリー」※サイズとファミリーは省略不可！ */</span><br>
      <span class="hl-red">font: bold 16px/1.5 "Helvetica Neue", Arial, sans-serif;</span><br><br>

      <span class="hl-comment">/* ⭕️ transition の時間は「1つ目が変化時間(Duration)、2つ目が遅延(Delay)」 */</span><br>
      <span class="hl-comment">/* プロパティ(all)・変化時間(0.3s)・イージング・遅延時間(0s) */</span><br>
      <span class="hl-red">transition: all 0.3s ease-in-out 0s;</span><br><br>

      <span class="hl-green">color: #0d6efd;</span><br>
      <span class="hl-green">background-color: transparent;</span><br>
      <span class="hl-green">padding: 15px 40px;</span><br>
      <span class="hl-green">cursor: pointer;</span><br>
    }<br><br>

    <span class="hl-blue">.rich-btn:hover</span> {<br>
      <span class="hl-green">background-color: #0d6efd;</span><br>
      <span class="hl-green">color: #fff;</span><br>
    }
  </div>

</div>
CSSコード表示
.sh-complex-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

/* ボタンのショートハンド実証スタイル */
.sh-complex-btn {
  /* border */
  border: 2px solid #0d6efd;
  /* border-radius (上だけ丸くする) */
  border-radius: 15px 15px 0 0;
  /* font */
  font: bold 16px/1.5 "Helvetica Neue", Arial, sans-serif;
  /* transition */
  transition: all 0.3s ease-in-out 0s;
  
  color: #0d6efd;
  background-color: #fff;
  padding: 15px 40px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.sh-complex-btn:hover {
  background-color: #0d6efd;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(13, 110, 253, 0.2);
}

borderやアニメーション・transitionの使い方を詳しく知りたい人は以下から一読ください。

CSSプロパティを書く順番のベストプラクティス

ショートハンドそのものの順番だけでなく、CSSのプロパティ自体をどのような順番で並べるべきかも、実務において重要なテーマです。

プロパティの並べ方には大きく分けて2つあります。

  1. アルファベット順
    AからZへ単純に並べる方法。
    機械的で迷いがありません。
  2. 外から中へ
    レイアウトに影響を与える外側のものから、内側の装飾へと並べる方法。
    人間にとって最も理にかなっています。

実務でのベストプラクティスは「外から中へ」です。

具体的には、「配置→ボックスモデル→タイポグラフィ→視覚的装飾→アニメーション」の順に記述します。

また、HTMLに付与するクラスの順番も同様です。

⭕️ 見た目は同じでも、プロパティの記述順で「コードの美しさ」が決まる

❌ カオスな記述（Outside-in無視）

見た目は同じカード

⭕️ Outside-in（外から中へ）

見た目は同じカード
/* ❌ 思いついた順のCSS */
/* 探すのが大変・上書きバグの温床 */
.card-bad {
  color: #333;
  padding: 20px;
  position: absolute;
  background: #fff;
  font-size: 16px;
  width: 100%;
  border-radius: 8px;
  top: 0;
  display: flex;
  margin: 0 auto;
}
/* ⭕️ Outside-in（外から中へ） */
/* 影響範囲の大きいものから順に書く */
.card-good {
  /* 1. 配置 (Positioning) */
  position: absolute;
  top: 0;

  /* 2. 箱・レイアウト (Box Model) */
  display: flex;
  width: 100%;
  margin: 0 auto;
  padding: 20px;

  /* 3. タイポグラフィ (Typography) */
  font-size: 16px;
  color: #333;

  /* 4. 装飾 (Visual) */
  background: #fff;
  border-radius: 8px;
}
HTMLコード表示
<div class="sh-order-wrapper">
  
  <p class="sh-caption">⭕️ 見た目は同じでも、プロパティの記述順で「コードの美しさ」が決まる</p>

  <div class="sh-demo-area" style="display: flex; gap: 30px; justify-content: center;">
    
    <div style="flex:1; max-width: 250px;">
      <p class="sh-label">❌ カオスな記述（Outside-in無視）</p>
      <div class="sh-order-card">見た目は同じカード</div>
    </div>

    <div style="flex:1; max-width: 250px;">
      <p class="sh-label" style="color:#0d6efd;">⭕️ Outside-in（外から中へ）</p>
      <div class="sh-order-card" style="border-color: #0d6efd; color: #0d6efd;">見た目は同じカード</div>
    </div>

  </div>

  <div class="sh-code" style="display: flex; gap: 10px;">
    <div style="flex: 1; border-right: 1px solid #555; padding-right: 10px;">
      <span class="hl-comment">/* ❌ 思いついた順のCSS */<br>
      /* 探すのが大変・上書きバグの温床 */</span><br>
      <span class="hl-blue">.card-bad</span> {<br>
        <span class="hl-green">color: #333;</span><br>
        <span class="hl-green">padding: 20px;</span><br>
        <span class="hl-green">position: absolute;</span><br>
        <span class="hl-green">background: #fff;</span><br>
        <span class="hl-green">font-size: 16px;</span><br>
        <span class="hl-green">width: 100%;</span><br>
        <span class="hl-green">border-radius: 8px;</span><br>
        <span class="hl-green">top: 0;</span><br>
        <span class="hl-green">display: flex;</span><br>
        <span class="hl-green">margin: 0 auto;</span><br>
      }
    </div>

    <div style="flex: 1; padding-left: 10px;">
      <span class="hl-comment">/* ⭕️ Outside-in（外から中へ） */<br>
      /* 影響範囲の大きいものから順に書く */</span><br>
      <span class="hl-blue">.card-good</span> {<br>
        <span class="hl-comment">/* 1. 配置 (Positioning) */</span><br>
        <span class="hl-green">position: absolute;</span><br>
        <span class="hl-green">top: 0;</span><br><br>
      
        <span class="hl-comment">/* 2. 箱・レイアウト (Box Model) */</span><br>
        <span class="hl-green">display: flex;</span><br>
        <span class="hl-green">width: 100%;</span><br>
        <span class="hl-green">margin: 0 auto;</span><br>
        <span class="hl-green">padding: 20px;</span><br><br>
      
        <span class="hl-comment">/* 3. タイポグラフィ (Typography) */</span><br>
        <span class="hl-green">font-size: 16px;</span><br>
        <span class="hl-green">color: #333;</span><br><br>
      
        <span class="hl-comment">/* 4. 装飾 (Visual) */</span><br>
        <span class="hl-green">background: #fff;</span><br>
        <span class="hl-green">border-radius: 8px;</span><br>
      }
    </div>
  </div>

</div>
CSSコード表示
.sh-order-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

/* デモ用カード */
.sh-order-card {
  background-color: #fff;
  border: 2px solid #adb5bd;
  padding: 30px 20px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  color: #555;
  font-size: 14px;
}

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • orderは、HTMLの記述順を変えずに、要素の「視覚的な並び順」のみを変更するプロパティである。
  • 初期値は0であり、指定した数値が「小さい順」に配置される（マイナスの数値も指定可能）。
  • 親要素にdisplay: flex;またはdisplay: grid;が指定されている場合の「直下の子要素」に対してのみ有効に機能する。
  • 特定の要素を一番最初に配置したい場合はorder: -1;、一番最後に配置したい場合はorder: 999;（極端に大きな値）を指定するのがよい。
  • 要素全体を逆順にしたい場合は、各要素にorderを付与するのではなく、親要素にflex-direction: row-reverse;等を指定する。
  • 視覚的な順番が入れ替わっても、スクリーンリーダーやTabキーによるフォーカスの移動順は元のHTMLの順序のままとなるため、論理的な意味を持つコンテンツの並び替えには使用すべきではない。

よくある質問（FAQ）

CSSのorderプロパティが効かない・順番が変わらないのはなぜですか？

最も多い原因は、親要素にdisplay: flex;またはdisplay: grid;が指定されていないことです。

orderプロパティは、フレックスボックスやグリッドレイアウトの「直下の子要素」にのみ機能します。

そのため、親要素がデフォルトのdisplay: block;のままであったり、孫要素に対してorderを指定したりしても、ブラウザには無視されてしまいます。

orderプロパティの初期値（デフォルト値）はいくつですか？

すべての要素の初期値は0です。

orderは数値が「小さい順」に配置されるルールであるため、ある特定の要素にorder: 1;を指定すると、他の要素（初期値の0）よりも数値が大きくなるため、結果として「一番最後（右または下）」に移動することになります。

特定の要素を「一番最初」や「一番最後」にするには、数値をどう指定するのが正解ですか？

特定の要素を一番最初に持っていきたい場合は、初期値（0）よりも小さいorder: -1;を指定するのがよいです。

逆に一番最後に持っていきたい場合は、後から要素が追加されても最後尾を維持できるようにorder: 999;のような極端に大きな数値を指定するのがよいです。

スマホ表示の時だけ要素を逆順にしたい場合、全ての子要素にorderを指定するべきですか？

いいえ、すべての子要素にorder: 3;, order: 2;, order: 1;のように連番を振って逆順にするのは、メンテナンス性が低下するため非推奨です。

リスト全体の順序をひっくり返したいだけであれば、子要素のorderは触らず、親要素に対してflex-direction: column-reverse;やrow-reverse;を指定するのがよいです。

orderで見た目の順番を変えると、Tabキーでの移動順や音声読み上げの順番も変わりますか？

いいえ、変わりません。

ここが最大の注意点です。

orderプロパティは、あくまで画面上の「視覚的な見た目」の配置を変えるだけで、裏側にあるHTMLの構造は変更しません。

そのため、スクリーンリーダーやTabキーでのフォーカス移動は、元のHTMLタグが書かれている順番のまま実行されます。

視覚的な順番と操作順がズレるとユーザーを混乱させるため、見出しや文章などの「意味を持つコンテンツ」の並び替えにorderを使用するのは避けてください。

CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次