%, vw, vh, rem, em, px, サイズについて解説

Webサイト制作

CSS3

基礎

投稿日時 : 2024/11/08 更新日時 : 2024/11/09

CSSを学習するならまずはサイズについて抑えよう。サイズとは幅や大きさの事だ。

Webサイトのデザインは複数のコンテンツがギュッと詰まって、PCで表示した時やスマートフォンで表示する時など適宜、画面サイズが変わってもCSSを適切に書いていたら見えやすいように、または見栄え良く表示してくれる。

そんなベースとなるコンテンツのサイズ指定方法をここでレクチャーしよう。

CSSの%のサイズ指定

%はそのタグから見た親の要素のサイズ(幅)をその子要素の幅を何パーセントかで表す。親のタグが重要だ。今は意味がよく分からないと思うから例を出そう。


<style>
#main-container01 {
  width: 100%;
  height: 200px;
  background: silver;
}
#contents01 {
  width: 50%;
  height: 100px;
  background: green;
}
</style>
<body>
  <div id="main-container01">
    <div id="contents01"></div>
  </div>
</body>

銀色で表示されているmain-container01の横幅が100%で子タグのcontents01は幅を50%で指定されているから、ちょうど半分だけコンテンツの緑のブロックが表示されている事は理解できるだろう。

ここでcontents01の親のタグであるmain-container01が60%の横幅だとどうなるだろう？

何と緑の描画領域が減ってしまった！　contents01のタグは先ほどと変わらない50%に指定しているのにだ。察しの通り親のサイズが60%になった為にその影響をダイレクトに受けている。%の概念はこの仕組みが大切なのだ。

CSSは相対的に親の影響を受ける。しかし、絶対的にだと親の影響は弱くなる。この相対的(relative)と絶対的(absolute)は別のページで詳しく解説する。今はCSSは親のタグの影響を受けるのだと理解してもらえたらよい。

CSSのpxのサイズ指定

%の指定だと親のサイズに影響されて、大きくなったり小さくなったりすることが分かった。これはブラウザの大きさに依存する。PCで見てもスマホで見ても正方形を描画したい場合、%指定だとかなり大変だ。

そこでどこで表示されても固定されたサイズで描画する、それがこのトピックスでレクチャーするpx(ピクセル)だ。

ピクセルってどこかで聞いた事あります！

何となく分かるであろうピクセルは画面に表示される点の事だ。スマホの画面やPCのモニターは点の集まりで表示されているが、この1点、1点を1pxと表現できる


<style>
#contents02 {
  width: 120px;
  height: 120px;
  background: pink;
}
</style>
<body>
  <div id="contents02"></div>
</body>

ピンクの正方形が描画できた。これは縦横120pxのサイズだ。例えば親のタグが仮にありサイズ指定がされていても、contents02はpxでサイズを指定している為に親のサイズの影響を受けないで固定の120pxの正方形で描画される。サイトでサイドメニューを表示する際に横幅はpxで指定する場合が多い。

CSSのvwとwhのサイズ指定

子要素のサイズを%で指定すると親要素に影響される事が分かった。しかし、親要素に関係なく画面サイズのみで指定したい場合がある。例えば君達が作るサイトのファーストビューで、最初に見えるコンテンツを綺麗な景色の写真1枚を画面いっぱいに表示したい場合もあるだろう。その場合は下記のコードが考えられるな。


#first_view {
  width: 100vw;
  height: 100vh;
  background-image: url('綺麗な景色の写真の画像パス');
}

vwは画面の横のサイズで0～100で指定する。
vhは画面の縦のサイズで0～100で指定する。
上記のコードは画面の横幅が100vwと縦幅が100vhなので、縦横MAXのサイズで画面いっぱいに綺麗な景色の写真が表示される。

%とvwを比べてみよう

下記のコードを用意したので確認してほしい。


<style>
#contents03 {
 color: white;
  width: 10vw;
  height: 100px;
  background: orange;
}
#contents04 {
 color: white;
  width: 10%;
  height: 100px;
  background: blue;
}
</style>
<body>
  <div id="contents03">10vw</div>
   <br>
  <div id="contents04">10%</div>
</body>

10vw

10%

vwのオレンジ色は画面の横幅で画面の横幅が長いほど描画領域が増えるだろう。

%の青色は親の要素に影響を受ける。PCで見るとサイドメニューがあり、親であるメインコンテンツの描画領域が狭いので、%だとその分、描画範囲も小さくなる。スマホで見るとオレンジも青もコンテンツの描画範囲がそんなに変わらないから、同じくらいの長さで表示されているかもしれない。

CSSのemとremについて

emとremはフォントを基準としたサイズの指定方法だ。初期値はどちらも16pxなはず。もしかしたらブラウザや設定によって変わってくる。この単位はフォントを基準になのでフォントサイズに主に指定する。

emについて

emは相対的にサイズ指定。この相対的とは前述した親要素の影響を受けるという事。例えば下記はどうなるだろうか？


<style>
#oya1 {
  font-size: 1em;
}
#oya2 {
  font-size: 1.2em;
}
#ko1 {
  font-size: 1.2em;
}
<style>
<body>
<div id="oya1">
  <div id="oya2">
  このテキストのフォントサイズは1.2em
    <div id="ko1">
      このテキストのフォントサイズは1.2em？
    </div>
  </div>
</div>
</body>

1emの1.2倍のフォントサイズが1.2emだ。ko1にあるテキストは一見1.2emのサイズになると思えるが、oya2にも1.2emに指定されている為に、1.2 x 1.2で1.44倍になるのだ。親要素は継承され影響を受ける。

このテキストのフォントサイズは1.2em

このテキストのフォントサイズは1.2em？

闇雲にフォントサイズでemを指定していくと親要素に影響を受けてフォントが徐々に大きくなってしまう事が考えられるな。気を付けよう！

えぇー。それじゃあ管理が大変で使いづらいですよ

気持ちは分かるので下で解説するremもあわせて使うとよいかも？

remについて

remはhtmlのルートに対しての相対的なサイズ。htmlのルートのフォントは<html>タグのフォントサイズで基本は16px。よく分からんと思うが、ようするにこの大元の1つだけを基準としているサイズのこと。前述したように1remは16pxなので、これだけを参照してサイズを決める。


<style>
#oya4 {
  font-size: 1rem;
}
#oya5 {
  font-size: 1.2rem;
}
#ko2 {
  font-size: 1.2rem;
}
<style>
<body>
<div id="oya4">
  <div id="oya5">
  このテキストのフォントサイズは1.2rem
    <div id="ko2">
      このテキストのフォントサイズは1.2rem？
    </div>
  </div>
</div>
</body>

このテキストのフォントサイズは1.2em

このテキストのフォントサイズは1.2em？

oya5とko2でフォントサイズが増加しそうだが、元々参照しているのはルートのフォントのみなので大きさは変わらない。ルートフォントはデフォルトで16pxなので、これに1.2倍された数値が2つのテキストのフォントサイズとなっている。

難しいです！

ではoya4を下記に変えるとどうなるんだろう？


#oya4 {
  font-size: 3rem;
}

oya4を3倍のフォントサイズに変えても、oya5とko2はそれを参照せずにルートのフォントサイズのみ見に行く。remはタグの親要素に影響されない。大丈夫。ロジックが分かれば簡単だ！


html {
  font-size: 20px;
}

試した事はないがルートのフォントサイズを変える事もできるはず。上のコードは初期値は16pxのルートのフォントサイズを20pxに変更した。remを使うとこれを参照して20pxが基準となるはずだ。