【css】display: contentsを使用した要素の並び替え

はじめに

この記事の概要

こんにちは、株式会社TOKOSのたくまです！

皆さんは普段、コーディングをする中でこんな悩みを抱えたことはありませんか？

たくま

pc画面とスマホ画面で要素の順番が異なるときにorderで解決しようとしても上手くいかない、、

たくま

レイアウトが違う時の要素の並び替えの方法が分からない、、

下の図のようなレイアウトの際はorderのみを使用することで簡単に要素の順番を入れ替えることができます。

次の場合はどうでしょうか？

この場合はorderのみで順番を入れ替えるというのは難しいと思います。
そこで今回は、display: contentsを使用した要素の入れ替え方法をご紹介していきます！

対象読者

• cssを勉強中の方
• pc画面とスマホ画面でレイアウトが異なる際の要素の並び替えで悩んでいる方

要素の並び順を入れ替える

orderの仕様

まずは概要でお見せした単純な要素の並び替えについてご紹介します。

このレイアウトにする際はdisplay: flexとflex-direction: columnとorderを使用します。

@media screen and (max-width: 750px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .block1 {
    order: 3;
  }
  .block2 {
    order: 1;
  }
  .block3 {
    order: 2;
  }
}

上記のように記述することで、スマホ画面ではblock2とblock3の順番を入れ替えることができます。
orderの初期値は0が設定され、数値の低い順に配置されます。
ちなみにマイナスの値も設定できるので、-1や-2も設定できます。
こちらの方法はご存じの方も多いかと思います。

さらに詳しく知りたい方は以下のサイトが参考になります。

【CSS】orderの使い方、アイテムの配置する順番を指定する!

orderとは、flexboxアイテムの配置する順番を指定します。

shu-naka-blog.com

並び替えの際に抑えていただきたいポイントは、orderは兄弟要素に作用するという点です。
これが後述する要素の並び替えを理解するに当たり、必要な知識となるので覚えておいてください！

display: contentsの仕様

続いてレイアウトがpc画面とスマホ画面で異なる際の並び替えについて、ご紹介します。

この場合、orderのみを使用して並び替えることは難しいと思います。なぜかというと、上記のレイアウトにする場合はHTMLの構造はおそらく下記のようになるのではないでしょうか？

<div class="container">
  <div>
    <div class="block1">block1</div>
    <div class="block2">block2</div>
    <div class="block3">block3</div>
  </div>
  <div class="block4">block4</div>
</div>

これでは、.block1〜.block3と.block4が兄弟要素にならないため、orderを使用した並び替えが出来ません。

gridを使用したり、position: absoluteを使用することでも解決できるとは思いますが、もっと手軽で変更にも強い指定方法があります。
それが、display: contentsです！

display: contentsの具体的な使用方法は以下のサイトが分かりやすいです。

CSSのdisplay: contentsの使い方や最新ブラウザ対応状況について徹底解説します！ | 東京のホームページ制作・WEB制作会社 - 株式会社PENGIN

CSSのdisplayプロパティに「contents」という値があることを知っていますか？

pengi-n.co.jp

今回は並び替えの際の使用方法に焦点をあてて紹介していきます！

上記の並び替えを実施する前に、下準備として.block1〜.block3をラップする箱にクラス名を付与する必要があります。
今回は.contentという名前にしました。
イメージとしては以下のようになります！

これで下準備は完了です！
.contentにdisplay: contentsを記述し、あとはorderで並び順を指定するだけで上記の並び替えを実装できます！

display: contentsとorderを組み合わせて並び替える際の記述は以下のとおりです。

@media screen and (max-width: 750px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .content {
    display: contents;
  }
  .block1 {
    order: 1;
  }
  .block2 {
    order: 3;
  }
  .block3 {
    order: 4;
  }
  .block4 {
    order: 2;
  }
}

このように記述することで何が起こっているかというと、.contentという親要素の枠だけがスマホ画面で消えるようなイメージです。
.contentの枠が消えることにより、中にある.block1～.block3が、.block4の兄弟要素になります。
兄弟要素となることで、orderを使用した並び替えが可能になります！

おわりに

今回はdisplay: contentsを使用した要素の並び替えについて紹介しました！
これまではorderやHTMLの構造をこねくりまわして何とか対応していましたが、display: contentsを使用することで正確かつスッキリとした記述で実装できます。
pc画面とスマホ画面でレイアウトが異なる際の並び替えにぜひ使用してみてください！