px？em？CSSでのサイズのいろいろな単位
CSSではfont-sizeで文字の大きさを決める時、widthで横幅を指定する時、heightで高さを指定する時、marginやpaddingで余白の幅を決める時、topやbottomで表示位置を決める時などさまざまな場面で何かしらのサイズを決めることがあります。
一般的には「px」がよく使われると思いますが、他にも「em」「rem」「vw」「vh」などがあるのをご存知でしょうか。
今回はその使い方を紹介したいと思います。
絶対値
サイズには絶対値と相対値があります。
絶対値とは他の要素のサイズに左右されない固定の長さになります。
px（ピクセル）
画面の1ドットが1pxになります。
ドットとは画面を構成する光る点のことです。
ドットが無数に集まって画面ができています。
HTML
<html>
<head>
<style>
.box1 {
width: 1px;
height: 1px;
background: red;
}
.box2 {
width: 100px;
height: 100px;
background: orange;
}
.box3 {
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
divタグで正方形を3つ用意しました。
上から一辺が1px（赤）、100px（オレンジ）、200px（緑）でサイズを指定しています。
一番上の正方形はめっちゃ拡大しないと見えないかもしれません。
1pxとはこれくらい小さいです。
他の要素のサイズがどうあれ、この箱のサイズは変わりません。
これが絶対値でのサイズの指定です。
相対値
絶対値が固定のサイズであったのに対して、相対値は他の何かの要素をベースのサイズとしてそこからどれくらい大きくするか（小さくするか）という指定の仕方になります。
%
%は親要素のサイズを100%として何%分のサイズにするかを指定する方法です。
HTML
<html>
<head>
<style>
.box1 {
width: 100px;
height: 100px;
background: orange;
}
.box2 {
width: 50%;
height: 50%;
background: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
上の例では縦横100pxのオレンジのボックスを親要素の中に緑のボックスがあります。
緑のボックスのサイズは横幅50%、高さ50%で指定しています。
結果がご覧のとおりです。
緑のボックスは縦横ともに半分の長さになっていますね。
em
emはフォントサイズの相対値になります。
フォントサイズとは文字のサイズのことです。
emは親要素のフォントサイズを1emとしてそこからどれくらい大きくするか（小さくするか）という設定方法になります。
HTML
<html>
<head>
<style>
.box1 {
width: 500px;
height: 200px;
background: orange;
font-size: 20px;
}
.box2 {
width: 300px;
height: 100px;
background: green;
font-size: 2em;
}
</style>
</head>
<body>
<div class="box1">
<p>あいうえお</p>
<div class="box2">
<p>かきくけこ</p>
</div>
</div>
</body>
</html>
オレンジの箱に子要素として緑の箱があり、「かきくけこ」と表示しています。
「あいうえお」が親要素の文字になります。
親要素にfont-size: 20px;と設定されているので「あいうえお」は20pxの文字サイズで表示しています。
対して子要素にはfont-size: 2em;と設定されています。
これは親要素のフォントサイズの2倍という意味になります。
つまり「かきくけこ」は40pxの文字サイズで表示しています。
一見、子面倒というか40pxって設定すればいいじゃんと思われるかもしれませんが、こうするメリットはソースコードの保守性にあります。
仮に子要素のフォントサイズは親要素の倍大きく表示したい状況で、親のフォントサイズを20pxから25pxに変えたいとなったとします。
この場合、子要素のフォントサイズも併せて50pxに直してあげないと倍の大きさにはなりませんが、emを使えば親のフォントサイズだけ直せば子のフォントサイズも勝手に調整されます。
親のフォントサイズを起点にしているからです。
逆に親のフォントサイズがどうあれ、子要素は40pxで表示したいんだ！という場面ではemのような相対値を使わずにpxなどを使って絶対値で設定しなければなりません。
上の例では2箇所しかフォントサイズを設定していないので、さほどメリットは感じないかもしれませんが、これが50個、100個と増えていくと手間がかかりますし、修正が漏れてしまうかもしれませんね。
相対値で設定していれば起点となる要素に対して修正すればいいので保守性が高いといえます。
rem
emは親要素を起点にした相対値でのサイズ指定の単位でした。
似たような単位に「rem」があります。
これは起点となるのは親要素ではなくルート要素になります。
ルート要素とはHTMLタグのことになります。
HTML
<html>
<head>
<style>
html {
font-size: 10px;
}
.box1 {
width: 500px;
height: 200px;
background: orange;
font-size: 30px;
}
.box2 {
width: 300px;
height: 100px;
background: green;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="box1">
<p>あいうえお</p>
<div class="box2">
<p>かきくけこ</p>
</div>
</div>
<p>さしすせそ</p>
</body>
</html>
緑の箱の「かきくけこ」に「2rem」を設定しました。
また、htmlタグに対して「font-size: 10px;」を設定しました。
「あいうえお」より「かきくけこ」のほうが文字が小さくなってますよね。
「2em」を指定していたら「あいうえお」の倍大きくなっていたはずですが、小さくなっているのはルート要素が10pxに設定されているからです。
「さしすせそ」はbodyタグの直下に書いてあるのでhtmlタグで設定した10pxが効いています。そして「かきくけこ」はその倍の大きさになります。
pxに直すと、
「あいうえお」は30px
「かきくけこ」は20px
「さしすせそ」は10px
で表示されていることになります。
ちなみに「em」「rem」ともにpaddingなど、font-size以外のプロパティにも使えます。
vw/vh
vwはviewport widthのことです。
vhはviewport heightのことです。
viewportとはブラウザのうち、コンテンツを表示しているエリアのことと思ってもらってよいと思います。
vwはviewportの横幅になります。
vhはviewportの高さになります。
HTML
<html>
<head>
<style>
.box1 {
width: 100vw;
height: 100vh;
background: orange;
}
.box2 {
width: 50vw;
height: 50vh;
background: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
オレンジの箱はvw、vhともに100で設定しています。
つまりブラウザの縦横いっぱいに広がるようにしています。
子要素の緑の箱はvw、vhともに50なので縦横ともにブラウザの半分、つまりブラウザの1/4のサイズになります。
まとめ
いかがでしたでしょうか。
単位は他にもあるのですが、今回紹介したのだけでも足りると思います。
サイズの指定方法は絶対値と相対値があります。
直感的には絶対値で指定する方が簡単なのですが、今はモバイルの時代なのでパソコンと同じかそれ以上の割合でスマホからWebサイトを見られています。
パソコンでWebサイトを作っていると、パソコンで見た時にいい感じになるように作りがちになってしまいますが、パソコンでもスマホでも見やすくなるようレスポンシブなデザインを心がけなければなりません。
そんな時に重宝するのが相対値になります。
何かの要素をブラウザいっぱいに表示したいという場合にサイズを絶対値にするとブラウザのサイズの変化に対応できませんが、100%などで指定しておくとどのブラウザサイズで開かれたとしても画面いっぱいに広がることができます。
是非、相対値での指定方法を覚えてください。
- 絶対値はサイズが変わらない指定方法
- 相対値は他の要素やブラウザサイズによって変化する指定方法
- 1pxは画面の1ドットと同じ
- 100%は親要素のサイズと同じ
- 1emは親要素のフォントサイズと同じ
- 1remはルート要素のフォントサイズと同じ
- 100vwはブラウザの横幅と同じ
- 100vhはブラウザの高さと同じ
- レスポンシブWebデザインを実現するには基本的に相対値を使うべき
したっけ！
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy