タグ、要素の順番をcssのみで入れ替える方法

今回はcssを使ってタグ、要素の順番を変更させる方法について紹介します。

jsは使わずにcssのみで変更します。

タグ、要素の順番をcssで変更する方法

順番を変える方法はいくつかあります。

orderを使って順番を指定する

1つ目はorderを使って順番を変える方法になります。

一つ一つ個別に順番を入れ替えたいときに便利です。

親要素にはflexを指定する必要があります。

html

<div class="order-list01">
    <ul class="list">
        <li class="item item01">item1</li>
        <li class="item item02">item2</li>
        <li class="item item03">item3</li>
    </ul>
</div>

css

.order-list01 .list{
    display: flex;
    border: solid 1px #eee;
}
 
.order-list01 .item01{order:3;}
.order-list01 .item02{order:1;}
.order-list01 .item03{order:2;}

orderで番号を設定することで自由に並び変えることができます。

上記のように指定すると2つ目を1番、3つ目を2番、1つ目を3番の順番に並び替えることができます。

row-reverseを使って要素の左から右に変更する

次は要素の順番を逆にする方法です。

個別に指定するのではなく純粋に順番を逆にしたいときに便利です。

html

<div class="order-list02">
    <ul class="list">
        <li class="item item01">item1</li>
        <li class="item item02">item2</li>
        <li class="item item03">item3</li>
    </ul>
</div>

css

.order-list02 .list{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

gridを使った順番の入れ替え

gridを使うことで自由自在にレイアウトの配置を変更することができます。

順番を入れ替えるのも楽です。

html

<div class="order-list03">
    <ul class="list">
        <li class="item item01">item1</li>
        <li class="item item02">item2</li>
        <li class="item item03">item3</li>
    </ul>
</div>

css

.order-list03 .list{
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    place-items: center;
}
 
.order-list03 .list .item01{grid-column: 3;}
.order-list03 .list .item02{grid-column: 1;}
.order-list03 .list .item03{grid-column: 2;}

使う用途だったり使いやすいものを選んで使い分けたらよいかなと思います。

jsでも並び変えできますがcssだと運用面でも楽だと思います。

ぜひ使ってみてください。