今回は、cssで使われる単位の「px」「em」「%」はどのような違いがあるのかについて紹介します。
これらはそれぞれ、使われるタイミングが変わってくるので参考にしてみてください。
はじめに
今回紹介する内容は、cssで使う「px」「em」「%」それぞれにどのような違いがあるのか？についてです。
これらの単位にはちゃんとした違いがあり、それぞれを使い分けることで、より柔軟なデザインを設定できるので参考にして見てください。
それぞれの違いをざっくりと
まずはざっくりとした違いを紹介します。
それぞれの単位にはこのような違いがあるんです。
em...フォントサイズを基準にサイズを変化させる単位
% ...親要素に対してサイズを変化させる単位
では順番に見ていきましょう。
pxとは
pxは「ピクセル」を設定する単位で、要素のサイズを設定します。
pxは要素を設定するための基準になる、ぐらいに考えれば良いです。
pxで設定した値を元に、emや%で設定していくというわけですね。
emとは
emというのはテキストのフォントサイズを元に、フォントサイズを変更させる時に使う単位です。
以下をチェックして見てください。
16pxのテキストと1emのテキスト、それぞれに違いは見られないと思います。
これは、記事のフォントサイズを16pxに設定してあるためです。
つまり、フォントサイズが16pxだった時の「1em」は16pxになるというわけですね。
この値を2emにすれば、フォントサイズは「32px」になり、.5emにしたら「8px」になるんです。
テキストのサイズを設定する時は、基本的にこのemが使われます。
%とは
最後に％です。
先ほど紹介したように「%」は親要素に対して値が変化します。
例えば、以下のような要素があったとしましょう。
これは、親の「div」要素の横幅が「300px」高さが「150px」になっていて、その中に横幅「50%」高さ「50%」の要素が入っています。
このようにすることで、親要素に対して「横幅1/2」「高さ1/2」の要素を作成できます。
逆に親要素のdiv要素を削除すると、親要素が変わりますよね。
ですので、今度はその親要素に対して「50％」の値が横幅になります。
％はレスポンシブデザインに対応させる時によく使われる単位です。
まとめ
今回紹介したように、cssで使われる「px」「em」「%」にはそれぞれ使い方とタイミングがありました。
em => テキストサイズを設定
% => 親要素に対して値を設定
それぞれを使いこなせるようにしましょう。
ではまた。
