【CSS】レッスン3-02:ボックスサイズを変更しよう

一つ前の章ではボックス配置の基礎について学習しました。

今回はボックスサイズの変更方法について見ていきましょう。

Lesson3-1:ボックス配置の基礎を理解しよう
Lesson3-2:ボックスサイズを変更しよう ◁今回はココ
Lesson3-3:ボックスを自在に配置しよう
Lesson3-4:画像を自在に配置しよう
Lesson3-5:画像のスタイルを変更しよう
Lesson3-6:背景画像を設定しよう
Lesson3-7:リンクボタンを設置しよう
Lesson3-8:リストとテーブルのスタイルを変更しよう
Lesson3-9:CSS変数を理解しよう

ウェブサイトを作成する際、ボックスのサイズを適切に設定することは非常に重要です。

ボックスのサイズを自由に調整することで、レイアウトを整えたり、画面サイズに応じてコンテンツを最適化したりできます。

CSSではさまざまな単位を使用してボックスの大きさを指定することができますが、それぞれの単位には特性があり、適切に使い分ける必要があります。

本記事では、CSSのボックスサイズの指定方法としてよく使用される「px(ピクセル)」「%(パーセント)」「em」「rem」の4つの単位について詳しく解説します。

これらの単位を理解し、適切に使い分けることで、レスポンシブデザインに対応した柔軟なレイアウトを作成できるようになります。

それでは、各単位の特徴や使い方を学んでいきましょう!

<<前のページ HTML/CSSの記事一覧 次のページ>>

ボックスサイズの単位

CSSではボックスのサイズを指定する際にさまざまな単位を使用することができますが、それぞれの単位には特性があり、状況に応じて適切に使い分けることが重要です。

ここでは代表的な4つの単位「px(ピクセル)」「%(パーセント)」「em」「rem」について詳しく解説します。

px(ピクセル)とは

「px」は、ピクセル単位でサイズを指定する絶対的な単位です。

ピクセルとは画面上の最小の表示単位であり、width: 200px; のように指定すると、その要素は常に200ピクセルの幅を持ちます。

  • サイズが固定されるため、デザインが崩れにくい。
  • 予測しやすく、直感的に設定できる。
  • 画面サイズが変わっても要素のサイズは変わらないため、レスポンシブデザインには適していない。
.box-px {
    width: 200px;
    height: 100px;
    background-color: lightblue;
}

このコードではwidth: 200px; を指定しているため、要素の幅は常に200ピクセルになります。

%(パーセント)とは

「%」は親要素のサイズに対する割合として指定する相対的な単位です。

例えばwidth: 50%; と指定すると、親要素の幅の50%のサイズになります。

  • 親要素のサイズに応じて変化するため、レスポンシブデザインに適している。
  • 画面サイズが変わっても、柔軟に適応できる。
  • 親要素のサイズに依存するため、親要素のサイズが変わるとデザインが崩れる可能性がある。
.box-percent {
    width: 50%;
    height: 100px;
    background-color: lightgreen;
}

この場合.box-percent の幅は、親要素の幅の50%になります。例えば親要素がwidth: 600px; であれば、300px の幅になります。

em(相対サイズ)とは

「em」は、要素のフォントサイズを基準とする単位です。

例えばfont-size: 16px; width: 2em; の場合、ボックスの幅は 32px になります(16px × 2)。

  • フォントサイズに応じてスケールできるため、可読性を維持しやすい。
  • 要素ごとに異なる倍率を設定できる。
  • 親要素のフォントサイズが変更されると、意図しないサイズになる可能性がある。
  • ネスト(入れ子構造)が深くなると、計算が複雑になりやすい。
.box-em {
    font-size: 16px;
    width: 10em;
    height: 100px;
    background-color: lightcoral;
}

この場合、.box-em の幅は 160px になります(16px × 10)。

rem(ルート相対サイズ)とは

「rem」は、HTMLのルート要素(<html>)のフォントサイズを基準とする単位です。

例えばhtml { font-size: 16px; } と指定した場合、width: 2rem;32px となります。

  • ルート要素のフォントサイズを基準にするため、ネストの影響を受けない。
  • 一貫したサイズ指定が可能。
  • ルートのフォントサイズが変わると、すべてのrem指定のサイズが変化する。
.box-rem {
    width: 10rem;
    height: 100px;
    background-color: lightgoldenrodyellow;
}

この場合、ルート要素のフォントサイズが 16px であれば、10rem160px になります。

上記の4つのCSSコードを読み込んだボックスをブラウザに表示してみましょう。特にpxと%についてどのようになるか確認して下さい。

