忍者CODE

ログイン

19
【レスポンシブ】要素の順番を変えよう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
【レスポンシブ】要素の順番を変えよう
PC時は、タイトル/img(赤背景)/テキスト
SP時はタイトル/テキスト/img(赤背景)

見本動画を参考にして実装してください。
自分の環境に書くコード
            <section class="card">
    <h2>カードタイトル</h2>
    <div class="card-img"></div>
    <div class="card-sentence">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</section>
¥HTML¥
          
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <section class="card">
  <h2>カードタイトル</h2>
  <div class="card-img"></div>
  <div class="card-sentence">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</section>
¥HTML¥
          
            .card {
    width: 300px;
    margin: auto;
    border: 1px solid #8d8d8d;
    padding: 8px;
}
h2 {
    text-align: center;
}
.card-img {
    width: 100%;
    height: 150px;
    background: red;
    margin: 24px 0;
}
.card-sentence {
    width: 100%;
}

@media screen and (max-width: 768px) {
    .card {
        display: flex;
        flex-wrap: wrap;
    }
    h2 {
        margin: 0 auto 12px;
        order: 1;
    }
    .card-img {
        order: 3;
    }
    .card-sentence {
        order: 2;
    }
}
¥CSS¥
          
答えのアイコン

解説

レスポンシブ時にdisplayの指定を変更。

そこでorderを指定するようにしましょう。
実務でもカードないの順番を入れ替える事も多いので覚えましょう。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

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

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

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