mouse-note

デザインの勉強をしています。初めてのブログなのでゆるくやっていきます。

cssの単位について調べてみた

f:id:micchimouse:20170505013815j:plain

webサイトを作る上で絶対に使う単位たち。
もう一度勉強してみようと思いました。

 

 

フォントのサイズや、コンテンツの幅の指定、余白の指定など、様々なところで使うcssの単位。単位には大きく分けて以下の2つの種類があります。

 

  • 絶対単位
  • 相対単位

 

一つずつ見ていきまーす。

 

絶対単位

絶対単位はいずれかの単位を物理的な単位に固定してから、それを基準として他の単位を定義する。なのでディスプレイ上や印刷プリンターなどの出力メディアに依存する。例えば、1in=96pxや3pt=4pxなど。

レスポンシブデザインがスタンダード化している現在では、デバイスに依存する絶対単位よりも、ディスプレイの解像度や表示領域のサイズに依存しない、融通の利く相対単位を優先したほうがいいみたいです。

 

絶対単位の種類

  • px
  • mm
  • q
  • cm
  • in
  • pt
  • pc

正直webではpx以外使ったことないです。mm、qなどの単位は印刷物をデザインするときに使うことが多いですね。

 

相対単位

相対単位は別のサイズのプロパティに対しての相対的なサイズになります。デバイスが異なる場合でも調整されるので、ユーザビリティの点からも良いとされています。

 

ex

要素のx-height(英小文字xの高さ)を基準1exとする。指定されているフォントの種類によって異なるサイズになるため使いづらい面もある。

 

ch

要素の0(ゼロ)の幅を基準1chとする。

 

em

font-sizeプロパティにemが指定されていると、親要素のフォントサイズが1emになる。

 

例えば

 

See the Pen PmKMRb by micchimouse (@micchimouse) on CodePen.

 

ユーザー側がフォントサイズを変えたとしても、emで指定されていればそれに合わせて調節される。emはfont-sizeだけでなく、line-height、margin-bottom、margin-topでよく、指定されることが多いみたいです。

 

rem

ルート要素(html要素)のフォントサイズを基準1remとする。css3で新しく追加された単位で、emに似ているけど基準をルート要素にしている点が違う。レスポンシブデザインで役立つ単位。

 

例えば

f:id:micchimouse:20170505014111j:plain

うまく使えるようになれば、とても便利そう!

 

% パーセント

親要素のサイズを基準とした割合。横幅いっぱいのレイアウトにするときによく使う。

 

vw

ビューポートの幅の1/100

vh

ビューポートの高さの1/100

vmin

ビューポートの高さと幅のうち、値が小さい方に対する割合1/100

vmax

ビューポートの高さと幅のうち、値が大きい方に対する割合1/100

 


「ビューポートとは」

ディスプレイの表示領域のこと。ブラウザなどでは、ブラウザウィンドウの表示領域がビューポートになる。


 

vwはウィンドウの横幅いっぱいのレイアウトをするときに適しているように思いますが、%指定の方が適しているみたいです。縦幅いっぱいのレイアウトをするときには、vhが使えます。

詳しくはcolissさんが紹介しています。

coliss.com

まとめ

今まで知らなかった単位もあったので勉強になりました!正直、使わない単位もあると思うけど、em、rem、vhなどは今後どんどん使ってみたいと思いました!