CSS 絶対サイズ、相対サイズの使い分け方

Question

CSSのサイズ指定では、
絶対サイズ：px
相対サイズ：em, rem, vh, vw, %
などが存在しますが、どのように使い分ければ良いのかがわかりません。

例えば、padding, marginの指定やフォントサイズなど、こういう場合は絶対サイズを使用した方が良い、
こういう場合は相対サイズのこのサイズ指定を使用した方がいいなどある程度決まっているのでしょうか。

今、デザインカンプの課題を解いていて、タグ間のpadding等がFigmaで与えられているのですが、ピクセル単位で全く同じ実装をしようとすると、相対サイズを使用するのは難しいのではと行き詰まっています。

ご回答よろしくお願いいたします。

Comments

[Lhankor_Mhy]

そもそも、どのフォントで表示されるか、などクライアントの表示をコントロールするのには限界があるので、「全く同じ実装」というのはあまり目指さない方がいいかと思います。

https://note.com/rdlabo/n/n4002f3de17de

Answer 1

ピクセル単位で全く同じ実装をしようとすると、相対サイズを使用するのは難しいのではと行き詰まっています。

この条件なら、絶対単位でガチガチに組めばいいだけではないでしょうか。

（見本自身もレスポンシブに変化するものであれば話は別ですが）

---

こういう場合は絶対サイズを使用した方が良い、
こういう場合は相対サイズのこのサイズ指定を使用した方がいいなどある程度決まっているのでしょうか。

作るページの構造によって違ってきます。ただ、「画面幅に応じて枠線が太くなる、あるいは細すぎて消えてしまう」ような状況は好まれませんので、枠線の幅を1pxのように固定しておくのは珍しくないです。

また、calc( 50% - 2px )のような、絶対相対をまたぐ指定も可能です（箇所によって両者を混ぜる場合に、その間を取り持つような場面で便利です）。

Comments

[AI_engineer]

ご回答ありがとうございます。
boderなどの画面幅によってサイズを変えたくない場合は、px, それ以外は相対単位で指定してコーディングをしようと思います。

Answer 2

レガシーな考え方をすればすべてpx指示で問題ないですね。
そのうえで、表示ウィンドウのサイズやズーム処理など画面配置の設計で不具合があればそれに対応する単位で指定します。逆に言えば画面の設計を意識していれば最初から最適な単位の選択肢が絞られるので色々トライアンドエラーで試してみるしかないでしょう。
極端な話一切のユレも許したくないならpdfなどが選ばれるでしょうし、究極には画像が一番間違いないレイアウトです