cssサイズ指定方法(px・%・em・rem)の違いを知ろう!

HTML/CSS

こんにちは、なっちる先生(@nacchi_jagariko)です。

現在、フリーランスとして活動しています。

突然ですが、cssでサイズ指定をするとき、サイズの単位について注意しながらコードを書いていますか?

「px」しか使ってなくて、特にこだわってなかった

という方、多いのではないですかー?

実は、cssでのサイズ指定方法には「px・%・em・rem」があって、それぞれ違いがあります。

今回は、そんな「px・%・em・rem」の違いについて、説明していきます。

この記事は以下のような人向けです。

サイズ指定の「px・%・em・rem」ってどう違うの?

では、参りましょう〜。

 

スポンサーリンク

 絶対値と相対値

まず、サイズ指定には「絶対値と相対値」があります。

絶対値というのは、名前の通り「絶対」ということで、絶対的な値です。

その反対で、相対値というのは、基準になる要素の大きさを参照したときのサイズ指定方法です。

基準になる要素には、「親要素」か「ルート(html)」の場合があります。

「px・%・em・rem」の分類分け

「px・%・em・rem」を分類分けすると、

絶対値には、

  • 「px」

が当てはまります。

相対値には、

  • 「%」(親要素基準)
  • 「em」(親要素基準)
  • 「rem」(ルート(html)基準)

が当てはまります。

絶対値の「px」だけで大丈夫じゃね?

と思う方がいるかもしれません。

しかし、相対値を使うと、

  • レスポンシブサイトを制作する場合に、基準となる要素のサイズ指定をすればいいだけになり、コードがスッキリする
  • 文字サイズが拡大すると大きくなる(お年寄りなどに優しい)

という利点がありますので、少しは知っておくべき話です。

 サイズ指定方法(px・%・em・rem)の違い

では、早速「px・%・em・rem」の違いについて、個別で説明していきます。

「px」

前述した通り、絶対的な値の「px」です。

少し踏み込んで説明すると、px(ピクセル)に決まった大きさはありません。

画面解像度(dpi)によって大きさが変わります。

「px=○○mm」と表すことができないのです。

へ、画面解像度によって違うんなら、絶対値じゃないじゃん!

と混乱してしまう方がいらっしゃるかもしれませんが、また別の次元での話になります。

少なくとも、Web制作でpxと解像度(dpi)について気にする場面は、滅多にないので、深く考えなくて大丈夫です。

「%」

ここから相対値になります。

%(パーセント)は、親要素を基準としたサイズになります。

See the Pen MROgWN by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

上のコードからわかるように、親要素によってサイズが違いますね。

最初に出てくるpタグは、15px、

次に出てくるpタグは、30px、

になります。

「em」

em(エム)は、%と同様、親要素を基準としたサイズになります。

「%」を2桁繰り下げたものが「em」になります。

「100% = 1em」になります。

See the Pen VNrZez by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

大きさを見ても、%と同じですね。

「rem」

rem(レム)は、%とemと毛色が違い、ルート(html)が基準になります。

単位の考え方としては、emと同じです。

See the Pen yrPBML by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

上のコードでいうと、ルートの20pxが基準になって、

最初に出てくるpタグは、10px、

次に出てくるpタグは、10px、

になります。

 おまけ(vw・vh)

たまに「vw・vh」も見かけることもありますので、簡単に説明しておきます〜。

vw・・・viewport width。ビューポートの幅に対する割合です。

vh・・・viewport height。ビューポートの高さに対する割合です。

画面の横幅全体を「100vw」とみなしますので、 例えば、10vwと記述すると、「ビューポートの全体幅に対して1/10」のサイズになります。

引用:https://skygold.jp/web/2901

簡単に言うと、

単位は「%」と同じで、

基準が「スクリーンの幅」or「スクリーンの高さ」

です。

わかりやすいですし、基準とするところがシンプルなので、便利なサイズ指定方法ですね!

 まとめ

いかがだったでしょうか?

サイズ指定方法にもいろいろとありますね〜。

サイトの用途や都合によって、サイズ指定を使い分けてみてください!

以上でなっちる先生の授業を終わります。

素敵なプログラミングライフを!

タイトルとURLをコピーしました