CSSで使用する単位の使い分け – 使用するタイミングなど

フォントや余白、幅や高さなど、サイズを指定することが多々あります。CSSではさまざまな単位が用意されており、用途に合わせて使用することで効率よく指定ができます。

本記事ではCSSで使用できる単位の種類の紹介、単位ごとにどういった場面で使用できるのかについて解説いたします。

また、単位を使用するにあたり要素の親子関係について把握する必要があるため、親子関係についての解説も行います。

本記事を通して、以下のことについて理解することができます。

絶対単位と相対単位について

CSSで使用する単位には絶対値で指定するものと、相対値で使用するものがあります。それぞれ詳しく見ていきましょう。

絶対単位

指定した値がブラウザ上に反映されます。他の値が参照されることはありません。

px

絶対単位のため、指定した再度でそのままブラウザに反映されます。要素の幅や間隔、親となる要素に指定されることが多く、ブラウザごとに大きさを変えたくないなどに使われます。

相対単位

他の要素に指定したサイズを基準にして、相対的に算出されます。主に下記の単位が相対単位となります。

%

%は親の要素の値を参照する単位であり、例えば親の要素がwidth: 1000pxの場合、子要素にwidth: 50%と指定すると、子要素のwidthは500pxとなります。

<div class="box">
  <div class="inner-box"></div>
</div>

<style>
  .box {
    width: 1000px;
    height: 100px;
    background-color: gray;  /* グレー */
  }
  .inner-box {
    width: 50%;
    height: 50px;
    background-color: blue;  /* ブルー */
  }
</style>

このように親要素（グレー）に対して子要素（ブルー）を50％にしているため、ちょうど半分で表示されております。

rem

html要素に対しての相対値となります。「rem」の「r」は「root」の略で、rootとは「html要素」のことを指します。

そのため、htmlに指定している値＝1remという考え方になります。

remはフォントサイズで使用します。

<h2>
  今日の天気について
</h2>

<style>
  html {
    font-size: 16px;
  }
  h2 {
    font-size: 2rem;
  }
</style>

上記の場合、h2タグに指定されている「今日の天気について」の大きさは32pxとなります。

16（px）　×　2（rem）　＝　32（px）

remが便利な点としてhtmlに指定しているサイズによって値が相対的に変わるため、html要素のフォントサイズ対してレスポンシブ対応することによって、画面の幅によってフォント数が自動で調整されるような指定が可能になります。

<h2>
  今日の天気について
</h2>

<style>
  html {
    font-size: 16px;
    @media screen and (max-width: 768px) {
      font-size: 14px;
    }
  }
  h2 {
    font-size: 2rem;
  }
</style>

上記の例だと画面の幅が768px未満の場合にhtml要素のフォントサイズが14pxになるため、h2要素のフォント数が自動的に、28pxに変更されます。

フォント数をすべてpx単位で設定していると、すべての箇所に対してレスポンシブ対応を行わなければならないですが、上記のような指定をすることで、指定を省くことが可能となります。

em

remと混同されやすいのがemです。

remと違う点は、emはhtmlではなく、親要素に対しての相対値となります。

例えば以下のような場合は

<h2>
  今日の天気について
  <p>明日の天気について</p>
</h2>

h2 {
  font-size: 32px;
}
h2 p {
  font-size: 0.5em;
}

emは親要素の値を参照するため、pタグの「明日の天気について」の文字は16pxとなります。

32（px）　×　0.5（em）　＝　 16（px）

親要素の半分の大きさなどを指定したい場合など、pxをあえて計算する必要がなく大変便利です。

vh

vhは「viewport height」の略で、ビューポートの縦幅（height）を基準とした単位となります。

ビューポートとはブラウザに表示されている幅（表示領域と言ったりします）のことで、ビューポートの高さが1000pxだった場合に、100vhだと1000px、50vhだと500pxとなります。

主にホームページのファーストビュー（最初に見える画像など）などで使用されます。vhで気を付ける点は、パソコンで使用する場合とタブレットやスマートフォンでサイズ感の違いです。

パソコンは最近はワイドモニタが多く、横幅が大きいため、パソコンではうまく表示されていても、タブレットやスマートフォンは縦で使用することが多いことから、縦幅のほうがかなり大きくなります。

メディアクエリ（レスポンシブ対応）で調整しないと、思った挙動にならないことが多いので注意が必要です。

vw

vwは「viewport width」の略で、ビューポートの横幅（width）を基準とした単位となります。

vhと同様に横幅が1000pxだった場合に、100vwだと1000px、50vwだと500pxとなります。

vwはファーストビューに配置する文字の大きさ調整に使用するのも便利で、指定方法は5vwのように小さく設定します。

例えばノートPCが1440pxだったとすると、3vwで1440px × 0.03（3vw）で約43pxとなり、ちょうどよい大きさになります。※デザインによって要調整ですが…

画面の幅が起点となるので、上記の場合、幅が768pxなどのタブレットだと、768px × 0.03（3vw）で約23pxとなり画面の幅に応じてフォントサイズが変更されます。

そのため、レスポンシブ対応で調整するケースが少なくなるため、とても便利です。

さいごに

CSSで単位の使い分けが適切に行えると、コーディングでの管理が非常に簡単になります。

すべてをpxで記載することも可能ですが、レスポンシブ対応での対応など、確認や修正にかなり時間を要してしまうことになります。

相対単位など使いこなし、適切にコーディングができるように各単位の仕様について理解していきたいですね！