こんにちは！

Webデザインでは、要素のサイズや間隔を指定する際にさまざまな単位が使われます。
初心者の方でも分かりやすいように、代表的な単位を実務での使われ方を交えながらご紹介します。

1. px（ピクセル）

ピクセルは最も基本的な単位で、ディスプレイ上の1つの点を表します。

• 使われる場面：固定幅を指定する場面（ボタンの高さやアイコンサイズなど）
• 実務でのアドバイス：細かい調整が必要な場面で便利です。一方で、画面サイズが変わったときの柔軟性が低いので注意しましょう。

2. %（パーセント）

%（パーセント）は親要素のサイズを基準にした相対的な単位です。

• 使われる場面：幅や高さを画面や親要素に合わせて柔軟に指定したい場合。
• 実務でのアドバイス：レスポンシブデザインに役立ちます。しかしながら、余白やパディングの指定では他の単位（pxやem）と組み合わせることが多いです。

例：

• 幅を親要素の50%に設定：width: 50%;

3. em（エム）

emは親要素のフォントサイズを基準にした相対的な単位です。

• 使われる場面：文字サイズや内側の余白（padding）の指定。
• 実務でのアドバイス：親要素のサイズ変更が子要素に影響を与えるため、想定外のサイズにならないよう注意。

例：親要素のフォントサイズが16pxの場合、

• 1em = 16px
• 2em = 32px

4. rem（ルートエム）

remは、ページ全体のルート要素（通常はhtmlタグ）のフォントサイズを基準にした単位です。

• 使われる場面：一貫性のあるサイズ指定（ヘッダーやボタンの余白など）。
• 実務でのアドバイス：親要素に影響されず、一貫性が保たれるため、emより使いやすい場合が多い。

例：ルート要素のフォントサイズが16pxの場合、

• 1rem = 16px
• 1.5rem = 24px

5. vw / vh（ビューポート幅・高さ）

vw（ビューポート幅）とvh（ビューポート高さ）は、画面全体の幅や高さを基準にした単位です。

• 使われる場面：レスポンシブデザイン（フルスクリーンのセクションや背景画像など）。
• 実務でのアドバイス：画面サイズに応じて変化するため、ダイナミックなレイアウトが必要な場面で便利。

例：

• 100vw = 画面の幅いっぱい
• 50vh = 画面の高さの半分

6. まとめ

固定幅が必要な場合はpxを使うのがおすすめです。
一方で、一貫性を重視したい場合はremが適しています。
また、レスポンシブデザインを考えるなら%やvw、vhを活用しましょう。

単位を正しく使い分けることで、より柔軟でユーザーに優しいWebデザインを実現できます。
「この場面ではどの単位を使うのがベストか？」を考える癖をつけることで、実務に直結するスキルアップにつながります。

ぜひ挑戦してみてください！