CSS

CSSのサイズ指定を完全マスター！width・height・単位を実践で学ぶ

Webページを作るとき、いろいろなもののサイズを調整することが多くあります。

例えば、横幅いっぱいに画像を表示したり、特定のボタンだけ小さくしたりといった調整です。

この記事では、width・height の基本と、Webでよく使われる単位について学びながら、実際に試していきましょう！

要素の幅を指定する（width プロパティ）

width とは？

width は、要素の横幅を指定するプロパティです。

次のように、さまざまな単位を使って指定できます。

実際に試してみよう！

次のHTMLを作成して、index.html として保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>widthの基本</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="width-100px">100pxの幅</div>
    <div class="width-50percent">親要素の50%の幅</div>
    <div class="width-10vw">画面幅の10%の幅</div>
</body>
</html>

CSS（style.css）

次に、CSSのコードを style.css に保存しましょう。

.width-100px {
    width: 100px;
    background-color: lightblue;
}

.width-50percent {
    width: 50%;
    background-color: lightcoral;
}

.width-10vw {
    width: 10vw;
    background-color: lightgreen;
}

widthの値（100px、50%、10vw）をいろいろと変えながら、イメージを掴んでみましょう。

要素の高さを指定する（height プロパティ）

height とは？

height は、要素の縦の高さを指定するプロパティです。

実際に試してみよう！

<div class="height-100px">高さ100px</div>
<div class="height-50vh">画面の50%の高さ</div>

CSS（style.css）

.height-100px {
    height: 100px;
    background-color: lightblue;
}

.height-50vh {
    height: 50vh;
    background-color: lightcoral;
}

widthの値（100px、50vw）をいろいろと変えながら、イメージを掴んでみましょう。

Webで使われる単位の種類

次に、WEB上でよく使う単位の種類について解説をします。

単位は大きく2つに分かれます。

  1. 絶対単位：この大きさ！とpxで指定する（5cm!みたいな指定方法。どこにいっても5cmは5cmで変わらない）
  2. 相対単位：何かに対してどれくらいという指定方法（画面の横幅の半分みたいな指定方法。画面の横幅はPCによって変わるので、何cmになるかは分からないが、とにかく半分にはなる）

絶対単位（px）

  • px（ピクセル）: 画面上のドットの数を基準とする。
  • 固定サイズでデザインしたいときに使う。

相対単位（%、em、rem、vw、vh）

単位 説明 使用例
% 親要素に対する割合 ボックスの幅を50%に設定
em 親要素のフォントサイズを基準 1.5em は 1.5倍のサイズ
rem ルート（html）のフォントサイズを基準 2rem は 2倍のサイズ
vw 画面幅の割合 50vw は画面幅の50%
vh 画面高さの割合 50vh は画面高さの50%

いろいろな単位を試してみよう！

以下のHTMLとCSSのコードをコピーして、自分で値を変更して試してみましょう。

HTMLファイル（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSSの単位を試そう</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSSの単位を試してみよう！</h1>
    <div class="box">このボックスのサイズを変更してみよう！</div>
</body>
</html>

CSSファイル（style.css）

次に、以下のCSSコードを style.css に保存してください。

.box {
    width: 50%;
    height: 20vh;
    background-color: lightgray;
    text-align: center;
    line-height: 50px;
    border: 1px solid black;
}

いろいろな単位を試そう！

以下のように、CSSの width や height の値を変更して、どの単位がどのように影響するか試してみましょう！

試せる値の例：
  • width: 100px; → 固定の100px幅にする
  • width: 75%; → 親要素の75%の幅にする
  • width: 10vw; → 画面幅の10%の幅にする
  • height: 50px; → 固定の高さにする
  • height: 100vh; → 画面の高さいっぱいにする

値をいろいろ変えて、どんなふうに動作するか確認してみましょう！

問題集

Q1. 要素の幅を指定するプロパティは？

  1. height
  2. width
  3. size

Q2. 画面全体の50%の幅を指定するには？

  1. width: 50px;
  2. width: 50%;
  3. width: 50vw;

Q3. 親要素のフォントサイズに対するサイズ指定は？

  1. em
  2. px
  3. vh

✅ 答え: Q1→2, Q2→3, Q3→1

まとめ

  • width で要素の横幅を指定できる
  • height で要素の高さを指定できる
  • 絶対単位（px）: 固定サイズで使う
  • 相対単位（%、em、rem、vw、vh）: 画面や親要素に対して調整できる
  • いろいろな単位を試して、どんな時に使うのが適切か学ぼう

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。