CSS幅、高さ、オーバーフロー

<style>
.box {
  width: 300px;
  height: 200px;
  background: #f0f0f0;
}
</style>
<div class="box">寸法範囲を示すボックス要素</div>

<style>
.pixel {
  width: 300px;
  background: #e3f2fd;
}
.percent {
  width: 50%;
  background: #fce4ec;
}
.vw-vh {
  width: 50vw;
  height: 100vh;
  background: #e8f5e9;
}
.auto-width {
  width: auto;
  background: #fff3e0;
}
</style>
<div class="pixel">ピクセル単位：固定幅300px</div>
<div class="percent">パーセント単位：幅50%</div>
<div class="vw-vh">ビューポート単位：幅50vw</div>
<div class="auto-width">自動幅：コンテンツで決定</div>

<style>
.container {
  width: 80%;
  max-width: 1200px;
  min-width: 320px;
  margin: 0 auto;
  background: #e8eaf6;
  padding: 10px;
}
</style>
<div class="container">レスポンシブ幅の制約を持つコンテナ</div>

<style>
.card {
  min-height: 200px;
  max-height: 400px;
  background: #fff3e0;
  border: 1px solid #ccc;
}
</style>
<div class="card">最小/最大高さを持つカードコンポーネント。最大高さを超えるコンテンツはオーバーフローし、overflowプロパティで処理する必要があります。</div>

<style>
.layout {
  width: calc(100% - 300px);
  background: #e3f2fd;
  padding: 16px;
}

.sidebar {
  width: 300px;
  float: left;
  background: #fce4ec;
  padding: 16px;
  box-sizing: border-box;
}
</style>
<div class="layout">メインコンテンツ：幅 = 100% - 300px</div>

<style>
.visible {
  overflow: visible;
  background: #fce4ec;
  height: 50px;
}
.hidden {
  overflow: hidden;
  background: #e8f5e9;
  height: 50px;
}
.scroll {
  overflow: scroll;
  background: #fff3e0;
  height: 50px;
}
.auto {
  overflow: auto;
  background: #e3f2fd;
  height: 50px;
}
</style>
<div class="visible">表示エリア（オーバーフローはボックスの外側に表示）</div>
<div class="hidden">超過時にコンテンツがクリップされる（オーバーフロー非表示）</div>
<div class="scroll">コンテンツが収まってもスクロールバーが常に表示</div>
<div class="auto">コンテンツがオーバーフローした場合のみスクロールバーが表示</div>

<style>
.box {
  overflow-x: hidden;
  overflow-y: auto;
  width: 200px;
  height: 80px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}
</style>
<div class="box">水平方向のオーバーフローは非表示、垂直方向は自動スクロールで全コンテンツを表示するボックス要素</div>

<style>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  border: 1px solid #ccc;
  padding: 8px;
  background: #f9f9f9;
}
</style>
<div class="ellipsis">これは長いテキストで、コンテナの幅を超えると省略記号で切り捨てられます</div>

<style>
.avatar {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
  background: #e0e0e0;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
<div class="avatar">アバターコンテナ（円形クロップ）</div>

<style>
.scroll-box {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
  background: #fafafa;
}
</style>
<div class="scroll-box">
  <p>行1：スクロールコンテナは大きなコンテンツを表示できます</p>
  <p>行2：コンテンツが高さを超えるとスクロールバーが表示されます</p>
  <p>行3：スクロールして非表示のコンテンツを表示</p>
  <p>行4：overflow-y: autoで実装</p>
  <p>行5：コンテンツが多いほどスクロールも多くなります</p>
  <p>行6：コメントセクション、お知らせなどに適しています</p>
</div>

<style>
.clearfix {
  overflow: hidden;
  background: #e8eaf6;
  padding: 10px;
}
</style>
<div class="clearfix">フロートクリアコンテナ（overflow: hiddenがBFCをトリガー）</div>

<style>
.image-container {
  width: 300px;
  height: 200px;
  background: #f5f5f5;
  border: 2px dashed #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
<div class="image-container">画像コンテナ（実際の画像に置き換え）</div>

<style>
.calc-demo {
  width: calc(100% - 40px);
  height: calc(50vh - 60px);
  background: #e3f2fd;
  border: 1px solid #90caf9;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<div class="calc-demo">幅は自動的に40pxを引き算、高さはビューポートの半分から60pxを引いた値</div>