jQueryに強い、基本料金0円。わかりやすい料金設定でご提供する、コーディング代行サービス「ココマチ コーディングラボ」

スタッフブログ

お見積り依頼

脱・なんとなく!CSSでサイズ指定するときに押さえておきたい5つの単位とは?

WebページをスタイリングするためにHTMLタグを装飾するCSS。テキストの色やサイズなどを装飾できるCSSですが、その指定にはいろいろな単位があり、どれを使えばいいのか悩んでしまうもの。 特に、margin、padding、font-sizeなどのプロパティを使用するときに迷ってしまうのが、サイズを指定する単位です。それぞれの単位について深く理解しないまま、「なんとなく」使っている人も多いのではないでしょうか? 今回は、CSSコーディング時にフォントサイズの指定に適用した例を主に用いて、押さえておきたいCSSの5つの単位について解説します!

 
  • 1. 画面解像度に依存する『px(ピクセル単位)』
    「px」は、ピクセル単位で値を指定する場合に使用します。Retinaディスプレイなどの高精細ディスプレイを除けば、1pxはユーザーの画面ではドット1個で表示されます。画面の解像度に依存するため、親要素など他の要素との関係はなく、指定したピクセル数の値になります。
    相対的な単位ではありますが、実際は絶対的な単位として使用されているため、ユーザーがブラウザのフォントサイズ設定を変更しても、テキストを拡大縮小することができません。ユーザーフレンドリーなコーディングを心がけるなら、あまり使用しないことをおすすめします。
 
  • 2. 親要素のサイズを基準にする『em(Em単位)』
    「em」は、親要素のフォントサイズにもとづいて自身を1とする単位。一般的なブラウザのフォントサイズは16pxのため、1em=16pxになります。たとえば10pxが指定された要素の子要素に対し、2emを指定すると20px相当のフォントサイズになります。
 
  • 3. ルート要素のサイズを基準にする『rem(Rem単位)』
    「rem」は、「html」などルート要素のフォントサイズを基準とした単位。「em」が親要素のサイズに依存するのに対し、「rem」は親要素のフォントサイズが変わったとしても、ルート要素のフォントサイズが変わらない限り変化しません。 上記のコーディング例では、p要素には18px、strong要素には21px相当のフォントサイズになります。 strong要素がp要素の子要素だった場合、p要素のフォントサイズが変化してもstrong要素のフォントサイズは変化しないため、要素の継承による問題を避けられるメリットがあります。
 
  • 4. 親要素のサイズを基準にする『%(パーセント)』
    「%」は、親要素のフォントサイズに対する割合を表す単位で「em」と同様です。 一般的なブラウザのデフォルトのフォントサイズが16pxのため、上記のコーディング例のようにhtml要素のフォントサイズを62.5%に指定すると、10px相当のフォントサイズになります。そうすることで、その他の要素のフォントサイズが容易に計算できます。
 
  • 5. 複数のブレークポイントで重宝できる『vw、vh(Viewport単位)』
    レスポンシブデザインでは、ある画面サイズを境目として、適用させるスタイルを切り替えます。この境目のことを「ブレイクポイント」と呼びます。 「vw」は、指定したviewportの幅に対する割合の単位。「vh」は、指定したviewportの高さに対する割合の単位です。たとえば画面幅が320pxであれば、100vwは320px、10vwは32pxになります。画面サイズを基準とする単位のため、フルスクリーンの背景画像を使ったデザインなどによく用いられます。 「%」指定と変わらない気もしますが、「%」では親要素のプロパティに依存するため、必ずしもviewportの幅が基準になるとは限りません。「vw」「vh」なら、viewportの幅や高さを元にしたサイズを指定できるメリットがあります。
 

複数のデバイスサイズを意識したレスポンシブデザインによるコーディングが主流になってからというもの、相対的なサイズ指定の理解が必要になりました。これまでのCSSのサイズ指定をそのまま使っていると、予期せぬミスが発生したりと困ってしまうもの。単位の理解を深めておくことで、要素がズレてしまうなどのトラブルも減ることでしょう!

 

ちなみに、現在コーディングラボでは、3の『rem(Rem単位)』による指定を主に行っています。(案件によって変更する場合もあります)