WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： かなでん
カテゴリー： マークアップ >CSS

widthやfont-sizeなど、CSSプロパティには、px・%・emなどさまざまな単位があります。

また、単位によって得意なこと・不得意なことも変わってきます。
「ここってこの単位でいいのかな？」と迷ったことがある方も多いのではないでしょうか。

今回は、それぞれの単位の特徴や使いどころについて、初心者向けに解説していきます。

CSSプロパティの単位を使い分けるメリット

単位の特徴を理解して使い分けると、以下のようなメリットがあります。

レスポンシブ対応がしやすくなる

スマートフォン・PC・タブレットなど、画面サイズに応じてレイアウトを自然に調整しやすくなります。

保守性、メンテナンス性の向上

例えばremを使っていれば、基準となる文字サイズを1か所変更するだけで、サイト全体のサイズを調整することができます。後からの修正やデザイン変更がぐっと楽になります。

次のセクションからそれぞれの単位の特徴を見ていきましょう！

px

特徴

画面の「1ドット」を基準にする単位です。周りの環境に左右されず、指定した数値の大きさに固定されます。

メリット・デメリット

メリット…直感的に扱いやすい

デメリット…画面サイズに合わせて自動で縮まないため、
レスポンシブ対応で崩れやすくなる

具体的な使いどころ

• borderの太さ
• max-width,min-widthの指定
• 小さな余白
• 細かい位置調整
• 一定のサイズで表示させたいとき

など

％

特徴

親要素を基準（＝100%）にしたときの、割合（パーセンテージ）でサイズを決める単位です。画面の大きさが変わっても、常に同じ比率で表示させたい場合に役立ちます。

メリット・デメリット

メリット…親要素のサイズが変われば自動で一緒に伸び縮みするため、レスポンシブ対応がしやすい

デメリット…親要素のサイズに依存するため、構造を変えると意図せずサイズが変わってしまうことがある

具体的な使いどころ

• width:100%;
• 可変レイアウト
• 横幅調整

など

em

特徴

自分、または一番近くの親要素の文字サイズを基準（＝1）にして変化する単位です。

メリット・デメリット

メリット…文字の大きさに自動で連動するため、文字が大きくなってもデザインが崩れない。

デメリット…入れ子（ネスト）が深くなると、サイズが予期せず巨大化したり複雑になってしまうことがある。（親要素にもemが指定されている場合、子要素のemはサイズが掛け算式に膨れ上がってしまう。）

具体的な使いどころ

• 文字間隔
• 見出しの行間
• ボタン内の余白
• テキストの横に置くアイコン

など

rem

特徴

ルート（htmlタグ）に設定されている文字サイズ（デフォルトだと16px）を基準（＝1）にして変化する単位です。

メリット・デメリット

メリット…保守性が高い。htmlの文字サイズを1か所変えるだけで、サイト全体の文字や余白のバランスを保ったまま一斉にサイズ調整できる。

デメリット…直感的にサイズ感が掴みにくい。デザインツールから数値をそのままコピーできず、計算して変換する手間がかかる。

具体的な使いどころ

• 文字サイズ
• 文字の大きさに連動させたい余白

など

vw/vh

特徴

ブラウザの画面全体の幅（vw）、高さ（vh）をそれぞれ基準（＝100）にしたときの単位です。

メリット・デメリット

メリット…画面サイズに合わせて要素を自動で拡大・縮小できるためレスポンシブ対応しやすい。

デメリット…画面サイズが極端に変化すると、文字サイズが巨大化したり、逆に小さくなりすぎたりして読みにくくなる。また、PCブラウザでは縦スクロールバーも含めて100vwと計算されるため、意図した計算とズレやすい。

具体的な使いどころ

• ファーストビュー
• 画面いっぱいのレイアウト

など

まとめ

今回の内容をまとめると、以下のようになります。

• px→サイズを固定して表示させたいときに使う。画面幅を縮めても影響がでにくい、微調整などに使いやすい。
• %→親要素に合わせて伸び縮みさせたいときによく使う。
• rem→サイト全体で統一したサイズ感にしたいとき、まとめて管理したいときに使う。
• vw/vh→画面全体を基準にしたいときに使う。

一気に覚えようとすると、なかなか難しいですよね。
実際のコーディングを通して、それぞれの単位がどのような場面に適しているのかを少しずつ理解しながら、感覚を身につけていきましょう。