どうも、7noteです。今回は4種類の単位の話していきます。

CSSでは、次の4つの単位がよく使われます。

それぞれ解説していきます。

px（ピクセル）

使用例

style.css

div {
    width: 1000px;
    height: 500px;
    font-size: 16px;
}

pxの特徴は、直感的でわかりやすいところ。
パソコンの画面の大きさはpx（ピクセル）で表されます。
よくパソコンのモニターなどで、1920×1280などの表記みたことないでしょうか？これは横幅1920pxで縦幅が1280pxと言うことになります。

「width: 1000px;」なら、横幅を1000pxにしなさい。と言う意味です。

注意！

ピクセルの最小単位は「1px」です。
ブラウザでは基本的に0.5pxなどの指定はできません。
いや、指定はできるんだけど、効かないブラウザがあるので普通は指定しません。

%（パーセント）

使用例

style.css

div {
    margin: 0 5%;
    padding: 5%;
    top: 30%
}

%の特徴は親要素の横幅分を100%とした時の割合で表される。
例えば親要素の横幅が500pxだとして、中の子要素にwidth: 60%;を指定すると、横幅は300pxになります。

vw,vh（ブイダブリュー,ブイエイチ）

使用例

style.css

div {
    right: 10vw;
    width: 100vw;
}

vwとvh、はそれぞれ「viewport width」「viewport height」の略です。
pcサイトを作るときにも使われますが、どちらかと言うとスマホ用のページを作成するときによく使うことが多いです。
例えば、「width: 100vw;」を指定すれば、「画面幅と同じ横幅」になります。
ウィンドウサイズの横幅いっぱいが100vw。縦幅いっぱいが100vhになります。
「10vw;」を指定すれば、それは画面サイズの1/10サイズになります。
スマホでは画面の大きさが違うので、vwなどで計算してコーディングすることで、どのデバイスでみても綺麗な見た目になるように設計されています。