【CSS】Webサイト制作でよく使う単位について解説。【px,%,em,rem,vw,vh】
この記事ではWebサイト制作でよく使う単位について解説します。
CSSに用意されている単位はたくさんあるんですけど、正直使うものは多くありません。なんでこれ用意されてるんだろ？みたいなのが多いです。
これだけ覚えれば大丈夫！というような記事になっているので、ぜひ読んでください。
よく使う単位にはどんなものがある
よく使う単位は下記の通りです。
よく使う単位！
- px
- %
- em
- rem
- vw
- vh
この6個がよく使う単位です。
というか、これだけ知っていればOKです！
「px」
「px」はWebサイト制作でよく使われる単位のことです。小さな１つの点の長さのことを表します。
「10px」だったら、小さな点が10個分、といった感じです。
Webサイト制作で使われるこの「px」という単位は、ディスプレイを構成する最小の点のことでは、ありません。
1pxの点も複数の点の集まりで構成されています。
例えば「iPhone 12 Pro」だったら、横幅が「390px」で作られてます。
タブレットの横幅は「700px」とかですかね。
ノートパソコンの横幅は、「900～1400px」とかです。ちなみに僕のノートPCは「1366px」だった気がします。
「%」
CSSで「%」は使う場所によって、どの長さを基準とするかが異なります。
例えば、「width」に「10%」とかって指定すると、「その要素の親要素のwidthの10%分の長さ」という指定になります。
「font-size」に「10%」と指定すると、「その親要素のfont-sizeの10%分のサイズ」という指定になります。
「em」
「em」は、その要素のフォントサイズを１とする単位です。
「font-size」に対しては、その要素の親要素のフォントサイズを１とします。
「rem」
「rem」はルート要素のフォントサイズを１とします。ルート要素とはhtml要素のことです。
html {
font-size: 16px;
}これなら、「１rem」は「16px」となります。
「vw」
「vw」は、ビューポートの幅の1%を長さを１とします。
また、「viewport width」の略です。
「vh」
「vh」は、ビューポートの高さの1%の長さを１とします。
また、「viewport height」の略です。
「rem」を使ったテクニック
html {
font-size: 62.5%;
}
h2 {
font-size: 1.8rem;
}- html要素のフォントサイズに「62.5%」と設定する。
- 他の要素にも「rem」を使ってフォントサイズの設定をする。
というテクニックがあります。
これには理由が２つあります。
- ブラウザの設定でフォントサイズを変えるとhtml要素のフォントサイズだけが変わる。
- 「62.5%」とすると「rem」での指定がしやすい。
この２つですね。
ではこのテクニックについて詳しく解説します。
ブラウザの設定でフォントサイズを変えるとhtml要素のフォントサイズだけが変わる。
設定でデフォルトのフォントサイズを変えることができるブラウザも多いです。
Chromeなら、「設定」＞「デザイン」＞「フォントサイズ」という流れで変更できます。
ここで変更できるのは、html要素に設定されるデフォルトのフォントサイズです。
なので、「rem」を使って、h2などの他の要素のフォントサイズの設定をしておくことで、ユーザーがWebブラウザのフォントサイズのデフォルト設定を変更していた場合に、しっかりそれが反映されるような設計にすることができます。
注意してほしいのは、ここで変えることができるのは、「デフォルトのフォントサイズ」ということです。
Chromeなら「16px」です。他のブラウザもこのサイズが多いと思います。
で、「デフォルトのフォントサイズ」というのは、html要素にフォントサイズの指定がなかった場合に使われるサイズのことです。
つまり、html要素に「font-size: 10px」とかいう指定がされていた場合は、ユーザー側がデフォルトのフォントサイズを変更したところで意味がありません。
なので、html要素に対してフォントサイズの絶対的な指定をしない、というのと、
他の要素に「rem」を使ってフォントサイズの指定をして、html要素のフォントサイズの影響をサイト全体で受けるようにしておく、という２つがこのテクニックには必要になります。
「62.5%」とすると「rem」での指定がしやすい。
html {
font-size: 62.5%;
}のように相対的な指定しておくと、デフォルトのフォントサイズの影響を受けることができます。
「font-size」プロパティに対して、「%」で指定すると、その要素の親要素のフォントサイズからの相対的な値になるのですが、html要素はルート要素なので、親要素がありません。なので相対的な指定をすると、デフォルトの値からの相対的な指定になります。
特に何も設定していなければ、デフォルトのフォントサイズは「16px」であるブラウザが多いです。
なので、「16px × 62.5% = 10px」となるので、
html要素のフォントサイズを「10px」にすることができます。
これの何がいいかと言うと、例えば、html要素のフォントサイズが「16px」のままだったら、h2の要素のフォントサイズに「13px」と指定したければ、「0.8125rem」と指定しなければなりません。
「16 × 0.8125 = 13」なので。
これだと計算するひと手間がかかります。
ですが、html要素のフォントサイズが「10px」だったら、「13px」と指定したければ、「1.3rem」と書けばいいので、簡単です。
これらの理由から、html要素に対して、「相対的な値」かつ「デフォルトが16pxのときに10pxとなる値」を考えると、「62.5%」という値がでてくる、ということですね。
ですがこの指定は必要ないと個人的に思っています。
そもそもいろんなWebサイトがあって、それぞれ文字の大きさは違ったりします。なのでもし読みにくいなって思うタイミングがあれば、個別に拡大したり縮小したりする必要があります。
現在のユーザーは、文字が小さければズーム機能を使ったりして、Webサイト自体を拡大したりするのかな、と思うので、別にいらないかな、と僕は個人的に判断しています。
Chromeだったら、Ctrlキーを押しながら、マウスホイールを回すことで、Webサイトをみる拡大倍率を変えられるし、そもそもWebブラウザの設定からフォントサイズを変更している人は少ないんじゃないかな、とも思っています。
なので、「62.5%」という指定は使わずに、普通に「px」とかでフォントサイズの設定をするだけでいいんじゃないかなって思います。
デフォルトのフォントサイズの変更に対応しているサイトが多ければ、その機能を使うユーザーも増えるかもしれないので、このテクニックを使ってサイトを作っておくこともいいかもしれませんが、そもそも対応しているサイトが少ないのが現状なので(2023/11/15)、「rem」を使わなくてもいいんじゃないかな、と個人的には思います。
まとめ。
Webサイト制作でよく使う単位は下記の６つ。
よく使う単位！
- px
- %
- em
- rem
- vw
- vh
「62.5%」のテクニックもあるけど、あまり必要性を感じない。
ではまた！