こんにちは。現場でフロントエンドの設計をしていると、CSSの単位選びひとつで「後のメンテナンスコスト」が激変することに気づかされます。特に最近は、単なるレスポンシブ対応を超えて、コンポーネントの自律性を高める設計が求められています。今回は、定番の単位をどう使い分け、どう組み合わせるべきか、実務的な視点で掘り下げます。
pxを完全に捨ててはいけない理由
モダンな開発では「rem」が推奨されがちですが、実務において「px」が不要というわけではありません。例えば、borderの太さや、極めて厳密な1ピクセルの隙間を空けたい時など、デバイスのピクセル密度に依存せず「物理的な境界」を定義したい場合には、pxが最も信頼できます。「可変であるべきか、不変であるべきか」という基準で単位を選ぶのが、シニア層の判断基準です。
remとemの使い分けを極める
多くの若手が混同しがちなのがremとemの使い分けです。私の現場では、以下のようにルールを決めています。
remは「ルート（html）に対する相対値」なので、フォントサイズやレイアウトのベースなど、サイト全体で一貫性を保ちたい箇所に使います。
対してemは「親要素のフォントサイズに対する相対値」です。これはボタンのパディング設定に最適です。ボタンのフォントサイズを変えた瞬間に、パディングも連動してスケールするため、コンポーネントとしての再利用性が格段に向上します。
ビューポート単位の「落とし穴」を回避する
vwやvhは便利ですが、モバイルブラウザの「アドレスバーの伸縮」という厄介な仕様に振り回されることがよくあります。最近では、svh（Small Viewport Height）やlvh（Large Viewport Height）といった新しい単位が使えるようになっています。これらを活用することで、「スクロールした瞬間にレイアウトがガタつく」というUIの崩れをスマートに解消できます。
calc()を組み合わせた動的な余白管理
現在、私が最も推奨しているのは、clamp()関数を活用した動的な単位指定です。
例えば、フォントサイズを「clamp(1rem, 2vw + 0.5rem, 2rem)」のように記述することで、最小値と最大値を維持しつつ、画面幅に応じて滑らかに変化させることができます。これを活用すると、メディアクエリを何行も書く必要がなくなり、CSSのソースコードが驚くほどスッキリします。
最後に：単位は「意図」を伝える言葉である
CSSの単位選びは、単なる数値指定ではありません。「ここは画面幅に合わせて拡大してほしい」「ここはどんな環境でも死守したい」という、デザイナーとしての設計意図をブラウザに伝えるためのコマンドです。
これから実装に取り組む際は、なぜその単位を選んだのか、チームメンバーに説明できる理由を持って記述してみてください。それが積み重なることで、あなたのコードは格段に読みやすく、かつ堅牢なものになるはずです。
コメント