Q

CSSプロパティの長さの単位使い分けについて
Web Developmentにおいて、何を（またはどこを）基準にして長さの単位（px, em, rem, vh, vm etc）を使い分けるのがベストですか？
一般的にレスポンシブ対応するため、絶対単位より相対単位を推奨する記事をよく見るのですが、それでもどの単位をどこで使い分けるかコツみたいなのあれば教えてください。

A

回答者 ポップ さん 
回答の結論としては、「開発するサービス(またはHPなど)やプロジェクト次第」となってしまいますかね・・・

レスポンシブ対応するためにem(=相対単位)などを用いてコーディングするプロジェクトもありますが、メディアクエリ(screen and (max-width: 1000px); みたいに、画面幅に応じて適用するCSSを切り替える技術です)を使ってレスポンシブ対応をすることができるので、すべてpxでコーディングするプロジェクトもあります。

また、比較的小規模のプロジェクトや、設計がしっかりしているプロジェクトであれば相対単位でコーディングするのもよいのですが、逆に大規模なプロジェクトや設計がうまくできていないプロジェクトに相対単位は向かないことが多いです。
(相対要素はHTMLの親要素の影響を受けるため、大規模なプロジェクトほど相対要素で思った通りに表示できないといった問題が発生しやすいです。）

使い分けの判断についても上記と同様です。親要素が存在しない場合などはremとpxのどちらで書いても出力結果は同じ場合もありますし、ある程度慣れや好みの要素もあるかもしれませんね。

蛇足ですが、個人的な感覚ではpxまたはremを使っているプロジェクトが多い印象です。
※remは相対要素ですが、emを改良して使いやすくした側面があるため、非常に便利です。

A

回答者 ali0ikechi さん 
やはり臨機応変に柔軟な対応がなんですね...
回答ありがとうございます！

戻る