HTMLの順番を入れ替えたい場合の備忘録です。
要素の順番の入れ替え方法について
時と場合によりますが、上下の順番を入れ替えたい場合があります。
PCとスマホで順番を入れ替えたい場合などですね。
縦と横で入れ替え方法が違うので、まずは縦から見ていきましょう。
例として、以下のような要素を入れ替えます。
上下方向の入れ替えの場合、display:gridを使用します。
それぞれの箱の親要素にgridとgrid-template-rowsを、
それぞれの箱にgrid-rowを設定します。
例えば親要素をparent、子要素をone、twoとする場合、HTMLとCSSの並びは以下のようになります。
1 2 3 4 |
<div class="parent"> <div class="one">1</div> <div class="two">2</div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 |
div.parent{ display:grid; gid-template-rows:50% 50%; } div.one{ grid-row:2/3; } div.two{ grid-row:1/2; } |
以上を適用させると、結果は以下のようになります。
上下の順番を入れ替えることが出来ましたね。
display:gridの仕様については以下の記事で詳細に解説しているので、
こちらも参考にしてください。
CSS3で登場したdisplay:gridについての備忘録です。 「display:grid」の使い方について 枠組みの作り方について 大枠に「display:grid」を指定することで、grid表示ができます。 gridは表組[…]
さて、次は左右を入れ替える場合です。
こちらは上下を入れ替えるよりも簡単です。
そもそも、要素を左右に並べるには「display:flex」を使用します。
例えば以下のように左右に並べる場合、親要素に「display:flex」を指定すればOKです。
これで要素は横並びです。
ここから要素の順番を入れ替えるのは簡単です。
それだけで、上記の結果は以下のようになります。
左右の順番が入れ替わったことが分かりますね。
簡単に実装できるので、縦方向、横方向、共に覚えておいてください。