CSSのwidthとheightの基本！初心者でもわかる単位の使い分け

1. widthとheightとは？

1. widthとheightとは？

CSSのwidthは要素の横幅、heightは縦の高さを指定するプロパティです。これを使うことで、画像、ボタン、divなどの大きさを自由に調整できます。widthとheightを指定しない場合、要素は内容に合わせて自動的に大きさが決まります。

2. 単位の種類と基本的な使い方

2. 単位の種類と基本的な使い方

CSSで大きさを指定するときに使う主な単位はpx、%、em、remなどがあります。

• px（ピクセル）：画面上の点の数を指定。固定サイズに便利。例：width:200px;
• %（パーセント）：親要素に対する割合で指定。画面幅に応じて大きさを変えたい場合に便利。例：width:50%;
• em：要素のフォントサイズに応じた相対単位。文字サイズに連動させたいときに使います。
• rem：ルート要素のフォントサイズに基づく相対単位。emより予測しやすくレスポンシブ対応に向いています。

3. widthとheightの基本指定例

3. widthとheightの基本指定例

<style>
    .box-px {
        width: 200px;
        height: 100px;
        background-color: lightblue;
    }
    .box-percent {
        width: 50%;
        height: 150px;
        background-color: lightgreen;
    }
</style>

<div class="box-px">固定サイズのボックス</div>
<div class="box-percent">親幅の半分のボックス</div>

4. pxと％の使い分けのコツ

4. pxと％の使い分けのコツ

画面サイズに応じて大きさを変えたい場合は%、固定したい場合はpxを使います。例えば、画像の表示領域を画面いっぱいに広げたいときはwidth:100%を使います。一方、ロゴなど正確なサイズを維持したい場合はpx指定が便利です。

5. 高さの自動調整とaspect-ratio

5. 高さの自動調整とaspect-ratio

heightを指定せずにwidthだけを決めると、画像や要素の縦横比を自動で維持できます。近年はaspect-ratioを使うと、ボックスの縦横比を保ちながらサイズ調整が可能です。

<style>
    .image-box {
        width: 300px;
        aspect-ratio: 16/9;
        background-color: lightcoral;
    }
</style>
<div class="image-box">16:9のボックス</div>

6. 高さ指定の注意点

6. 高さ指定の注意点

要素の内容が増える場合、高さを固定すると内容がはみ出すことがあります。特にテキストが入るボックスでは、heightをautoにすることで自然に高さが広がります。flexboxやgridレイアウトと組み合わせるとより柔軟にデザインできます。

7. 初心者でも失敗しにくい単位の選び方

7. 初心者でも失敗しにくい単位の選び方

• ロゴやボタンなど正確なサイズを維持したい場合はpx
• 画面に応じて幅を変えたい場合は%やvw（viewport width）
• 文字サイズに連動させたい場合はemやrem
• 縦横比を保ちたい場合はaspect-ratioと組み合わせて高さを調整

8. 実践のポイント

8. 実践のポイント

CSSでwidthとheightを使うときは、まず固定サイズで試してみて、次にパーセントや相対単位に置き換えるとレスポンシブデザインに対応しやすくなります。また、heightは必要な場合のみ指定し、autoで自然な高さ調整を活用するとレイアウトが崩れにくくなります。

まとめ

まとめ

ウェブデザインの基礎となる「width」と「height」の使い方について、その役割から応用的なテクニックまで幅広く解説してきました。要素のサイズ指定は、単に数値を入力するだけでなく、デバイスの画面サイズやユーザーの閲覧環境に合わせて柔軟に変化させることが、現代のレスポンシブなウェブ制作において極めて重要です。特に「px」と「%」の使い分け、さらには「rem」や「vh/vw」といった現代的な単位を適切に選択することで、レイアウトの崩れを防ぎ、メンテナンス性の高いコーディングが可能になります。

レスポンシブデザインにおける幅と高さの戦略

以前は固定幅での設計が主流でしたが、スマートフォンやタブレットの普及により、可変的なサイズ指定が求められるようになりました。例えば、メインのコンテンツエリアには「max-width」を設定してPCでの広がりすぎを抑えつつ、モバイル端末では「width: 100%;」で画面いっぱいに表示させるといった工夫が一般的です。高さについては、できるだけブラウザの自動計算（height: auto;）に任せることで、文字数が増えた際の内容の突き抜けを回避できます。

画像とアスペクト比の重要性

画像の表示においても、widthとheightの概念は欠かせません。画像の歪みを防ぐためには、どちらか一方を固定し、もう一方をautoにする、あるいは「object-fit」プロパティを併用してボックス内での収まり方を制御します。近年登場した「aspect-ratio」は、動画コンテンツやカード型のレイアウトを作成する際に、特定の比率を維持したままリサイズできるため、非常に重宝するツールとなっています。

さらに理解を深めるための実践サンプル

ここでは、学んだ内容を活かして、レスポンシブなカードレイアウトのサンプルコードを作成してみましょう。固定サイズと可変サイズを組み合わせることで、どのように表示が変化するかを確認してください。

<style>
	.container {
		display: flex;
		gap: 20px;
		padding: 20px;
		background-color: #f8f9fa;
	}
	.card-item {
		width: 300px;
		background-color: #ffffff;
		border: 1px solid #ddd;
		border-radius: 8px;
		overflow: hidden;
	}
	.card-image {
		width: 100%;
		height: 150px;
		object-fit: cover;
		background-color: #eee;
	}
	.card-content {
		padding: 15px;
	}
	.card-content h3 {
		margin: 0 0 10px 0;
		font-size: 1.2rem;
	}
	.card-content p {
		font-size: 0.9rem;
		color: #666;
		height: auto;
	}
	.responsive-box {
		width: 80%;
		margin: 20px auto;
		background-color: #e9ecef;
		padding: 20px;
		text-align: center;
		border-radius: 10px;
	}
</style>

<div class="container">
	<div class="card-item">
		<img src="/img/sample150-100.jpg" alt="サンプル画像" class="card-image">
		<div class="card-content">
			<h3>固定幅のカード</h3>
			<p>widthを300pxに固定しています。PCで見ると安定したサイズになります。</p>
		</div>
	</div>
</div>

<div class="responsive-box">
	<h3>可変幅のボックス</h3>
	<p>widthを80%に設定しています。画面の幅を変えると、このボックスの横幅も一緒に伸び縮みします。</p>
</div>

今後の学習ステップ

widthやheightの基本をマスターしたら、次は「min-width」や「max-height」といった、制限を加えるプロパティを学んでみましょう。これらを使えるようになると、「最小でもこれくらいの大きさは保ちたい」「最大でもここまでしか広げたくない」という細かな制御が可能になります。また、FlexboxやGrid Layoutといった最新のレイアウト手法と組み合わせることで、より高度で美しいウェブサイトを構築できるようになります。