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

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

 

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

はじめに

 

今回紹介する内容は、cssで使う「px」「em」「%」それぞれにどのような違いがあるのか?についてです。

これらの単位にはちゃんとした違いがあり、それぞれを使い分けることで、より柔軟なデザインを設定できるので参考にして見てください。

 

それぞれの違いをざっくりと

 

まずはざっくりとした違いを紹介します。

それぞれの単位にはこのような違いがあるんです。

 

Point
px...要素やテキストのサイズを絶対的に設定する単位

em...フォントサイズを基準にサイズを変化させる単位

% ...親要素に対してサイズを変化させる単位

 

では順番に見ていきましょう。

 

pxとは

 

pxは「ピクセル」を設定する単位で、要素のサイズを設定します。

pxは要素を設定するための基準になる、ぐらいに考えれば良いです。

 

pxで設定した値を元に、emや%で設定していくというわけですね。

 

emとは

 

emというのはテキストのフォントサイズを元に、フォントサイズを変更させる時に使う単位です。

以下をチェックして見てください。

 

16pxのテキスト
1emのテキスト

 

16pxのテキストと1emのテキスト、それぞれに違いは見られないと思います。

これは、記事のフォントサイズを16pxに設定してあるためです。

 

つまり、フォントサイズが16pxだった時の「1em」は16pxになるというわけですね。

この値を2emにすれば、フォントサイズは「32px」になり、.5emにしたら「8px」になるんです。

 

32pxのテキスト
2emのテキスト

 

テキストのサイズを設定する時は、基本的にこのemが使われます。

 

%とは

 

最後に%です。

先ほど紹介したように「%」は親要素に対して値が変化します。

 

例えば、以下のような要素があったとしましょう。

 

 

これは、親の「div」要素の横幅が「300px」高さが「150px」になっていて、その中に横幅「50%」高さ「50%」の要素が入っています。

このようにすることで、親要素に対して「横幅1/2」「高さ1/2」の要素を作成できます。

 

逆に親要素のdiv要素を削除すると、親要素が変わりますよね。

ですので、今度はその親要素に対して「50%」の値が横幅になります。

 

 

%はレスポンシブデザインに対応させる時によく使われる単位です。

 

まとめ

 

今回紹介したように、cssで使われる「px」「em」「%」にはそれぞれ使い方とタイミングがありました。

 

Point
px => 絶対値

em => テキストサイズを設定

%  => 親要素に対して値を設定

 

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

 

 

ではまた。

過去にレビューしたアイテム


関連記事
おすすめの記事