CSSの単位についてお勉強

はじめに

派遣スタッフさん(未経験の方)にCSS単位の説明をさせて頂いた際に「難しい」と仰っていました。

おそらく「私の説明が悪い」そして「私の理解度低い」ことが原因と思われる。

そこで、私の理解を深めるためにも纏めてみました。

当記事に訪れた方が、少しでも理解が深まることを祈っております。

相対単位と絶対単位

まず、CSSで使える単位は、絶対単位と相対単位に分類されます。

• 絶対単位
  親要素や他要素のサイズに影響されることなく、指定したサイズそのものを表す単位です。
  例えば、ブラウザを画面を大きくしたり、小さくしたりなどしても絶対単位を指定した内容は変わらないことになります。

• 相対単位
  他の要素と比較することで大きさが決まる単位のことであり、比較することで大きさが変わります。
  絶対単位とは違い、常に別の要素を基準として、「○○(他要素)に対する割合」という指定をします。
  例えば、ブラウザを画面を大きくしたり、小さくしたりなど画面表示の大きさ(基準)に対して相対単位を指定した内容も変わることになります。

なぜ相対単位は必要？

絶対単位の場合、常に固定のため想定外にレイアウトが崩れるようなことが起こりづらいため使用しやすいですが、相対単位は、状況によって大きさが変化するため、親要素や他要素など全体を見据えてコーディングする必要があり、初心者の方には理解しづらいです。

なぜ、理解しづらい相対単位が必要なのか？
一例ではありますが、画面サイズによって柔軟にレイアウトを変える必要がある「レスポンシブデザイン」によく使用されます。
また、アクセシビリティの観点から使用することがあります。

CSSで使える主な単位

絶対単位

単位	説明
px	他要素のことを気にせずにピクセル数で大きさを指定する

pxは市販のテキストによっては相対単位と分類されることがあるようです。
私もAテキストには相対単位、Bテキストには絶対単位とあり、混乱しました・・・。
CSSの仕様としては、絶対単位に分類されますが、モニターの画素数によって指定された値のサイズが変化する相対単位と解説されるテキストもあるようです。

px

<h2>絶対単位:px指定</h2>
<div class="box ex01-1">
   width800px height500px
</div>

.box {
    background-color: skyblue;
}
.ex01-1 {
    width: 800px;
    height: 500px;
 }

視覚的に分かるため、px指定をしがちですが、PCでブラウザの画面を広げたり、縮めたりしたときの固定表示のため、それで良いのか？悪いのか？検討する際には注意が必要です。

相対単位

単位	説明
%	親要素の大きさに対する割合で指定
em	親要素のフォントサイズを1としてその比率を指定
rem	html要素に指定されたフォントサイズを1としてその比率を指定
vw	ブラウザの画面サイズを基準とした幅を指定
vh	ブラウザの画面サイズを基準とした高さを指定

％

<h2>相対単位:%指定</h2>
<div class="box ex01-1">
   width800px height500px
   <div class ="box2 ex01-2">
      width50% height20%
   </div>
</div>

.box2 {
   background-color: orange;
}
.ex01-2 {
   width: 50%;
   height: 20%;
}

以下の画像を確認すると、widthは親要素に対して50%の400px、heightは親要素に対して20%の100pxと指定されています

em

<h2>相対単位:em指定</h2>
<div class="font">
   親要素 font-size:20px(基準"1"とする)
　 <div class ="ex02-1">
      子要素 font-size:0.5em(基準"1"*0.5)
   </div>
</div>>

.font {
    background-color: skyblue;
    font-size: 30px;
}

.ex02-1 {
    font-size: 0.5em;
}

分かりづらいですが、以下のGIFを確認すると、子要素のフォントサイズは15pxと指定されています

emは、「1文字分余白をあける」など文字と文字の間隔を指定したい際に使用されることもあります。

.ex02-1 {
    font-size: 0.5em;
    padding: 1.2em;
}

この場合、要素(ex02-1)で指定されたフォントサイズ(15px)を基準とした1.2倍のフォントサイズ(18px)が指定されます。

rem

<h2>相対単位:rem指定</h2>
<div class="font">
   親要素 font-size:20px
   <div class ="ex03-1">
      子要素 font-size:0.5rem(html"1"*0.5)
   </div>
</div>

html {
    font-size: 30px;
}

.font {
    background-color:skyblue;
    font-size: 20px;
}

.ex03-1 {
    font-size: 0.5rem;
}

親要素20pxを基準とせずに、HTML要素30pxを基準として子要素のフォントサイズは15pxと指定されています

※なお、今回はイメージしやすいようにHTML要素にフォントサイズ30pxを指定していますが、ブラウザにはデフォルトフォントサイズを持っているため、特に指定する必要はありません。

emとremの違い

同じ性質を持っているため、違いが分かりづらいですが以下の通り理解しておくと良いです。

• em
  直近の親要素に指定されているサイズが基準
• rem
  常に最上位であるHTML要素に指定されているサイズが基準
  ※ユーザーがブラウザのフォントサイズを「大」または「小」と設定していた場合、その設定サイズを基準とするため、アクセシビリティの観点から良いとされています。

vwとvh

<h2>相対単位:vw/vh指定</h2>
<div class="box ex04-1">
   width800px height500px
   <div class ="box2 ex04-2">
       width50vw height30vh
   </div>
</div>

.box {
    background-color: skyblue;
}

.box2 {
    background-color: orange;
}

.ex04-1 {
    width: 800px;
    height: 500px;
}

.ex04-2 {
    width: 50vw;
    height: 30vh;
}

画面サイズを幅1000×高さ500とした場合、子要素(オレンジ)は画面幅の50%(500px)、画面高さの30%(150px)と指定されています。
画面サイズを幅・高さそれぞれ100として考えるため、%と同じイメージで良いです。

画面サイズを基準としているため、サイズが変わると連動して子要素(オレンジ)のサイズも変化します。

終わりに

なかなか、使い分けは難しいですが、レスポンシブデザインでは、相対単位を使用することが多いため、積極的に使用することをおすすめします。