一つ前の章ではボックス配置の基礎について学習しました。
今回はボックスサイズの変更方法について見ていきましょう。
Lesson１：HTML入門編
Lesson２：CSS入門編
Lesson３：CSS応用編
・Lesson3-1：ボックス配置の基礎を理解しよう
・Lesson3-2：ボックスサイズを変更しよう ◁今回はココ
・Lesson3-3：ボックスを自在に配置しよう
・Lesson3-4：画像を自在に配置しよう
・Lesson3-5：画像のスタイルを変更しよう
・Lesson3-6：背景画像を設定しよう
・Lesson3-7：リンクボタンを設置しよう
・Lesson3-8：リストとテーブルのスタイルを変更しよう
・Lesson3-9：CSS変数を理解しよう
・Lesson3-☆1：コピペして使える！カードレイアウト集
・Lesson3-☆2：HTML/CSSテンプレート６選
・Lesson3-☆3：CSSのリセット＆ノーマライズとは？
ウェブサイトを作成する際、ボックスのサイズを適切に設定することは非常に重要です。
ボックスのサイズを自由に調整することで、レイアウトを整えたり、画面サイズに応じてコンテンツを最適化したりできます。
CSSではさまざまな単位を使用してボックスの大きさを指定することができますが、それぞれの単位には特性があり、適切に使い分ける必要があります。
本記事では、CSSのボックスサイズの指定方法としてよく使用される「px（ピクセル）」「%（パーセント）」「em」「rem」の4つの単位について詳しく解説します。
これらの単位を理解し、適切に使い分けることで、レスポンシブデザインに対応した柔軟なレイアウトを作成できるようになります。
それでは、各単位の特徴や使い方を学んでいきましょう！
<<前のページ
HTML/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 に調整されます。
まとめ｜CSSの単位はどれを選ぶべきか？用途別おすすめガイド
一般的に、以下のルールに従うと適切なサイズ設定ができます。
- px は固定サイズに向いており、ボタンやアイコンなどに適用するのが良い。
- % はレスポンシブデザイン向けで、コンテンツやレイアウトの調整に適している。
- em はフォントサイズに基づいた調整ができ、ボタンや余白の設定に便利。
- rem はサイト全体のスケールを統一でき、基本フォントサイズを変更するだけでデザイン全体を調整可能。
それぞれの単位の特性を理解し、適切に使い分けることで、より柔軟でメンテナンスしやすいCSSを記述できるようになります。
練習問題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>
<<前のページ
HTML/CSSの記事一覧
次のページ>>
初めての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も、引き続き頑張ってください^^
FAQ｜ボックスサイズの変更に関するよくある質問
今回の記事に関する「よくある質問」とその解答について、以下の内容を参考にしてください。
- Q1. px、em、remの単位はどのように使い分ければ良いですか？
-
それぞれの単位は役割が異なります。pxは絶対的なサイズ指定、emは親要素のフォントサイズに比例、remはルート要素（html）のフォントサイズに比例します。用途やサイト全体のデザインルールに合わせて使い分けましょう。
- Q2. ボックスサイズを可変にしたい場合、どの単位を選ぶのが適していますか？
-
可変レイアウトやレスポンシブデザインでは、remやem、%などの相対単位を利用するのが適しています。特にremはルートサイズ基準で全体のバランスを整えやすいため、近年は多くのサイトで採用されています。
- Q3. emとremを併用すると、どんなメリットがありますか？
-
emはコンテナごとに柔軟にスケーリングでき、remは全体の基準を揃えやすいです。組み合わせることで、「全体の統一感を持ちつつ、特定の部分だけ相対的に拡大・縮小したい」といった細やかなデザインが可能になります。
よくあるトラブルと解決法｜ボックスサイズの変更編
今回の記事に関する「よくあるトラブル」とその原因、解決法について、以下の内容を参考にしてください。
emやremで指定したボックスのサイズが思った通りにならない
- トラブルの原因と対処法を見る
-
トラブルの原因例
親要素やルート要素のフォントサイズが予期せず変更されている場合があります。
トラブルの解決法
指定したemやremがどの要素を基準に計算されているかを確認しましょう。まず親要素やhtmlタグに設定されたfont-sizeを見直し、意図しないサイズ指定や継承がないか一つずつチェックしましょう。
px指定のボックスがレスポンシブで崩れる
- トラブルの原因と対処法を見る
-
トラブルの原因例
pxなどの絶対値指定が原因で、画面サイズの変化に対応できていないケースが多いです。
トラブルの解決法
ボックスサイズをpxで指定している箇所がないか探し、必要に応じて%、em、remなど相対的な単位への変更を検討しましょう。また、メディアクエリの設定漏れもないかあわせて見直しましょう。
remで指定したはずなのに一部のサイズだけ反映されない
- トラブルの原因と対処法を見る
-
トラブルの原因例
上書きするスタイルや!important、またはセレクタの優先順位の影響で、意図したサイズ指定が適用されていない場合があります。
トラブルの解決法
サイズが反映されていない要素のCSSルールを順番に確認し、競合や!importantによる上書きがないかを調べましょう。style属性や、外部CSSファイル・コンポーネント単位の設定も含めて調査することで、意図した指定が反映されていない原因を特定できます。
<<前のページ
HTML/CSSの記事一覧
次のページ>>