以下の図の様につくる

responsive.gif

sample.jpg

手順

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

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

  3. sectionタグを書き、クラスboxを付加する

  4. クラスboxの内側に、h2タグとdivタグを書く。divタグにクラスflexを付加する

  5. クラスflexの中に、imgタグとdivタグを書く

  6. divタグの中に、h3タグとpタグを書く

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

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

  8. クラスboxの中のh2及びimg及びh3に、以下のCSSを付加する

    1. .box h2,.box img,.box h3
    margin-bottom 16px

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

    1. セレクタ：.box .flex

      display flex
      align-items start
      gap 40px

    2. セレクタ：.box img

      width 50%
      max-width 400px

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

    1. セレクタ：.box

      padding 0

解答例

https://www.youtube.com/embed/Ixm79KGQd8M?si=Uv0oUXbXn8DUSzqt

作成したコード

<!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 class="flex">
            <img src="sample.jpg" alt="">
            <div>
                <h3>見出し見出し</h3>
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
        </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,
.box img,
.box h3 {
    margin-bottom: 16px;
}

@media screen and (min-width:576px) {
    .box .flex {
        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============*/
}