アクアリウムハジメマシタ!!

改めてCSSでよく使う単位をまとめてみた

改めてCSSでよく使う単位をまとめてみた

今回ひさしぶりにCSSを書くことになり、emremなんかの単位をうっかり忘れていたので改めてきちんと復習することに。まぁ、ついでなので備忘録代わりに記事にまとめてみました。

px

px(ピクセル)はフォントサイズの指定やボックスサイズの指定、画像サイズの指定などにつかいます。というかpxは昔からwebの基準単位になっています。使い方はそのままで、例えばフォントサイズを10pxと指定すれば10pxのフォントを書き出すことができます。

pt

pt(ポイント)はwebではほとんど使うことがありません。どちらかというと会社案内やパンフレットのような印刷物でよく使う単位です。

%

%は親要素などに設定されてある基準となる数値に対してパーセンテージで指定することができます。例えばボックスサイズを1000pxで指定してある要素の子要素に50%と指定すると子要素のボックスサイズは500pxになります。フォントサイズでは親要素20pxで子要素50%の場合は10pxになります。この%は便利ですが、例えば1000pxの30%などきれいに割り切れない数字を扱う場合には注意が必要です。

em

emは文字サイズやボックスサイズに関する単位とのこと。まぁさすがにemは覚えてました。が、一応きちんとまとめておきます。emは親要素の文字サイズに対して子要素などの文字サイズを調整できます。1emが親要素に設定されている文字サイズです。親要素の文字サイズが10pxの場合、子要素で1.5emと指定すると15pxの文字サイズになります。

使い方としては%での指定とほとんど同じですね。%で150%としていたならemなら1.5emと指定すれば大丈夫です。

emは相対指定なので親要素となるブロックごとにボックスサイズやフォントサイズを変えたい場合などに大活躍します。ただし同じem値でも出力される文字サイズが変わってくることだけは常に注意が必要です。

rem

次はremです。emは親要素のサイズが基準になっていましたが、remはhtmlに指定されているサイズが基準になります。htmlにフォントサイズが10pxで指定されていた場合は1rem=10pxになります。ちなみに指定されていない場合は標準で1rem=16pxになります。

remはhtmlという一番上位で指定されているサイズが基準になるので、ブロックごとに出力がバラバラなるというリスクが軽減されますね。

vw /vh

vwビューポートの1/100の幅のことで、vhは1/100の高さのことです。例えば幅が1000pxで高さが1500pxのビューポートの場合1vwは10pxになり、1vhは15pxになります。ところがvw /vhについてはあくまでビューポートが基準になるので、例えばデバイスを縦から横にした場合などにpxが変更されます。さきほどの例でいくと幅が1500pxで高さが1000pxになるので、1vwは15pxとなり1vhは10pxとなります。vw /vhは主にボックスを組む時に使いますが、このあたりのことをしっかり把握していないと思わぬ表示バグを引き起こしてしまいそうですね。

vmin/vmax

vmin/vmaxはビューポイントの幅もしくは高さに対して最小もしくは最大を基準に指定できる単位です。例えば幅1000pxで高さ1500pxの場合10vminとすると小さい方の幅1000pxが基準となり、100pxになります。vmaxは例えば幅1000pxで高さ1500pxの場合10vmaxは150pxとなります。つまりvmin幅か高さどちらか小さい方が基準になり、vmaxは大きい方が基準になるということです。

deg/rad/grad/turn

degは角度を度数法で指定する時の単位になります。トランスフォームの設定時に「transform: rotate(20deg);」のように使います。1deg=1°です。

radは角度を弧度法で指定する時の単位になります。円一周は6.2832radになり、1radは180/π 度ということになります。トランスフォームの設定時に「transform: rotate(6.2832rad);」のように指定します。

gradは

gradは角度をグラードで指定する時の単位になります。400gradで円一周となっています。トランスフォームの設定時に「transform: rotate(-100grad);」のように指定します。

turn

Turnは角度を回転数で指定する時の単位になります。1turnで円一周です。トランスフォームの設定時に「transform: rotate(2.5turn);」のように指定します。

s/ms

s/msはおもにトランジションやアニメーションの設定時に使います。sは1秒でmsは1/1000秒です。「transition: 0.5s」のように指定して使います。

観てもらいたい動画!!