CSS: CSS幅、高さ、オーバーフロー
最終更新：2026-10-13
1. 幅と高さ
(1) 寸法プロパティ早見表
| プロパティ | よく使う値 | 用途 |
|---|---|---|
width |
300px、50%、50vw、auto |
要素のコンテンツ幅 |
height |
200px、50%、50vh、auto |
要素のコンテンツ高さ |
min-width |
320px、50% |
最小幅（小さすぎるのを防止） |
max-width |
1200px、80% |
最大幅（レスポンシブでよく使う） |
min-height |
200px、100vh |
最小高さ |
max-height |
400px |
最大高さ（超えるとオーバーフロー） |
overflow |
visible、hidden、scroll、auto |
オーバーフローしたコンテンツの処理方法 |
overflow-x |
visible、hidden、scroll、auto |
水平方向のオーバーフロー制御 |
overflow-y |
visible、hidden、scroll、auto |
垂直方向のオーバーフロー制御 |
(2) widthとheight
widthとheightは要素のコンテンツエリアの寸法を設定します：
▶ サンプル
▶ 試してみよう(3) よく使う単位
▶ サンプル
▶ 試してみよう(4) min-width / max-width
要素の最小/最大幅を制限し、レスポンシブデザインでよく使用します：
▶ サンプル
▶ 試してみよう(5) min-height / max-height
▶ サンプル
▶ 試してみよう2. calc()関数
calc()は、プロパティ値で数学的計算（加算、減算、乗算、除算）を可能にするCSS関数です。最大の利点は異なる単位を混在できることです。
📌 calc()ルール：
+と-は両側にスペースが必要（calc(100% - 20px) ✅、calc(100%-20px) ❌）、*と/のスペースは任意です。
▶ サンプル
▶ 試してみよう(1) よく使うケース
- サイドバー + メインコンテンツ:
.main { width: calc(100% - 300px); }残りのスペースに適応 - 等間隔カード:
.card { width: calc((100% - 40px) / 3); }3カラムで20pxのギャップ - レスポンシブフォント:
font-size: calc(14px + 0.5vw);ベースサイズ + ビューポート増分 - 精密な中央揃え:
left: calc(50% - 100px);transformの代替となる既知のオフセット
(2) calc()の互換性
calc()はIE11+、Chrome 26+、Firefox 16+、Safari 7+でサポートされており、モダンプロジェクトで安全に使用できます。calc()で文字列の連結を避けるだけです。
3. オーバーフロー制御
💡 overflow-xとoverflow-y： 水平方向と垂直方向のオーバーフローに異なる値を設定すると、一方が
autoに強制される場合があります。ベストプラクティスはoverflowの省略形を使用することです。
要素のコンテンツが設定された幅/高さを超えると、「オーバーフロー」が発生します。overflowプロパティは、オーバーフローしたコンテンツの処理方法を制御します。
(1) overflowの値
▶ サンプル
▶ 試してみよう(2) 各方向の制御
▶ サンプル
▶ 試してみよう(3) よく使うケース
1. テキストの省略
text-overflowと組み合わせて単一行テキストの切り捨て：
▶ サンプル
▶ 試してみよう2. 画像のクロップ
固定サイズのコンテナでオーバーフローを非表示にして画像を処理：
▶ サンプル
▶ 試してみよう3. スクロールコンテナ
固定高さのスクロール可能エリアを作成：
▶ サンプル
▶ 試してみよう4. フロートのクリア
親にoverflow: hiddenまたはoverflow: autoを設定すると、子のフロート効果をクリア：
▶ サンプル
▶ 試してみよう4. object-fit（画像/動画の適応）
object-fitは、<img>や<video>の置換要素がコンテナサイズに適応する方法を制御します：
▶ サンプル
▶ 試してみよう- cover: 比率を維持し、コンテナを埋め、余分をクロップ（最も一般的）
- contain: 比率を維持し、完全な画像を表示し、余白が残る可能性
- fill: 比率を維持せずにストレッチして埋める（歪む可能性）
- none: 元のサイズを維持
- scale-down: noneとcontainの小さい方を採用
5. CSSの寸法関数
(1) calc()
calc()は、CSSで動的な寸法計算を可能にし、異なる単位を混在できます：
▶ サンプル
▶ 試してみよう注意: 演算子の両側にはスペースが必要です。さもないと認識されません。
❓ よくある質問
Q height: 100%が効かないのはなぜですか？
A パーセントの高さは親の高さに相対的です。親の高さがauto（コンテンツで決定）の場合、子のheight: 100%は計算できません——親がまだ自身の高さを決定していないからです。パーセントの高さを機能させるには、親に明示的な高さの値が必要です。
Q max-width: 100%とwidth: 100%の違いは何ですか？
A width: 100%は要素を強制的に親の幅と等しくします。max-width: 100%は「親の幅を超えない」ことを意味します——要素が自然に小さければ、小さいままです。レスポンシブ画像にmax-width: 100%を使用するのがベストプラクティスです。
Q overflow: hiddenはオーバーフローしたコンテンツをすべて非表示にしますか？
A はい。overflow: hiddenは要素の寸法を超えるすべてのコンテンツをクリップします。オーバーフローしたコンテンツをスクロールする必要がある場合は、overflow: auto（必要時にスクロールバーが表示）またはoverflow: scroll（スクロールバーを常に表示）を使用してください。overflow: hiddenはフロートの問題を解決するためにBFC（ブロック整形コンテキスト）をトリガーするためにもよく使用されます。
📖 まとめ
- 要素の寸法とオーバーフロー動作を制御することは、レイアウトの基本です
width/heightは寸法を設定し、min-width/max-widthは範囲を制約し、overflowはオーバーフローしたコンテンツを処理しますobject-fit: coverは画像処理の強力なツールであり、calc()は柔軟な動的計算を提供します- これらのプロパティをマスターすると、あらゆる状況で要素の動作をより良く制御できます
📝 練習問題
- 「レスポンシブコンテナ」を作成してください——幅80%、最大幅1200px、最小幅320px、水平方向に中央揃え。
- 固定サイズの画像コンテナ（300×200）を作成し、大きな画像を
object-fit: coverで歪みなく埋めてください。 - 「単一行テキストの省略」と「複数行テキストのオーバーフロー」エフェクトを実装してください（ヒント：複数行は
-webkit-line-clampを使用）。 calc()を使用して「フル画面からナビゲーションバーの高さを引いた」レイアウトを実装してください。
