【強化書：STEP①】基本レイアウト

<div class="container-1">
  <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>

.container-1{
  background: #eee;
}

<div class="container-2">
  <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>

.container-2{
  max-width: 500px; /*ボックスの最大幅を指定*/
  margin-left: auto; /*中央寄せの為*/
  margin-right: auto; /*中央寄せの為*/
  background: #eee;
}

<div class="container-3">
  <figure><img src="https://web.ki-biz.com/weblog/wp-content/uploads/2025/10/8b53962bd6992e076e58c639b89ddd1d.webp" width="500px" height="500px" alt="犬のイラスト" loading="lazy"></figure>
</div>

.container-3{
  background: #eee;/*わかりやすい様に背景色*/
}

img {
  width: 100%;/*画像サイズに関係なく親要素幅いっぱい*/
  height: auto;/*画像比率維持のために必要*/
}

<div class="container-4">
  <figure><img src="https://web.ki-biz.com/weblog/wp-content/uploads/2025/10/8b53962bd6992e076e58c639b89ddd1d.webp" width="500px" height="500px" alt="犬のイラスト" loading="lazy"></figure>
</div>

.container-4{
  background: #eee;/*わかりやすい様に背景色*/
}

.container-4 img {
  max-width: 100%;/*画像サイズが上限。さらに親要素幅に合わせて縮小*/
  height: auto;/*画像比率維持のために必要*/
}

<div class="row1-1">
  <div class="col2-1"><p>ここに左側テキストが入ります。ここに左側テキストが入ります。ここに左側テキストが入ります。</div>
  <div class="col2-1"><p>ここに右側テキストが入ります。ここに右側テキストが入ります。ここに右側テキストが入ります。</div>

.row1-1{
  display: flex;
}

.col2-1{
  width: 50%;
  border: 1px dashed #999;
}

<div class="row2">
  <div class="col2"><p>ここに左側テキストが入ります。ここに左側テキストが入ります。ここに左側テキストが入ります。</div>
  <div class="col2"><p>ここに右側テキストが入ります。ここに右側テキストが入ります。ここに右側テキストが入ります。</div>

.row2{
  display: flex;
  justify-content: space-between;
  max-width: 640px;
  margin: 0 auto;
  outline: 1px dashed #999;
}

.col2-2{
  width: calc((300 / 640) * 100%); /*【子要素】/ 【親要素】* 100% */
  background: #e9e9e9;
}