以下の図のように作る

responsive.gif

手順

  1. reset.cssを読み込む(https://andy-bell.co.uk/a-more-modern-css-reset/)

  2. sample.jpgをダウンロードする

  3. クラスboxの内側に、h2タグとdivタグを書く

  4. divタグの中に、imgタグとpタグを書く

  5. クラスboxに以下のCSSを付加する

    1. セレクタ：.box
    margin-top 16px
    padding-left 5%
    parring-right 5%
    max-width 1000px
    margin-left auto
    margin-right auto

  6. クラスboxの中のh2に以下のCSSを付加する

    1. セレクタ：.box h2
    margin-bottom 16px

  7. クラスboxの中のimgに以下のCSSを付加する

    1. セレクタ：.box img
    margin-bottom 16px

  8. 画面幅が576px以上の時に以下のCSSを付加する

    1. セレクタ：.box div

      display flex
      align-items start
      gap 40px

    2. セレクタ：.box img

      width 50%
      max-width 400px

  9. 画面幅が1000px以上の時に以下のCSSを付加する

    1. セレクタ：.box
    padding 0

解答例

https://www.youtube.com/embed/3cHfav5cNDQ?si=K2vbZO9W8f24r3QO

作成したコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <section class="box">
        <h2>見出し</h2>
        <div>
            <img src="sample.jpg" alt="">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
    </section>
</body>

</html>

.box {
    margin-top: 16px;
    padding-left: 5%;
    padding-right: 5%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.box h2 {
    margin-bottom: 16px;
}

.box img {
    margin-bottom: 16px;
}

@media screen and (min-width:576px) {
    .box div {
        display: flex;
        align-items: start;
        gap: 40px;
    }

    .box img {
        width: 50%;
        max-width: 400px;
    }

    /*========min-width:576px============*/
}

@media screen and (min-width:1000px) {
    .box {
        padding: 0;
    }

    /*========min-width:1000px============*/
}