クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

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

f:id:clrmemory:20170809102342p:plain

こんにちはクリアメモリです!

今回は、cssで使われる単位の「px」「em」「%」はどのような違いがあるのかについて紹介します。これらはそれぞれ、使われるタイミングが変わってくるので参考にして見てください。

はじめに

 

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

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

 

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

 

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

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

 

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」「%」にはそれぞれ使い方とタイミングがありました。

px => 絶対値

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

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

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

www.clrmemory.com

 

ではまた。

新着記事