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

はじめに

この記事の概要

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

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

たくま

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

たくま

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

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

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

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

対象読者

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

orderの仕様

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

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

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

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

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

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

displyay: contentsの仕様

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

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

<div class="container">
  <div>
    <div class="blcok1">block1</div>
    <div class="blcok2">block2</div>
    <div class="blcok3">block3</div>
  </div>
  <div class="blcok4">block4</div>
</div>

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

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

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

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

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

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

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

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

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

おわりに

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

今回はdislplay: contentsについて紹介しましたが、cssについてもっと詳しく知りたいという方は以下の書籍がおすすめです。
初学者の方が悩みがちなBEMなどについても分かりやすく解説してくれています。

スポンサーリンク