【CSS】px以外の単位ってよく分からない？【em、remなどを解説します】
font-sizeとか指定するときに何も考えずにpx指定していませんか？
でも有名企業のWebサイト（AppleやAirbnbなどを参照）のCSSを見ると、「font-size:1em;」とか「sizes="100vw"」とかよく分からない単位を使って指定している場合があります。
そこで今回は、そうした単位の意味を超カンタンに解説していきます。
小難しいことは置いといて、有名企業のWebサイトがどうやって設計されているかを理解できるようになりましょう。
CSSには「絶対単位」と「相対単位」がある
まず知っておいてもらいたいのは、CSSの単位には「絶対単位」と「相対単位」があるということ。
相対単位とは…ブラウザの大きさ・環境によってサイズが変わる単位
カンタンに言うと上記のとおり
例えば、width: 100px;と指定すればどんなときでも100pxで表示してくれます。だからCSSにおけるpxは絶対単位。
しかしながら、width: 100%;と指定するとあるときは100px、別のときは200px、また別のときは50pxなど、ブラウザの横幅に応じてサイズが自動で変更されます。これが相対単位です。（％は厳密に言うと相対単位ではないのですが、便宜上そう言うことにします。）
CSSにはさまざまな単位が用意されており、CSSレイアウトはこういったサイズ指定で成り立っているといっても過言ではないでしょう。
メンテナンス性やレスポンシブデザインなどを考えていくと、px以外の単位を使った方が便利なことがたくさんあります。
では実際どんな単位があるのか？詳しく見ていきましょう。
CSSでよく使われる単位の超カンタンな解説
px（ピクセル）絶対単位
言わずとしれたpx（ピクセル）は絶対単位。
pxで指定してあげれば、どんなときだってその大きさになってくれます。
親要素の影響を受けないので、イメージしやすいのもいい点ですよね。
%（パーセント）相対単位
これもなんとなく分かりやすくていい感じ。
％（パーセント）は親要素に対するパーセンテージで、大きさが決まります。
例えば、親要素の横幅が100pxで、子要素の横幅に50％と指定してあげれば50pxで表示されます。
em（エム）相対単位
パーセントと同じ考え方でOK。「100％＝1em」で親要素の大きさに影響されます。
例えば、親要素にfont-size: 20px;を指定し、子要素にfont-size: 2em;と指定すると、子要素のフォントサイズは40pxと計算されます。（20px × 2em ＝ 40px）
rem（レム）相対単位
rem（レム）はルート要素（htmlタグ）のフォントサイズに対するサイズです。親要素には影響されません。
em単位とよく似ていますが、元になる要素の場所が違います。
rem：親要素に影響されず、htmlタグを元に計算される
vw（Viewport-width）、vh（Viewport-height）相対単位
これはなかなか興味深い単位で、ビューポートのサイズを基準にしてサイズを設定できます。ブラウザの幅と高さにしたがって変化するわけです。
スマホやタブレットの場合は、画面サイズをブラウザのサイズと考えていいでしょう。
例えをvwで考えてみましょう。まず
「ブラウザの横幅全体＝100vw」
と定義されています。ですから、横幅が400pxのときの1vwは４px、横幅が1000pxのときの1vwは10pxになります。
デメリット：ビューポートのサイズが大きすぎたり小さすぎると、テキストのサイズが読みにくくなることがある。新しい単位ゆえに予期しない動作が発生する。
とはいえ、適切に使えばめちゃくちゃ便利です。font-sizeを指定する必要すらなくなります。
vmin、vmax相対単位
vmax：ビューポートの幅と高さのうち、大きい方に対する割合
例として、縦幅300px横幅100pxの画面があった場合、1vminは1pxとなり、1vmaxは3pxとなります。
ちょっと計算がややこしくなる、というのもデメリットの１つかもしれないですね。直感的には分かりにくいです。
いろいろな単位の使いどころ
フォントサイズは相対単位で指定しよう
レスポンシブデザインを使用する場合は、ぜひ相対単位を使ってサイトを作れるようにしましょう。具体的な方法としては例えば下記のとおり
- html要素→ビューポート単位
- h1タグや入れ子の親→rem単位
- 入れ子の子要素→em単位
一般に絶対単位の使用はできるだけ避け、相対単位を使う方が良いと言われています。
メンテナンス面からも、全てをpxで指定すると修正がめんどくさいことになりますからね。１個１個修正なんてやってられません！
よく見かけるbody{font-size: 62.5%;}って何？
これは1emが10pxになるようにするための調整です。
通常、開発者やユーザーがブラウザの設定を変更しないかぎり
100%=1em=1rem=16px
がデフォルトの数値です。でも、16pxって直感的に計算できなくてちょっと使いづらい…。それを解決したのがbody{font-size: 62.5%;}ってわけ。
このコードを書いておくだけで、フォントサイズを15pxにしたいとき、1.5emとかけばいいんだなって比較的簡単に計算することができるわけです。
わりと便利。
画像をめいっぱいに見せたい！
imgタグにheight: 100vh;を指定してあげれば、スマートフォンで見たときに画面いっぱいに画像を表示することができます。
横幅いっぱいに画像を伸ばしたいときにもwidth: 100vw;としてあげれば、簡単になおかつ画面の大きさにとらわれることなく引き延ばすことができますよ。
計算もできるcalc()
ビューポート単位の弱点として、ビューポートのサイズが大きすぎたり小さすぎると、テキストのサイズが読みにくくなることがあるのは前述したとおりです。
この弱点を回避する方法として、calc()プロパティを使用して、最小フォントサイズを設定し、ビューポートの倍数でフォントサイズを制御するという方法があります。
コードは下記のとおり
html { font-size: calc(112.5% + 0.5vw) }ここでは詳しく解説することはしませんが、このテクニックを詳しく知りたい方は「viewport単位ベースのタイポグラフィ」に説明されています。
このように、viewport単位をほかの単位と組み合わせて使用する解決策があります。
まとめ：CSSの単位
CSSで使われるさまざまな単位をいくつか紹介してきました。
- px→ピクセル指定。どんな時もその大きさ。
- %→親要素に対するパーセンテージ。可変。
- em→パーセントと同じ考え方。100%=1emで親要素に対して可変。
- rem→ルート（htmlタグ）に対してサイズ。親要素には影響されない。
- vw、vh→ブラウザの幅と高さに対しての割合。
上記のとおり
最初はいろいろあって訳が分からない！って思うかもしれませんが、落ち着いて調べ、実際に使ってみると、「なんだ、こんなもんか」と感じてくると思います。
怖がらずにまずは使ってみましょう！
ペット保険ペット保険の資料一括請求サービス
キャットフード愛猫にスッキリ快適な毎日を過ごしてほしいあなたへ『モグニャン』