CSSコーディングで毎回つまずく単位px,rem,em,%…etcをおさらい

お疲れさまです。今日も元気に幼稚園に行ってくれたわが子に感謝！
フリータイムで勉強します。今日は、ページコーディングをしていると毎回引っかかる単位を一度おさらいしてみようと思います。

CSSでコーディングする際、いろんな単位を使うと思いますが、自分自身がコーディングをする際によく使用するのはpxと％の２つです。あとたまにem、rem？字間の調整とかで使ったことあるかな、という感じ。他のはよくわからんなぁという理由で使っていなくて、でもVSCとか使ってるとアシストでズラーっと色んな単位出てきてて、それがめっちゃ気になってて。今日はせっかくなので、そのズラーっと出てくるよくわからない単位をおさらいしていけたらと思います。

単位の種類

主にコンテンツのサイズを指定する際に単位の指定が必要になってくると思うのですが、そもそもどんな単位が存在するのかを紹介します。

その①～おなじみのpxは「1px=1ドット」の絶対単位

一番なじみのある「px」。単位としては「1px=1ドット」。絶対値となるので、親要素など、その他の要素に影響されず、指定した値が要素に適用されます。ブロックのサイズなどを指定するときによく登場する印象。

その②～レスポンシブで大活躍の%は、変動する相対単位

「％」は「px」とは違って、親要素で指定している値によって変動するので相対値と言えます。レスポンシブデザインでのコンテンツの幅を指定する際に使用されることが多い単位のようです。
親要素に影響されるので、その関係性を意識して値を指定する必要がある単位です。

その③～emとは「emphasis」の略。強調の意味を含んだ？相対単位

「em」は親要素のfont-sizeを基準にした相対値。基準値がどこにあるのかを把握してから「em」でサイズ指定をするとよさそうですね。「％」に似ている印象です。親要素のfont-sizeが10pxで、子要素のfont-sizeを2emで指定すると実質20pxのサイズ指定をしていることになります。

その④～remの「r」は「root（根元）」。軸になる基準値はHTMLにあり

先に紹介した「em」は親要素の値を基準にしていたのに対して、「rem」はルート要素（ルート要素＝HTML）を基準にした相対値になります。サイト全体での各要素のサイズ指定などをする際に使い勝手の良い単位のようです。

その⑤～vwは「viewport（表示領域） width（幅）」の略。ウィンドウの幅基準の相対単位

「vw」はビューポート、つまりウィンドウ幅を基準とした相対値になります。１vwはウィンドウ横幅の１％となるため、ウィンドウ幅が1980pxの場合は、1vw=19.80pxとなります。つまり100vhだと画面横幅いっぱいの表示になるということです。font-sizeの指定をする際にも便利な単位のようです。

その⑥～vhは「viewport（表示領域） height（高さ）」の略。ウィンドウの高さ基準の相対単位

先の「vw」が横幅だったのに対して、「vh」はウィンドウの縦幅を基準とした相対単位です。使うタイミングとしてはファーストビューなどで画面いっぱいにコンテンツを表示したいときなどが多いようです。

その⑦～vmin、使いどころがマニアック？な相対単位

どんな時に使うのかいまいち想像がつかない「vmin」ですが、こちらの単位はvh・vw同様にウィンドウ幅を基準にした相対単位です。
「vmin」の場合は、横幅と縦幅のいずれか小さいほうを基準とします。　横幅1980px・縦幅1000pxのウィンドウ画面で100vminを指定した場合、値の小さい「1080px」の100%で「1080px」となります。

その⑧～vmaxもレアキャラ？な相対単位

「vmax」はvminとは逆に横幅と縦幅のいずれか大きいほうを基準とします。横幅1980px・縦幅1000pxのウィンドウ画面で100vminを指定した場合、値の大きい「1980px」の100%で「1980px」となります。

さまざまな用途に合わせて使いこなしていく単位たち

今回改めて、単位をおさらいしてみたわけですが、やってよかったな、という感想です。グッジョブ今日の私。この疑問もう1年半くらいあたためてました。モヤモヤがすっきり～

　何の略称なのか、とか、英単語の意味が分かると途端に解像度が上がってすごくすっきりしました。英語ネイティブの人がうらやましい～。最近はサイトもレスポンシブデザインのものがほとんどなので、相対単位をうまく活用できるようになるとページコーディングもスムーズにできるのかな、と思いました。

「vmin」や「vmax」など説明読んでも使い時が全く想像できない単位もありましたが、何かをコーディングする際に、その単位を使ってみて作用を確認するっていうのもよさそう。

以上！おつかれさまでした～！