一つ前の章ではボックス配置の基礎について学習しました。
今回はボックスサイズの変更方法について見ていきましょう。
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ボックスサイズの単位を理解しよう｜px・%・em・remの基本解説
CSSではボックスのサイズを指定する際にさまざまな単位を使用することができますが、それぞれの単位には特性があり、状況に応じて適切に使い分けることが重要です。
ここでは代表的な4つの単位「px（ピクセル）」「%（パーセント）」「em」「rem」について詳しく解説します。
px（ピクセル）とは｜CSSでの絶対単位の基本
「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 であれば、10rem は 160px になります。
CSS単位の選び方と実践例｜px・%・em・remの使い分けガイド
CSSのボックスサイズを指定する4つの主要な単位（px、%、em、rem）について学びました。
しかし、どの単位をどの場面で使用すべきかを理解していないと、意図しないレイアウト崩れが発生することがあります。
本章では、各単位の適切な使用場面を具体例とともに解説します。
CSS単位ごとの使用場面と適用例
各単位の適切な使用場面は以下の通りです。
| 単位 | 使用すべき場面 | 適用例 |
|---|---|---|
| px | 固定サイズを維持したい要素 | ボタン、アイコン、枠線の幅 |
| % | 親要素に応じたサイズ調整が必要 | レスポンシブなレイアウト、コンテンツ幅 |
| em | 要素のフォントサイズに応じた調整 | インライン要素の余白、ボタンサイズ |
| rem | 全体のフォントサイズに影響を受ける要素 | レスポンシブデザインの基本設定、ヘッダーの高さ |
実践例｜多様な単位を組み合わせてみよう
４つの単位の使用例をそれぞれ紹介します。
固定サイズが必要な要素（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-size を 18px に変更すると、自動的に h1 は 36px に調整されます。
単位の組み合わせパターンとその実例（em, rem, %の併用）
CSSでは、em・rem・%などの単位を組み合わせて使うことで、より柔軟で再利用性の高いデザインが可能になります。
それぞれの単位の特性を理解し、適切な場面で使い分けることが重要です。
ここでは実際の組み合わせ例を交えて、どのように活用するかを解説します。
rem：サイト全体のスケーリングに適しているem：コンポーネント内の相対的なサイズ調整に便利%：親要素の大きさに応じた柔軟なレイアウトを実現
例：カードレイアウトで単位を使い分ける
以下のコードはrem・em・%を組み合わせて、レスポンシブなカードレイアウトを作成する例です。
コードをコピーしてブラウザ表示してみましょう。
html {
font-size: 16px; /* 1rem = 16px */
}
.container {
width: 80%; /* 親要素に対して80%の幅 */
padding: 2rem; /* ルート基準で32pxの余白 */
}
.card {
font-size: 1.25rem; /* 20px (16px × 1.25) */
padding: 1em; /* cardのfont-size基準で20pxの余白 */
margin-bottom: 2%; /* 親要素の高さに対して2%の余白 */
border: 2px solid #ccc;
border-radius: 0.5rem; /* 8px (16px × 0.5) */
}remは全体のスケールを調整する場合に使うことで、一貫性を保てます。emは親要素に依存するため、コンポーネント内の調整に向いています。%は親要素基準で可変するため、レスポンシブレイアウトに便利です。
単位の組み合わせによるサイズ比較例
異なる単位がどのようにサイズに影響を与えるのか、具体的な数値で比較してみましょう。
特にremやemは親要素の影響を受けるため、実際の動きを理解することが重要です。
| 単位 | 親要素サイズ | 設定値 | 計算結果 |
|---|---|---|---|
px | 無関係 | 20px | 常に20px |
rem | html基準 | 1.25rem | 20px (16px × 1.25) |
em | 親要素基準 | 1.5em | 親要素font-sizeが20pxなら30px |
% | 親要素基準 | 50% | 親要素の半分の幅 |
単位を組み合わせた実践的な使い分け
実際のウェブデザインでは、状況に応じてrem・em・%などの単位を組み合わせて使うことが一般的です。
それぞれの単位の特性を活かしたおすすめの使い分けを、シーン別にまとめました。
| シーン | おすすめの単位 | 理由 |
|---|---|---|
| 全体レイアウト | %・rem | 画面サイズやルートフォントに応じて柔軟に調整可能 |
| コンポーネントの余白 | em | 親要素に対して相対的な余白を確保 |
| フォントサイズ | rem | ルートに基づき全体の文字サイズを統一 |
| ボーダーや影の微調整 | px | デザインが崩れないよう正確に調整 |
まとめ｜CSSの単位はどれを選ぶべきか？用途別おすすめガイド
一般的に、以下のルールに従うと適切なサイズ設定ができます。
- px は固定サイズに向いており、ボタンやアイコンなどに適用するのが良い。
- % はレスポンシブデザイン向けで、コンテンツやレイアウトの調整に適している。
- em はフォントサイズに基づいた調整ができ、ボタンや余白の設定に便利。
- rem はサイト全体のスケールを統一でき、基本フォントサイズを変更するだけでデザイン全体を調整可能。
それぞれの単位の特性を理解し、適切に使い分けることで、より柔軟でメンテナンスしやすいCSSを記述できるようになります。
FAQ｜CSSのボックスサイズに関するよくある質問
- Q1. px・em・remのどれを使えばいいのですか？
-
基本的にレイアウト全体は
rem、部分的な調整はem、固定サイズにはpxを使うと良いでしょう。特にレスポンシブ対応を考える場合は、
remや%が便利です。この記事内の「CSS単位ごとの使用場面とベストプラクティス」をご参照ください。
- Q2. emとremの違いがわかりません。具体的な例を教えてください。
-
emは親要素のフォントサイズを基準に、remはルート要素（html）のフォントサイズを基準にします。例えば、htmlが16pxの場合：font-size: 2em;→ 親要素の2倍のサイズfont-size: 2rem;→ 常に32px（16px × 2）
具体的な実践例は本記事内の「実践的な使用例」をご覧ください。
- Q3. ボックスサイズを%で指定したら思ったより小さくなりました。なぜですか？
-
%は親要素のサイズを基準とするため、親要素が小さい場合はボックスも小さくなります。親要素が何かを確認し、必要なら親要素のサイズを調整しましょう。
ボックスサイズの基準がわからない場合は「Lesson3-1：ボックス配置の基礎」を参照してください。
- Q4. 単位を混ぜて使っても大丈夫ですか？どんな時に使い分けるべきですか？
-
はい、場面によって単位を混ぜて使うのが一般的です。例えば：
- 全体の幅:
%やrem（レスポンシブ対応） - パディング・マージン:
em（親要素に合わせる） - 枠線や影などの微調整:
px（正確な調整）
- 全体の幅:
- Q5. スマホやタブレットでボックスサイズが崩れます。どうすればいいですか？
-
単位だけでなく、メディアクエリーを使って画面サイズごとにデザインを調整するのが重要です。
メディアクエリーは「Lesson5：メディアクエリー編」で詳しく解説していますので、ぜひ併せてご覧ください。
練習問題3-2：ボックスサイズを変更しよう
以下のHTMLコードに対して、条件を満たすCSSのボックスサイズを指定してください。
ファイル名はそれぞれ、training3-2.htmlとtraining3-2.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学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。
Lesson3-2のまとめノートと練習問題を追加しよう
このLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。
１．練習問題の解答を保存
練習問題3-2で作成した２つのファイルを学習フォルダの中に保存しましょう。
- training3-2.html ⇒ Lesson3フォルダに保存
- training3-2.css ⇒ Lesson3フォルダの中のstyleフォルダに保存
トップページからリンクで飛べるようになりますので確認しましょう。
２．まとめノートを作成・保存
下記のHTMLコードは、このLesson3-2で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite3-2.html」という名前で保存し、「lesson3（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson3-2</title> <link rel="stylesheet" href="style/styles-lesson3.css"> </head> <body> <h1>Lesson3-2：ボックスサイズを変更しよう</h1> <div class="container"> <p> Webサイトを作成する際、ボックスのサイズを適切に設定することは、レイアウトを整えたり、 画面サイズに応じたデザインを調整したりするために重要です。CSSでは、さまざまな単位を 使ってボックスの大きさを指定できますが、それぞれの単位には特性があるため、適切に 使い分ける必要があります。本記事では、「<code>px</code>」「<code>%</code>」「<code>em</code>」 「<code>rem</code>」の4つの単位について詳しく解説します。 </p> <h2>このレッスンで学習した内容</h2> <h3>px（ピクセル）</h3> <ul> <li>画面上の最小単位で、絶対的なサイズ指定が可能</li> <li>デザインの崩れが少ないが、レスポンシブデザインには不向き</li> </ul> <h3>%（パーセント）</h3> <ul> <li>親要素のサイズに対する割合として指定する単位</li> <li>親要素に応じてサイズが変化するため、レスポンシブデザインに適している</li> </ul> <h3>em（相対サイズ）</h3> <ul> <li>親要素のフォントサイズを基準にしてサイズを決定</li> <li>フォントサイズの変更に柔軟に対応できるが、入れ子構造では計算が複雑になる</li> </ul> <h3>rem（ルート相対サイズ）</h3> <ul> <li>ルート要素（<code><html></code>）のフォントサイズを基準とする単位</li> <li>一貫したサイズ設定ができ、レスポンシブデザインにも適している</li> </ul> <h2>トピック・豆知識</h2> <h3>emとremの違い</h3> <p> <code>em</code> は親要素に依存するため、ネストが深いと計算が複雑になることがあります。<br> <code>rem</code> はルート要素を基準とするため、デザインの統一性を保ちやすくなります。 </p> <h3>レスポンシブデザインに適した単位</h3> <p> <code>px</code> は固定サイズのボタンや枠線などに適していますが、<code>%</code> や <code>rem</code> を使うと、 デバイスに応じた柔軟なレイアウトを実現できます。 </p> <h2>まとめ</h2> <p> ボックスサイズの指定には、それぞれの単位の特性を理解し、適切に使い分けることが重要です。<br> <code>px</code> は固定サイズ、<code>%</code> は親要素に対する割合、<code>em</code> はフォントサイズに対する相対サイズ、 <code>rem</code> はルート要素に対する相対サイズとして活用できます。<br> これらを適切に組み合わせることで、柔軟で管理しやすいデザインを作成できるようになります。 </p> <p><a href="../MyWebsite.html">トップページへ戻る</a></p> </div> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </body> </html>これでLesson3-2の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^
<<前のページ
HTML/CSSの記事一覧
次のページ>>
この記事への質問・コメント
この記事を作成するにあたりAIの力を借りています。
問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。