【html&css】min-widthとmax-widthの使い方【レスポンシブ対応】

<div class="resizable-wrapper">
  <p class="instruction">▼ この点線枠の【右下】をドラッグして、幅を狭くしてみてください ▼</p>
    
  <div class="box">
    この箱は通常「点線枠の100%」の幅ですが、<br>
    <strong>「min-width: 300px;」</strong>があるため、<br>
    300pxのラインで縮むのをピタッとやめます！
  </div>
</div>

.resizable-wrapper {
  resize: horizontal; /* 横方向にだけリサイズ可能にする */
  overflow: auto;     /* resizeを有効にするために必須 */

  /* 見た目の設定 */
  width: 100%;
  border: 2px dashed #999;
  padding: 20px;
  background-color: #f9f9f9;
  box-sizing: border-box;
}

.instruction {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}

.box {
  /* 基本の幅：親（点線枠）の100%に合わせて伸び縮みする */
  width: 100%;
  
  /* ★最大のポイント：どれだけ親が狭くなっても300pxは死守する */
  min-width: 300px;
  
  /* 見た目の設定 */
  background-color: #e0f2f1;
  padding: 20px;
  border: 2px solid #009688;
  box-sizing: border-box;
  text-align: center;
}

<div class="resizable-wrapper">
  <p class="instruction">▼ この点線枠の【右下】をドラッグして、幅を「広く」してみてください ▼</p>  
  <div class="card">
    <div class="card-icon"></div>
    <div class="card-text">
      <strong>現在の状態</strong><br>
      箱の幅が狭い時は、スマホ用の「縦並び＆赤色」のデザインです。
    </div>
  </div>
</div>

.resizable-wrapper {
  resize: horizontal;
  overflow: auto;
  container-type: inline-size; 
  
  width: 280px; /* 最初はスマホサイズの狭い幅 */
  border: 2px dashed #999;
  padding: 20px;
  background-color: #f9f9f9;
  box-sizing: border-box;
}

.card {
  background-color: #ffebee;
  border: 2px solid #f44336;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  /* 最初は縦に並ぶ */
  display: flex;
  flex-direction: column; 
  align-items: center;
  gap: 10px;
}

.card-icon { font-size: 40px; }

.card-icon::before {
  content: "📱";
  font-size: 40px;
}

.card-text { font-size: 14px; }

/* =======================================
   幅が広がった時の条件分岐（ここがメイン！）
======================================= */
/* 枠の幅が「450px以上」になったら、この中身が発動（上書き）される！ */
@container (min-width: 450px) {
  
  .card {
    background-color: #e8f5e9;
    border-color: #4caf50;
    /* 縦並びから「横並び」に変化 */
    flex-direction: row; 
    text-align: left;
  }
  
  .card-icon::before {
    content: "💻"; /* 450pxを超えたら、PC用アイコンに上書き */
    font-size: 60px;
  }
  
  .card-text {
    font-size: 16px; /* 文字を少し大きくする */
  }
  /* スマホ用だったテキストをPC用に書き換える（疑似表現） */
  .card-text strong::after { content: "（PCモード発動！）"; color: #4caf50; }
}

<div class="resizable-wrapper">
  <p class="instruction">▼ この点線枠の【右下】をドラッグして、幅を「広く」してみてください ▼</p>  
  <div class="box">
    この箱は通常「点線枠の100%」の幅で広がりますが、<br>
    <strong>「max-width: 400px;」</strong>があるため、<br>
    400pxに到達すると、それ以上は広がりません！
  </div>
</div>

.resizable-wrapper {
  resize: horizontal;
  overflow: auto;
  
  /* 最初は狭くしておく */
  width: 250px; 
  max-width: none; 
  
  border: 2px dashed #999;
  padding: 20px;
  background-color: #f9f9f9;
  box-sizing: border-box;
}

.instruction {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}

.box {
  /* 基本の幅：親（点線枠）の100%に合わせて広がる */
  width: 100%;
  /* ★最大のポイント：どれだけ親が広くなっても400pxでストップ！ */
  max-width: 400px;
  margin: 0 auto; 
  
  /* 見た目の設定 */
  background-color: #fff3e0;
  padding: 20px;
  border: 2px solid #ff9800;
  box-sizing: border-box;
  text-align: center;
}

<div class="resizable-wrapper">
  <p class="instruction">▼ この点線枠の【右下】をドラッグして、幅を「狭く」してみてください ▼</p>
  <div class="card">
    <div class="card-icon"></div>
    <div class="card-text">
      <strong>現在の状態</strong><br>
      箱の幅が広い時は、PC用の「横並び＆青色」のデザインです。
    </div>
  </div>
</div>

.resizable-wrapper {
  resize: horizontal;
  overflow: auto;
  container-type: inline-size;
  
  /* 今回は最初からPCサイズ（広く）にしておく */
  width: 600px; 
  border: 2px dashed #999;
  padding: 20px;
  background-color: #f9f9f9;
  box-sizing: border-box;
}

.instruction {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}

.card {
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
  padding: 20px;
  border-radius: 8px;
  
  /* PC向けなので、最初は「横並び」にしておく */
  display: flex;
  flex-direction: row; 
  align-items: center;
  gap: 20px;
}

.card-icon::before {
  content: "💻"; /* PCアイコン */
  font-size: 60px;
}

.card-text { font-size: 16px; }

/* =======================================
   幅が狭くなった時の条件分岐（ここがメイン！）
======================================= */
/* 枠の幅が「499px以下」に縮んだら、この中身が発動（上書き）される！ */
@container (max-width: 499px) {
  
  .card {
    background-color: #fff3e0;
    border-color: #ff9800;
    
    /* 横並びから「縦並び」に変化 */
    flex-direction: column; 
    text-align: center;
    padding: 15px;
  }
  
  .card-icon::before {
    content: "📱"; /* スマホアイコンに変化 */
    font-size: 40px;
  }
  
  .card-text {
    font-size: 14px; /* スマホ向けに文字を少し小さくする */
  }
  
  /* テキストの書き換え（疑似表現） */
  .card-text strong::after { content: "（スマホモード発動！）"; color: #ff9800; display: block; }
}