ログイン
問題43

CSSを使って要素の順番を変えよう

これまでの問題で、要素の指定は柔軟に対応できるようになりましたが、順番を変えるとなると少し戸惑うかと思います。しかし簡単に並び変えることができるのです。 その方法についてもしっかり覚えていきましょう!

アイコン画像

問題43:CSSを使って要素の順番を変えよう

CSSのみで要素の順番を変えてみましょう!
見本画像を参考にしてCSSに記述し実装してください。

エディターのアイコンあらかじめエディタに書くコード

                <section>
    <div class="num01">これが4番目</div>
    <div class="num02">これが1番目</div>
    <div class="num03">これが3番目</div>
    <div class="num04">これが5番目</div>
    <div class="num05">これが2番目</div>
</section>
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <section>
  <div class="num01">これが4番目</div>
  <div class="num02">これが1番目</div>
  <div class="num03">これが3番目</div>
  <div class="num04">これが5番目</div>
  <div class="num05">これが2番目</div>
</section>
¥HTML¥
            
              section {
    display: flex;
    flex-direction: column;
}
.num01 {
    order: 4;
}
.num02 {
    order: 1;
}
.num03 {
    order: 3;
}
.num04 {
    order: 5;
}
.num05 {
    order: 2;
}
¥CSS¥
            

コメントのアイコン解説

要素の順番を変えるには
display:flexとorderを使うとかなり簡単に実装できます。

まず、親要素にdisplay:flexを付与し子要素
(順番を変えたい要素)にorderで番号を割り振ります。

flexを使用すると横並びになってしまう為
今回のように縦にしたい時はflexと共に
flex-direction: column;を付与してあげましょう!
ログインして解答を見る

コメントのアイコン補足

今回の問題でdisplay:flex;を使用した理由について深掘っておきます。
結論を言うと、orderプロパティはフレックスコンテナ内でしか効果を発揮しないからです。
どうしても横並びになってしまうので、今回のように縦に並べる際はflex-directionを忘れずに指定しておきましょう。
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!

閉じる