【CSS Tips】CSSで要素の位置を変える方法と注意点

これは何

レスポンシブなWebデザインを作成していると、デバイス幅によっては要素の位置が変わることがあります。
そうしたデザインをCSSで実装するときの方法と注意点をまとめました。

①flex-directionで要素の並び順を逆向きにする

例えば、以下のようなUIを実装することを想定しています。

• デスクトップの時は、画像・テキストの順で横並びになっている
• モバイルの時はテキスト・画像の順で縦並びになっている

この時、単純にモバイルの時は要素が縦並びになるようにflex-direction: columnを指定するだけでは、画像の位置が上になってしまいます。

こうした時にはflex-direction: column-reverseを指定すると、縦並びにした上に要素の並び順を逆向きにしてくれます。
横並びのまま順番だけ逆にしたい場合は、flex-direction: row-reverseを指定します。

サンプルコード

<div>
  <img src="hoge" />
  <p>hoge</p>
</div>

div {
  display: flex; /* レイアウトを横並びにする */
}

@media screen and (min-width: 500px) {
  div {
    flex-direction: column-reverse; /* デバイスが500px以下の時は並び順を逆順にする */
  }
}

See the Pen Untitled by kabechiyo_shunkaaizawa (@kabechiyo) on CodePen.

②orderで順番を並び替える

「flex-directionで要素の並び順を逆向きにする」では、すべての要素の並び順が逆になってしまうので、一部だけ順番を変えたい時などには使用できません。

そうした時には、orderを使います。

例えば、以下のようなUIを実装することを想定しています。

• デスクトップの時は、画像・メイン要素・サブ要素の順で横並びになっている
• モバイルの時は、画像・サブ要素・メイン要素の順で縦並びになっている

こうした時には、FlexboxやGridの子要素にorderを指定することで、並び順を指定できます。

サンプルコード

<div>
  <img src="hoge" />
  <div class="content"></div>
  <p>hoge</p>
</div>

div {
  display: flex; /* レイアウトを横並びにする */
}

@media screen and (min-width: 500px) {
  div {
    flex-direction: column; /* デバイスが500px以下の時はレイアウトを縦並びにする */
  }
  .content {
    order: 3; /* デバイスが500px以下の時はcontentの位置を3番目にする */
  }
}

See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen.

grid-areaで位置を変える

①や②のように順番を変えるだけでは実現できなかったり、コードが複雑になってしまう場合にはgrid-areaを使用するのがおすすめです。

例えば、以下のようなUIを実装することを想定しています。

• デスクトップの時は、画像・フッター要素が縦並びになった列・メイン要素・サブ要素の順で横並びになっている
• モバイルの時は、画像・メイン要素・サブ要素・フッター要素の順で縦並びになっている

grid-areaを使うと各要素に名前をつけることができ、名前を使って要素をどうグリッドレイアウト上に配置するかを指定できます。

サンプルコード

<div>
  <img src="hoge" />
  <p>hoge</p>
  <div class="content"></div>
  <div class="sub_content"></div>
</div>

/* 各要素に名前をつける */
img {
  grid-area: image;
}

p {
  grid-area: text;
}

.content {
  grid-area: content;
}

.sub_content {
  grid-area: sub_content;
}

/* 各要素につけた名前を用いてグリッドレイアウトに並べる */
div {
  grid-template-areas:
    "image content sub_content"
    "text content sub_content";
}

/* デバイスが500px以下の時はcontentの位置を3番目にするレイアウトを変える */
@media screen and (min-width: 500px) {
  div {
    grid-template-areas:
      "image" "content" "sub_content" "text";
  }
}

See the Pen grid-area by かべちよ (@kabechiyo13) on CodePen.

アクセシビリティ上の注意点

CSSで「要素の見た目上の位置」を変えた際は、「DOM構造の順番」は変わりません。
そのため、見た目上の順番とスクリーンリーダーなどで読み上げられる要素の順番が異なってしまいます。

CSSで要素の表示順を変えた際は、アクセええシビリティツリー上でも意味が適切に通じるかをチェックする必要があります。

逆に言えば、DOM構造を変えずに見た目の順番を変えられるので、「見た目を実現するためにDOM構造を変え、情報の流れが変わってしまう」ことを防ぐこともできます！