emとremについては、この結果だけではあまり価値が分からないかもしれません。次の章で正しい使い方を確認しましょう。

適切な単位の選び方と実践的な使用例

CSSのボックスサイズを指定する4つの主要な単位(px、%、em、rem)について学びました。

しかし、どの単位をどの場面で使用すべきかを理解していないと、意図しないレイアウト崩れが発生することがあります。

本章では、各単位の適切な使用場面を具体例とともに解説します。

各単位の適切な使用場面

各単位の適切な使用場面は以下の通りです。

単位 使用すべき場面 適用例
px 固定サイズを維持したい要素 ボタン、アイコン、枠線の幅
% 親要素に応じたサイズ調整が必要 レスポンシブなレイアウト、コンテンツ幅
em 要素のフォントサイズに応じた調整 インライン要素の余白、ボタンサイズ
rem 全体のフォントサイズに影響を受ける要素 レスポンシブデザインの基本設定、ヘッダーの高さ

実践的な使用例

4つの単位の使用例をそれぞれ紹介します。

固定サイズが必要な要素(px)

例えば、ボタンの大きさを固定する場合は px を使うのが適しています。

ユーザーがデバイスのフォントサイズを変更しても、ボタンのサイズが変わらないようにするためです。

.button {
    width: 150px;
    height: 50px;
    background-color: #007bff;
    color: white;
    text-align: center;
    line-height: 50px;
    border-radius: 5px;
}

この設定では、ボタンのサイズが 常に150px × 50px となります。

レスポンシブデザインでの調整(%)

% を使用すると、画面サイズや親要素に応じて柔軟にサイズを変えられます。

例えば、ウェブサイトのコンテンツの幅を適切に調整する場合に便利です。

.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
}

この設定ではcontainer の幅は 常に親要素の80% ですが、最大幅を 1200px に制限することで、大画面でも極端に広がりすぎるのを防ぎます。

フォントサイズに応じた調整(em)

em は要素のフォントサイズに基づいてサイズを調整したい場合に便利です。

例えばボタンのパディング(余白)をフォントサイズに応じて変化させることができます。

.button {
    font-size: 16px;
    padding: 0.5em 1em; /* フォントサイズに対して相対的 */
}

フォントサイズを 16px に設定すると、パディングは 8px 16px になりますが、フォントサイズが 20px に変更されると、自動的に 10px 20px に調整されます。

全体のスケーリングを統一する(rem)

rem はサイト全体のスケーリングを統一するために便利です。

例えばフォントサイズや主要なコンテンツの幅を rem で指定すると、ルートのフォントサイズを変更するだけで、全体のレイアウトを一括で調整できます。

html {
    font-size: 16px; /* ルートのフォントサイズ */
}

h1 {
    font-size: 2rem; /* 32px */
}

p {
    font-size: 1rem; /* 16px */
}

この設定ではh1 のフォントサイズが 32px になりますが、ルートの font-size18px に変更すると、自動的に h136px に調整されます。

まとめ|どの単位を選ぶべきか?

一般的に、以下のルールに従うと適切なサイズ設定ができます。

  • px は固定サイズに向いており、ボタンやアイコンなどに適用するのが良い。
  • % はレスポンシブデザイン向けで、コンテンツやレイアウトの調整に適している。
  • em はフォントサイズに基づいた調整ができ、ボタンや余白の設定に便利。
  • rem はサイト全体のスケールを統一でき、基本フォントサイズを変更するだけでデザイン全体を調整可能。

それぞれの単位の特性を理解し、適切に使い分けることで、より柔軟でメンテナンスしやすいCSSを記述できるようになります。

練習問題3-2:ボックスサイズを変更しよう

以下のHTMLコードに対して、条件を満たすCSSのボックスサイズを指定してください。

  • .box-px の幅を 固定サイズ 250px にする。
  • .box-percent の幅を 親要素の80% にする。
  • .box-em の幅を フォントサイズの3倍 にする(フォントサイズは 16px とする)。
  • .box-rem の幅を ルートフォントサイズの4倍 にする(ルートフォントサイズは 20px とする)。<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ボックスサイズの練習問題</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container">
        <div class="box-px">px</div>
        <div class="box-percent">%</div>
        <div class="box-em">em</div>
        <div class="box-rem">rem</div>
    </div>

</body>
</html>

初めてのWebサイトを作ろう3-2

このサイトの Lesson1-1(HTML学習の入り口) か Lesson2-1(CSS学習の入り口) からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ

この「初心者のためのプログラミングテキスト&問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

現在準備中です。暫くお待ちください。

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト&問題集トップへ戻る
    トップページへ戻る