【🔰初心者向け】CSS入門：CSSのwidth（幅）とheight（高さ）の指定方法

ウェブページの要素のサイズをコントロールするために、CSSではwidth（幅）とheight（高さ）のプロパティを使用します。これらのプロパティを使うことで、要素の見た目やレイアウトを思い通りに調整することができます。この記事では、widthとheightの基本的な使い方を紹介します。

1. width（幅）の指定

widthプロパティは、要素の横幅を指定するために使用します。指定できる値には、ピクセル（px）、パーセンテージ（%）、エム（em）、ビュー幅（vw）などがあります。

ピクセルで指定

固定サイズを指定したい場合に使用します。

div {
    width: 200px; /* 横幅を200ピクセルに固定 */
}

---

パーセンテージで指定

親要素に対する割合で幅を指定します。レスポンシブデザインに適しています。

div {
    width: 50%; /* 親要素の幅の50%に設定 */
}

---

ビュー幅（vw）で指定

ブラウザのビューポートに対する割合で幅を指定します。全体のレイアウトを調整する際に便利です。

div {
    width: 80vw; /* ビューポートの幅の80%に設定 */
}

2. height（高さ）の指定

heightプロパティは、要素の縦の長さを指定するために使用します。widthと同様に、ピクセル、パーセンテージ、エム、ビュー高さ（vh）などを使って指定できます。

ピクセルで指定

div {
    height: 100px; /* 高さを100ピクセルに固定 */
}

---

パーセンテージで指定

親要素の高さに応じて、相対的に高さを指定します。

div {
    height: 50%; /* 親要素の高さの50%に設定 */
}

---

ビュー高さ（vh）で指定

ブラウザのビューポートの高さに基づいて高さを指定します。

div {
    height: 100vh; /* ビューポートの高さに合わせて100%に設定 */
}

3. 最小幅と最小高さ、最大幅と最大高さ

要素のサイズに制限を設けたい場合、min-width、min-height、max-width、max-heightプロパティを使用できます。

最小幅と最小高さ

要素が縮小しすぎないようにするための最低限のサイズを指定します。

div {
    min-width: 100px; /* 最小幅を100ピクセルに設定 */
    min-height: 50px; /* 最小高さを50ピクセルに設定 */
}

---

最大幅と最大高さ

要素が拡大しすぎないようにするための最大限のサイズを指定します。

div {
    max-width: 500px; /* 最大幅を500ピクセルに設定 */
    max-height: 300px; /* 最大高さを300ピクセルに設定 */
}

4. widthとheightの使いどころ

要素のサイズを固定する場合や、レスポンシブデザインに対応する場合など、widthとheightを適切に使い分けることで、より効果的なデザインが可能になります。また、最小・最大幅や高さを設定することで、レイアウトの破綻を防ぎ、ユーザーにとって見やすいページを作成することができます。