先生と生徒の会話形式で理解しよう

生徒

「先生、CSSで画像やボックスの大きさを決める方法はありますか？」

先生

「あります。CSSではwidthとheightを使うことで、横幅と高さを簡単に設定できます。」

生徒

「単位ってpxや％がありますけど、どう使い分ければいいんですか？」

先生

「それでは、基本から単位の違いと使い方を丁寧に見ていきましょう！」

1. widthとheightとは？

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

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

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

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

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と％の使い分けのコツ

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

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>

ブラウザ表示