【css】emとかpxとか%ってどんな違いがあるの？使い分けできるようにしよう

今回は、cssで使われる単位の「px」「em」「%」はどのような違いがあるのかについて紹介します。

これらはそれぞれ、使われるタイミングが変わってくるので参考にしてみてください。

はじめに

今回紹介する内容は、cssで使う「px」「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」「%」にはそれぞれ使い方とタイミングがありました。

それぞれを使いこなせるようにしましょう。

【css】四則演算(足し算)ができるcalcを使えばcssで計算式が使えちゃう！

2017.8.6

cssでレイアウトをカスタマイズしている時、横幅を「100％から50pxだけ少ない値にしたい」というような時はありませんか？ そのような場合は、四則演算を使う「calc」というコードで実装できるので紹介します。...

ではまた。