Webエンジニア学習日記 CSS編 #04 「値の単位」

2023年5月1日

CSS プログラミング 学習

eyecatch cssで書く値で、覚えておく必要があるのが、いろいろな単位です。 %(パーセント)で指定する場合と、px(ピクセル)で指定する場合は、何がどう違うのか? また、em(エム)とrem(レム)って一体何?どう違うの? 一体どの単位を使えばいいの? という様な疑問で困らないようにしておきましょう。 ちなみに、mm(ミリメートル)やcm(センチメートル)、in(インチ)という単位も使えます。 印刷をする時にも、cssって使えるんですね。(こりゃあ便利だ!)

色々ある単位の種類

px(ピクセル)

ピクセルサイズが指定できます。 アイコンや画像などは、ピクセル単位で指定することが多いので、素材の指定で使われることが多いです。 また、レスポンシブデザイン(※用語1)で画面サイズのブレイクポイント(※用語2)での指定でよく使われます。 絶対的なサイズを指定する時に使う単位です。

%(パーセント)

親要素のサイズを100%として、その割合が指定できます。
300px
50%
親要素に対する、相対的なサイズ指定で使われます。

em(エム)

Emphasis(強調)の文字を略した、em(エム)という単位。 フォントのサイズで指定する単位で、親要素に指定されたフォントサイズの割合を指定することができます。
font-size : 32px;
font-size : 0.5em;
1.0emを指定すると、親要素と同じ文字サイズになり、0.5emを指定すると、半分の大きさになります。 2.0emでは、倍のサイズが指定できます。

rem(レム)

emが親要素の指定だったのに対して、htmlのroot要素のフォントサイズに対しての割合が指定できます。 Root-Emphasisの略の意味になります。 ページ全体のフォントサイズを一括管理する設定ができて、よく使われる単位です。 1.0remで、root要素と同じフォントサイズになり、 0.5remで、半分サイズ、 2.0remで、倍のサイズが指定できます。

vw(view-width),vh(view-height)

%指定だと、親要素に対する割合しか設定できないのに対して、画面全体のサイズで指定ができる単位です。 vwは、画面の幅サイズ、vhは画面の縦サイズの値を取得して指定できます。 1vw(1vh)は、サイズに対しての1%の値になるので、同じサイズを指定したい場合は、100vw(100vh)と書きます。 画面(view)の半分のサイズを指定したい場合は、50vw(50vh)です。
view-size ( 300px )
width : 80vw
width : 100%
width : 50%;
width : 50%;
width : 100%
※上記は、画面サイズ(view)が300pxの場合のサンプルです。

vmin(view-min),vmax(view-max)

vwとvhを使っている時に、スマートフォンであれば、縦表示、横表示が自由に切り替わって設定がやりずらい場合があります。 そんな時は、vminを使うと、vwとvhで値の小さい方を取得できます。 vmaxは、vwとvhで値の大きい方が取得できます。 1vminは、vwとvhのどちらか小さい方の値の1%を取得するので、100%のセットをしたい場合は、100vminとします。

サイズ指定ができる要素と出来ない要素

HTMLタグには、サイズ指定ができる要素と出来ない要素があります。 divタグにはサイズ指定ができますが、spanタグには、サイズ指定ができません。 これは、displayで指定される、「block」は、サイズ指定ができ設定で、「inline」は、サイズ指定ができない設定なのです。 多くのサイトでこのように説明されていますが、blockのみがサイズ指定ができるというわけではなく、inline以外の値はほぼ全てサイズ指定ができるという風に理解しておくといいでしょう。 ※インラインとブロックについては、別の回で詳しく解説したいと思います。

用語解説

※用語1 レスポンシブデザイン

スマートフォンやパソコンの画面サイズがそれぞれ違うため、いろいろな端末で見た場合に、どの端末でも表示を一定に保てるようにするデザイン手法。

※用語2 ブレイクポイント

レスポンシブデザインで、ブラウザの大きさが、大きいサイズから小さいサイズに切り替わるサイズの事。

参考

https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units