【CSS】要素の順番の入れ替え方法について

  • 2021年8月8日
  • 2023年5月11日
  • css
css

HTMLの順番を入れ替えたい場合の方法についてまとめました。
縦方向、横方向、ともにCSSのみで実現可能です。

【CSS】要素の順番の入れ替え方法について

縦組みの要素をCSSで入れ替える

まずは上下の順番の入れ替えからです。PCとスマホで順番を入れ替えたい場合などですね。

例として、以下のような要素を入れ替えます。

1
2

上下方向の入れ替えの場合、CSSのdisplayプロパティのgridキーワードを使用します。
それぞれの箱の親要素にgridとgrid-template-rowsを、それぞれの箱にgrid-rowを設定します。

例えば親要素をparent、子要素をone、twoとする場合、HTMLとCSSの並びは以下のようになります。

以上を適用させると、結果は以下のようになります。

1
2

上下の順番を入れ替えることが出来ましたね。
displayプロパティのgridキーワードの仕様については以下の記事で詳細に解説しているので、こちらも参考にしてください。

関連記事

CSS3で登場したdisplay要素の新キーワードgridについてのまとめです。 【CSS】display要素のgridキーワードの使い方 まずは基本となる、grid(枠組み)の作り方について 大枠に「display:grid」を指定[…]

左右の要素をCSSで入れ替える場合

さて、次は左右を入れ替える場合です。
こちらは上下を入れ替えるよりも簡単です。

そもそも、要素を左右に並べるには「display:flex」を使用することが多いですよね。

例えば以下のように左右に並べる場合、親要素に「display:flex」を指定すればOKです。

1
2

これで要素は横並びです。
ここから要素の順番を入れ替えるのは簡単です。

親要素に「flex-direction: row-reverse;」を指定してあげてください

それだけで、上記の結果は以下のようになります。

1
2

左右の順番が入れ替わったことが分かりますね。
簡単に実装できるので、縦方向、横方向、共に覚えておくと役立つかもしれません。