CSSでのサイズ指定はどれがいい?「px」「%」「em」「rem」の違い

みなさんこんにちは!フリーランスプログラマーのsatoです。皆さんは文字サイズの指定をどんな形式で行っていますか?

こういう時に使用するpx部分の話です。ここにはpx以外にも%、em、remが設定できますよね。今回は、これらの明確な違いや、使い分け方について見ていきたいと思います。

今までなんとなくpxしか使っていなかったなぁ。なんて人は必見です!ぜひ一通り把握し、上手にサイズ指定が行えるようになりましょう!

サイズ指定の種類一覧

存在するサイズ指定方法を一覧でまとめました。

pxサイズを絶対値指定する
%サイズを相対値値指定する(親要素基準)
emサイズを相対値値指定する(親要素基準)
remサイズを相対値値指定する(ルート要素基準)

いろいろありますが、実は大きく分けると2種類しかありません。絶対値基準相対値基準かです。

絶対値と相対値

絶対値と相対値についてわからない初心者もいると思うので、違いを見ていきましょう。

絶対値とは

絶対値とは、他の要素に左右されない値のことを言います。たとえば、以下のように指定したら、必ずフォントのサイズは20pxとなるわけです。

相対値とは

相対値とは、他要素を参考に数値が決まる値のことを言います。以下のように書けば、元となる要素(%の場合は親の要素)のサイズの200%。つまり親要素の2倍のサイズになるということですね。

まとめ

つまり先ほどの一覧を合わせてまとめると以下ということになりますね。

  • pxは指定した値そのままのサイにしたい時に使う
  • %、em、remは、他要素を基準にしての、サイズ指定を行う時に使う

pxについてもっと詳しく!

pxはいたってシンプルです。先ほども説明した通り、指定した要素そのままのサイズになるということですね。例えば以下のように、親要素がfont-sizeを10pxと指定しても、なんの影響も受けないとうことです。

CSS部分:

HTML部分:

結果:

%についてもっと詳しく!

%は相対要素でしたね!今回の場合、親が文字サイズを10pxと指定し…、自分のようそでは、300%と指定したとしましょう。すると…

CSS部分:

HTML部分:

結果:

親要素の10pxの300%つまり3倍のサイズになりました!

emについてもっと詳しく!

emは非常に簡単です!実は%と同じ効果で、書き方が少し違うだけの機能なんです。%の100%がemの1emに該当します。たえば250%と同じ効果を持たせないなら2.5emと書きましょう!

CSS部分:

HTML部分:

結果:

ちゃんと2.5倍になっていますね!

remについてもっと詳しく!

実はremはroot emの略です。つまり、emとremの違いは…

  • em = 親要素を元にした相対値サイズ指定
  • rem = ルート要素を元にした相対値サイズ指定

これだけの違いなんです!ちなみにルート要素とはhtmlセレクタを指します。

上記の書き方の部分ですね。今回は、以下のように設定した状態で結果を見てみましょう。

htmlセレクタに「font-size: 20px;」
親要素に「font-size: 10px;」
自身に「font-size: 1rem;」

CSS部分:

HTML部分:

結果:

ルート要素の20pxの1remつまり1倍のサイズで、文字が表示されています。またemとの使い分け方ですが、サイトの階層が複雑になることが懸念される場合は、階層を考えなくて済むremを使用すると良いでしょう。

まとめ

今回はサイズ指定の種類について一式見て回りました。再度まとめを確認すると、以下の通りです。

pxサイズを絶対値指定する
%サイズを相対値値指定する(親要素基準)
emサイズを相対値値指定する(親要素基準)
remサイズを相対値値指定する(ルート要素基準)

うまく使い分けることで、サイトを管理しやすくなる箇所です。理解した上で何を使うか選んでいきましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

sato

sato

学生時代を含めると、かれこれ10年以上プログラマーとして過ごしています。
様々な言語や環境、プロジェクトに関わってきましたので、より実践的な記事をみなさんにお届きるよう情報発信していきます!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説