こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
CSSでレイアウトを組んでいると、「pxと%ってどう違うの？」「emとremって結局どっちを使えばいいの？」と迷うことはありませんか？
単位の違いを理解していないと、デザインが崩れたり、レスポンシブ対応がしづらくなったりすることもあります。
そこで今回は、初心者が陥りやすいCSSの単位の使い方を徹底解説します！
それぞれの単位の特徴や使いどころ、具体例を詳しく解説するので、ぜひ参考にしてください。
1. px（ピクセル） – 絶対値でサイズを指定
px（ピクセル）は、画面上の絶対的なサイズを指定する単位です。
【特徴】
- ブラウザのデフォルト設定に関係なく、指定したサイズで表示される
- デザインが固定されるため、レイアウトが崩れにくい
- レスポンシブデザインには向いていない
【具体例】
例えば、ボタンのサイズを固定する場合、pxを使うとデザインが統一されます。
.button { width: 200px; height: 50px; font-size: 16px; } ボタンのサイズが一定なので、画面サイズに左右されずに表示されます。
【pxの使いどころ】
- ボーダーやアイコンなど、**固定サイズで表示したい要素**
- フォントサイズを一律にしたいとき
2. %（パーセント） – 親要素に対する相対値
%（パーセント）は、親要素のサイズに対する割合を指定する単位です。
【具体例】
例えば、コンテンツの横幅をレスポンシブ対応したい場合、%を使うと画面サイズに応じて自動調整されます。
.container { width: 80%; /* 親要素の80%の幅 */ } これにより、親要素が変化してもレイアウトが調整されます。
3. em（エム） – 親要素のフォントサイズに依存
em（エム）は、親要素のフォントサイズを基準にした相対単位です。
【具体例】
親要素のフォントサイズが16pxの場合、1.5emは24pxになります。
.parent { font-size: 16px; } .child { font-size: 1.5em; /* 16px × 1.5 = 24px */ } このように、親要素のフォントサイズに応じて自動調整されます。
4. rem（レム） – ルート要素（html）に依存
rem（レム）は、htmlタグのフォントサイズを基準にした単位です。
【具体例】
html { font-size: 16px; } .text { font-size: 2rem; /* 16px × 2 = 32px */ } このように、htmlのフォントサイズに影響されるため、統一したデザインが可能になります。
5. vw・vh（ビューポートの幅・高さ）
vw（ビューポート幅）とvh（ビューポート高さ）は、画面のサイズを基準にする単位です。
【具体例】
例えば、フルスクリーンのセクションを作る場合、100vhを使うと画面の高さ全体をカバーできます。
.full-screen { width: 100vw; height: 100vh; } これにより、ウィンドウサイズに応じてダイナミックなレイアウトを作成できます。
まとめ
- px – 絶対値で固定サイズを指定
- % – 親要素に対する割合でサイズを調整
- em – 親要素のフォントサイズ基準
- rem – ルート要素のフォントサイズ基準
- vw/vh – ビューポートの幅・高さに対する割合
CSSの単位を適切に使い分けることで、柔軟でレスポンシブなデザインが可能になります！
ぜひ、用途に合わせて使い分けてみてください。
- 実店舗の宣伝のためにホームページがほしい！
- サイトをリニューアルしたい
- スマホでも綺麗にサイトを表示したい
- 予算が少ないからきちんと制作してもらえるか不安
- ネットでの集客は成果が上がるのかわからない
そのお悩み全て解決します！
・個人だから他のWeb制作会社よりも圧倒的に安い！
・お客様に寄り添った完全オーダーメイド
お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。
一緒に素敵なWebサイトを作りましょう！
