CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSディメンション（寸法）プロパティの使い方を徹底解説｜width・height・min-width・max-height

CSSディメンション（寸法）プロパティとは？

CSSでは、width（幅）、height（高さ）、max-height（最大の高さ）、min-width（最小の幅）といったディメンションプロパティを使用することで、要素のコンテンツボックスのサイズを細かく制御できます。レイアウトの崩れを防ぎ、柔軟で見やすいWebページを作るうえで欠かせないプロパティ群です。

主な寸法関連プロパティは以下のとおりです。

  • width / height：要素の幅・高さを指定する基本プロパティ
  • max-width / max-height：要素がそれ以上大きくならないよう上限値を指定
  • min-width / min-height：要素がそれより小さくならないよう下限値を指定

例1：CSS max-height プロパティ

まずは max-height を使った例を見てみましょう。画像を囲むコンテナに最大の高さを設定すると、その高さを超える部分は切り取られて表示されなくなります。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>CSS max-height</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
#containerDiv {
   margin: 0 auto;
   max-height: 150px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS max-height</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/machine_learning_with_python/images/machine-learning-with-python-mini-logo.jpg">
</div>
</fieldset>
</form>
</body>
</html>

実行結果

max-height を定義する前：

CSSディメンション（寸法）プロパティの使い方を徹底解説｜width・height・min-width・max-height

max-height を定義した後：

CSSディメンション（寸法）プロパティの使い方を徹底解説｜width・height・min-width・max-height

このように max-height: 150px; を指定することで、コンテナの高さが150pxを超えなくなり、画像のはみ出し部分が表示されなくなります。

例2：CSS min-width プロパティ

次に min-width の例です。ボタンをクリックするとJavaScriptによって2番目の要素へ最小幅「100%」が適用され、レイアウトがどのように変化するかを確認できます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>CSS min-width Property</title>
</head>
<style>
* {
   padding: 2px;
   margin:5px;
}
button {
   border-radius: 10px;
}
#containerDiv {
   width:70%;
   margin: 0 auto;
   padding:20px;
   background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
   text-align: center;
   border-radius: 10px;
}
.contentDiv{
   min-width:200px;
   border: 1px solid black;
}
</style>
<body>
<div id="containerDiv">
<div class="contentDiv">
This is paragraph 1 with some dummy text.
</div>
<div class="contentDiv">
This is paragraph 2 with some dummy text.
</div>
<div class="contentDiv">
This is paragraph 2 with some dummy text.
</div>
<button onclick="add()" class="btn">Set minWidth</button>
</div>
<script>
function add() {
   document.querySelectorAll('.contentDiv')[1].style.minWidth = "100%";
}
</script>
</body>
</html>

実行結果

「Set minWidth」ボタンをクリックする前：

CSSディメンション（寸法）プロパティの使い方を徹底解説｜width・height・min-width・max-height

「Set minWidth」ボタンをクリックした後：

CSSディメンション（寸法）プロパティの使い方を徹底解説｜width・height・min-width・max-height

ボタンをクリックすると、2番目の要素に min-width: 100% が適用され、親要素いっぱいの幅まで広がることが確認できます。

まとめ

ディメンションプロパティを活用すれば、要素のサイズを柔軟に制御でき、レスポンシブデザインやレイアウト崩れの防止にも役立ちます。特に min-* / max-* 系のプロパティは、コンテンツ量が変動する場合でもレイアウトを安定させるために非常に有効です。実際にコードを書きながら挙動を確かめてみてください。

  1. CSSのmarginプロパティとは？基本構文から実践的な使い方まで解説

    CSSのmarginプロパティとは CSSのmarginプロパティは、margin-top・margin-right・margin-bottom・margin-leftの4つのプロパティをまとめて指定できるショートハンド（一括指定）プロパティです。要素の外側に余白を設けることで、要素同士の間隔やページ端との距離を自由に調整できます。もちろん、各辺ごとに個別のマージンを設定することも可能です。 値の指定ルール marginプロパティでは、指定する値の数によって適用される方向が変わります。 値が1つ：上下左右すべてに同じ値が適用される 値が2つ：1つ目が「上下」、2つ目が「左右」に適用される

  2. CSSのclientHeight・offsetHeight・scrollHeightの違いと使い分けを徹底解説

    JavaScriptでDOM要素の高さを取得するときによく使われるのが、clientHeight、offsetHeight、scrollHeight の3つのプロパティです。いずれも要素の高さをピクセル単位で返しますが、パディング・ボーダー・はみ出したコンテンツの扱いがそれぞれ異なるため、用途に応じた使い分けが必要です。本記事では、各プロパティの特徴と違いを、サンプルコード付きでわかりやすく解説します。clientHeightとはclientHeight は、要素の「見えている内部領域」の高さを返すプロパティです。具体的には、コンテンツ部分と上下のパディングを合計した値になります。ボーダーやマ