【CSS】PCとスマホで表示順を変更する

近年、レスポンシブデザインがますます重要になっています。特に、PCとスマホで異なる表示順を実現したい場合が多々あります。この記事では、CSSを用いてPCとスマホで表示順を簡単に変更する2つの主要な方法、すなわちFlexboxとGrid Layoutについて詳しく解説します。

Flexboxを使用する方法

Flexbox（Flexible Box Layout）は、コンテナ内のアイテムを効率的に配置するためのレイアウトモデルです。このモデルを使用すると、order プロパティを使って要素の表示順を簡単に変更できます。

HTML

<div class="container">
  <div class="item" id="item1">Item 1</div>
  <div class="item" id="item2">Item 2</div>
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
}

/* PC用 */
@media (min-width: 768px) {
  #item1 { order: 2; }
  #item2 { order: 1; }
}

/* スマホ用 */
@media (max-width: 767px) {
  #item1 { order: 1; }
  #item2 { order: 2; }
}

注意点

order プロパティは、同じFlexコンテナ内のアイテムにのみ適用されます。また、order プロパティは整数値を取り、デフォルトは0です。値が小さいほど先に表示されます。

Grid Layoutを使用する方法

CSS Grid Layoutは、2次元のレイアウトシステムを提供します。Flexboxが1次元のレイアウトに特化しているのに対し、Gridは行と列の両方で高度なレイアウトが可能です。

HTML

<div class="container">
  <div class="item" id="item1">Item 1</div>
  <div class="item" id="item2">Item 2</div>
</div>

CSS

.container {
  display: grid;
  grid-template-areas: "item2 item1";
}

/* PC用 */
@media (min-width: 768px) {
  #item1 { grid-area: item1; }
  #item2 { grid-area: item2; }
}

/* スマホ用 */
@media (max-width: 767px) {
  #item1 { grid-area: item2; }
  #item2 { grid-area: item1; }
}

注意点

grid-area プロパティを使用する場合、grid-template-areas で定義したエリア名を指定する必要があります。また、Grid Layoutは比較的新しい技術なので、古いブラウザではサポートされていない場合があります。

まとめ

FlexboxとGrid Layoutは、PCとスマホで表示順を変更する際に非常に便利なツールです。どちらもレスポンシブデザインに適しており、状況に応じて選べます。この記事が、あなたのWebデザインのスキル向上に役立つことを願っています。