cssの単位について(px、em、remなど)

Question

cssにはpx、em、rem、%などいろんな単位があります。
それぞれの単位の特性は調べたのですが、どういった場合にどの単位を使えばいいのでしょうか？
各ブレークポイントごとにpxを当てるやり方でもレスポンシブ対応できますし、いまいち他の単位を使い所がわからないです。

例： font-sizeだったらremを使う?じゃあmargin、paddingは何の単位を使うんだろう？など色々疑問です。

ご教授お願いします。

Comments

[yoshinavi]

＞各ブレークポイントごとにpxを当てるやり方でもレスポンシブ対応できます
→　デバイスの幅は、スマホだけでもサイズはバラバラですし、PCも同じです。
その全てに対応する場合に、固定値単位であるpxでも、物理的には可能でしょうが、作業的にほぼ不可かと思います。

[yoshinavi]

「レスポンシブ」を意識する場合の最初の壁かと思います。
使用する単位はいろいろありますが、「固定」と「可変」に分かれます。「可変」の場合は「どこを基準とするのか？」をしっかり把握しましょう。

Answer 1

プロパティごとに使う単位が決まっているわけではなく、
それぞれのプロパティの値に**「何を基準としたサイズを指定したいのか」**を考えて
使用する単位を選択します。

例えばmarginやpaddingにはpx、em、rem、%、vw、vhなどどのような単位でも使うことができます。
ただ、使った単位によってmarginやpaddingの大きさや、拡大縮小したときの挙動などは変わってきます。
font-sizeでも、widthやheightでも、みな同じです。

なので、単位の特性を理解したら、その特性を利用したい場合にその単位を使えばよいのです。
一般的には次のような特性があります。

・px……どのような環境でも変わらない固定サイズを指定する
・em……親要素に指定されている文字サイズを基準にしたサイズにする
・％……親要素に指定されている該当プロパティの値に対する割合でサイズ指定する
・rem…ルート要素（html）に指定されている文字サイズを基準にしたサイズにする
・vw……viewportの横幅を基準にしたサイズにする
・vh……viewportの縦幅を基準にしたサイズにする

例えば一番良く使うwidthで考えてみましょう。

【例１】 どの環境で見ても常に100px固定で表示したい
→ width: 100px;

【例２】 親コンテナが1000pxの時、半分の500pxで表示されるようにしたい。
ただし親コンテナサイズは可変であり、親コンテナサイズが変わったとしても常に親の半分の比率をキープするようにしたい。
→ width: 50%;

【例３】 文字サイズが変更されても常にその時の文字サイズで10文字分のサイズを確保したい
→ width: 10em;

【例４】 親コンテナのサイズに関わりなく、常にブラウザの幅いっぱいまでのサイズで表示したい。
→ width: 100vw;

こんな感じです。
作りたいデザインを再現するために、どの単位を使ったら最も都合が良いか？
ということを考えて使用する単位を選択してみてください。

Comments

[退会済みユーザー]

回答ありがとうございます