CSSで要素の幅と高さを指定する方法！height・widthプロパティの基本と実例
CSSの height プロパティと width プロパティは、それぞれ要素の高さと幅を指定するために使用されます。また、max-height、max-width、min-height、min-width プロパティを使えば、これらのサイズに上限値や下限値を設定することも可能です。
基本構文
CSSの height および width プロパティの基本的な書き方は以下の通りです。
Selector {
height: /*値*/
width: /*値*/
}
要素の実際のサイズの計算方法
要素の実際の表示サイズは、width や height の値だけでなく、パディング（padding）、ボーダー（border）、マージン（margin）も含めて計算されます。具体的な計算式は次の通りです。
| ボックスサイズ | 計算方法 |
|---|---|
| 合計幅（Total Width） | width + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
| 合計高さ（Total Height） | height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
サンプルコード①：width と height の基本指定
以下の例では、width と height を使ってコンテナのサイズを指定し、flexbox で子要素を横並びに配置しています。
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
margin: auto;
width: 400px;
height: 80px;
border: 2px solid black;
display: flex;
border-radius: 15px;
}
#demo div {
flex: 1;
border: thin dotted;
border-radius: 50%;
line-height: 60px;
text-align: center;
}
#orange {
box-shadow: inset 0 0 8px orange;
}
#green {
box-shadow: inset 0 0 8px green;
}
#blue {
box-shadow: inset 0 0 8px blue;
}
#red {
box-shadow: inset 0 0 8px red;
}
</style>
</head>
<body>
<div id="demo">
<div id="orange">Somebody</div>
<div id="green">that I</div>
<div id="blue">used</div>
<div id="red">to know</div>
</div>
</body>
</html>
表示結果
このコードを実行すると、指定した幅400px・高さ80pxのコンテナ内に、4つの円形要素が均等に並んで表示されます。
サンプルコード②：max-width と max-height によるサイズ制限
次の例では、max-width と max-height を使って要素の最大サイズを制限しています。内容が上限を超える場合は、overflow: auto; によってスクロールバーが表示されます。
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 10% 35%;
box-shadow: 0 0 6px 1px black;
max-width: 200px;
max-height: 150px;
overflow: auto;
}
</style>
</head>
<body>
<h2>Java 8 Features</h2>
<article>
Lambda expression adds functional processing capability to Java.
Referencing functions by their names instead of invoking them directly.
Interface to have default method implementation.
New compiler tools and utilities are added like ‘jdeps’ to figure out dependencies.
New stream API to facilitate pipeline processing.
Improved date time API.
Emphasis on best practices to handle null values properly.
Nashorn, a Java-based engine to execute JavaScript code.
</article>
</body>
</html>
表示結果
このコードを実行すると、テキスト量が多いため、最大幅200px・最大高さ150pxに収まるようにスクロール可能な領域として表示されます。
まとめ
- width / height：要素の幅と高さを直接指定する基本プロパティ。
- max-width / max-height：要素がそれ以上大きくならないよう上限を設定。
- min-width / min-height：要素がそれより小さくならないよう下限を設定。
- 実際の表示サイズは、padding・border・margin を含めた合計で計算される点に注意が必要です。
-
CSSのブロックレベル要素とブロックボックスの仕組みを徹底解説
CSSにおいて、displayプロパティが「block」「list-item」「table」のいずれかに設定されている要素をブロックレベル要素と呼びます。これらの要素は、自身の前後に強制的な改行を挿入するため、常に新しい行から始まり、親要素の利用可能な幅全体を占有するのが特徴です。 各ブロックレベル要素は「ブロックレベルボックス」を生成します。このボックスはページの配置スキーム（positioning scheme）の一部として機能し、子ボックスを内包することができます。 ブロックコンテナボックスとブロックボックスの違い ブロックコンテナボックスには、主に次の2種類があります。 ブロックレ
-
CSSのインラインレベル要素とインラインボックスの違いをわかりやすく解説
インラインレベル要素とは？ インラインレベル要素とは、CSSのdisplayプロパティが「inline」「inline-table」「inline-block」のいずれかに設定されている要素のことです。この種の要素は、自身の前後で強制的な改行を行いません。また、各インラインレベル要素は、配置スキームの一部として振る舞うと同時に、子ボックスを内包する「インラインレベルボックス」を生成します。 インラインボックスとは？ インラインボックスとは、その内容がインライン整形コンテキスト（inline formatting context）に従って表示されるボックスのことです。インラインボックスは、行の