忍者CODE

ログイン

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

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
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;を付与してあげましょう!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET