レスポンシブデザインでHTML要素の並び順（ブロック）を画面サイズに応じて自由に入れ替えるには、CSS Flexbox または CSS Grid の order プロパティを使用するのが最も簡単で確実な方法です。 [1, 2]
HTML構造を一切書き換えることなく、CSSだけでブロックの配置ロジックをコントロールする2つのコア手法を解説します。
1. Flexbox を使ったブロック移動（直線的な並び替え）
要素が一列（垂直または水平）に並んでいるレイアウトの場合、flex-direction と order を組み合わせます。 [2]
実装コード例
<div class="flex-container">
<div class="block-A">ブロック A</div>
<div class="block-B">ブロック B</div>
<div class="block-C">ブロック C</div>
</div>
/* ベーススタイル（PC向け：A → B → C の順） */
.flex-container {
display: flex;
flex-direction: row; /* 横並び */
}
/* モバイル向け（画面幅 768px 以下）：B → C → A の順に入れ替え */
@media (max-width: 768px) {
.flex-container {
flex-direction: column; /* 縦並びに変更 */
}
.block-A { order: 3; } /* 一番後ろへ */
.block-B { order: 1; } /* 一番先頭へ */
.block-C { order: 2; } /* 真ん中へ */
}
💡 ロジックのポイント
orderプロパティの初期値はすべて0です。- 数値が小さい要素が先に配置され、数値が大きい要素が後に配置されます。
- 1つの要素だけに
order: -1を指定して強制的に先頭に持ってくる、といった使い方も可能です。
2. CSS Grid を使ったブロック移動（2次元・複雑な配置）
ダッシュボードやマガジン型レイアウトのように、縦横が複雑に絡むレイアウトを画面幅に応じて大胆に動かしたい場合は、grid-template-areas を使用します。 [3]
実装コード例
<div class="grid-container">
<main class="content">メインコンテンツ</main>
<aside class="sidebar">サイドバー</aside>
<div class="ad">広告枠</div>
</div>
/* PC向け：左右に分割した2段レイアウト */
.grid-container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas:
"main sidebar"
"main ad";
}
.content { grid-area: main; }
.sidebar { grid-area: sidebar; }
.ad { grid-area: ad; }
/* モバイル向け：広告を最上部に移動し、1列にスタック */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-areas:
"ad" /* 広告をトップに */
"main" /* 次にメイン */
"sidebar"; /* 最後にサイドバー */
}
}
💡 ロジックのポイント
- 各子要素に
grid-area: [名前]でエリア名を付けます。 - 親要素の
grid-template-areasの中で、その名前をパズルのように配置するだけで、HTMLの記述順を無視して自由にブロックを移動できます。 [4]
⚠️ 実装時の注意点
- アクセシビリティ（Tabキーの移動順）:
orderや Grid で見た目の順番（視覚的順序）を変更しても、スクリーンリーダーやTabキーでのフォーカス順はHTMLの記述順（ソース順）のまま維持されます。キーボード操作の論理的破綻が起きないよう、極端な入れ替えは避けましょう。
具体的なコードが上手く動かない場合は、状況に合わせて調整します。
- 現在の HTML構造（マークアップ）
- 実現したい PC時とスマホ時の配置イメージ
上記を教えていただければ、そのまま使える具体的なコードをご提案できます。
コメント