CSSのpxとemの違いについてのまとめ

最終更新日:2017/08/26 公開日: CSSとコーディング, WEB関連

CSSのpxとemの違いについてのまとめ

CSSのpxとemについていまいちその違いを理解していなかったので、調べたついでにまとめてみました。




CSSのfont-size指定で使われるpxとemの違いって何?

pxとemは、CSSでホームページの文字サイズなどを指定する際の単位。

px(ピクセル)
ピクセル単位の指定。
環境によって変化しない絶対単位。

em(エム)
文字の高さを基準にした単位。1emは1文字分。
MacintoshやWindowsなどの使用している環境によって大きさが変化する相対単位。
bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になる。

スクリーンショット(2014-08-18 10.30.56)

CSSのfont-size指定はpxとemのどっちの指定がいいの?

どちらが正しいというわけでもなく、pxで指定する人と、emで指定する人がいるようです。もちろん%などのその他の指定をする人もいるようですが、基本的にはpxかemのどちらかになります。

個人的にはpxの方が解りやすいのですが、とある理由からpxでの指定を避けることが推奨されているようです。

CSSのfont-sizeをpxで指定するのが駄目だと言われる理由

font-sizeを絶対単位であるpxで指定すると、ブラウザ側の設定で文字の大きさを変えたとしても文字の大きさが変わらないという点が問題になるようです。

例えば、閲覧者が「このホームページは文字が小さくて見づらい」と思い、ブラウザの文字設定を変えて、大きく表示するようにしても、pxで指定している場合は大きさが変わらないため、ストレスに感じる人も出てくるのではないか。というわけです。

そんな理由からfont-sizeをpxで指定することは閲覧者に対して”非常に不親切”な状態を押し付けてるという風に考えられるため、font-sizeはなるべく相対単位のemか%で指定してあげるのが良いとされているようです。

え?IEだけの問題?ちょっと待って・・・

pxでfont-sizeを指定をすると、ブラウザ側で文字の大きさを変えられなくなるのは、実はIEに限っての問題だったりするようです。

「だったらpx指定でいいじゃないか。IE?何それ?知らねえ?」って思う人も多いと思います。IEを使ってて不便に感じることが多いなら「だったらIEを使わなければいいのではないか、さっさと別のブラウザに乗り換えてしまえば良い」と、僕、個人的にも思います。

そもそものお話で、仮にemで指定したとしても文字サイズが小さくて見づらいと思ったら、わざわざ文字サイズをブラウザ側で大きくしたりして見ないですよね?そのサイトではない別の見やすいサイトを探すのが普通のアクションだと思うんです。

つまり、pxで指定しようがemで指定するのが問題ではなく、小さくて読みづらいと思われる文字サイズのサイトを作ることが問題だと思うのです。

emで指定してもpxを基準に考えた方が解りやすい

font-sizeをemで指定する場合でも、結局はcontainerなどのwidthの設定はpxですることが多いわけですから、◯em=◯pxなどというように、emを使用しつつもpxを意識したレイアウトをする必要が出てきたりするのです。

本来は全てpxで指定した方が都合が良いものを、わざわざemで指定する方法を選択してしまっているために、わざわざemをpxに換算して考える必要があったりで、ややこしくなってしまっているのです。それを考えると、font-sizeもpxで指定するのが、本当はすっきりして分かりやすいはずです。

さっさとfont-size指定もemではなくpxで行なう流れになっても良いように思うのですが、世の中的にまだまだ無理なようなので、emとpxのサイズの相対関係をできるだけ分かりやすくするために、下記のような方法などを利用したりしているようです。

pxとemのサイズの相関関係を自動変換するサイト

pxからemにとか、emからpxに単位を変更したい場合はPXtoEMで自動計算してくれるので便利です。

bodyやhtml要素でfont-sizeを62.5%にすると理解しやすくなる

計算をいちいちするのがめんどくさい人は、bodyやhtml要素の設定でfont-sizeを62.5%くらいにしておくと、ちょうど10px=1emくらいになるというわけです。

body {
 font-size:62.5%;
}

つまり、emでfont-sizeを指定する際に、表示される文字の大きさは16pxくらいが良いと思うなら1.6emと書けば良いし、24pxくらいが良いなら2.4emと書けば良いわけです。
スクリーンショット(2014-08-18 10.37.12)




CSS3ではfont-sizeをremで指定できる

CSS3ではpx、emでfont-sizeを指定する他に、新しくremという単位があります。
html等の要素に基準となる大きさを指定して、それを基準に各要素を指定しておく方法です。
こんな感じで指定します。

html {
  font-size: 62.5%;
} 
body {
  font-size: 1.6rem; /* 16px*/
}

ただし、対応していないブラウザもあるため、対応させるための記述を増やす必要があり、便利なのか不便なのかよく解らなくなってしまうため、ここでは端折ることにします。

CSSのfont-size指定の適切な大きさは?

font-sizeが小さいのがスタイリッシュに思われていた時代もあり、猫もしゃくしも10pxで指定していました。

いくらモニタの解像度が低い時代と言っても、非常に見づらいホームページばかりだったのですが、文字が小さいとスタイリッシュに見えてカッコ良かったので、多くのサイトが10pxで指定していたりしました。

2007年前後だったと記憶していますが、当時は紙媒体とWEB媒体の切り分けがまだ出来ていない感じの時で、紙媒体で小さな文字が流行しWEBページも小さな文字で指定していた結果だったような気がします。

こんな文字の大きさのサイトばかりができあがっていた時代があったんですね。DTP関係と海外からのデザインの流行の関係、それと当時はWEBデザイナーという職業もあまり無く、紙媒体のデザイナーがデザインしていたことも原因の1つだったと思います。アルファベットはまだ10pxでも読もうと思えば読めますが、日本語の場合は、非常に見づらい文字サイズになります。

モニタの解像度が上がるにつれて、10pxで指定されたサイトも自然消滅し、font-sizeも少しずつ大きくなってきた結果、今だと16pxとか18pxを標準にしているサイトが多くなっているように感じます。

ではfont-sizeの適切な大きさはどの程度が良いのでしょうか?

結論から言えば、文字が「大きい」「小さい」ってのはあくまで主観であり人によって感じ方は違います。

さらには閲覧する環境や扱う情報の種類によっても違うでしょうし、デザインによっても適正なサイズは違うと思います。

つまりfont-sizeの指定に正解は無いのです。

CSSのfont-sizeの指定派それぞれの基準に添った設定を

CSSのfont-sizeには決まりが無い、というか、自分が決めるしかないわけですね。大手サイトのfont-sizeに合わせたからと言って、自分のサイトでぴったりのサイズとなるとは限らないのです。

なので、デザイン重視であるならば、デザインに合った設定を、読みやすさ重視であるならば、とにかく読みやすい設定をする、という感じで、自分自身が設定した基準に添って決めるのが一番正しいのではないかと思います。

結果としてどのfont-sizeで指定するかによってサイトの印象は変わってくるはずですから、適切なfont-sizeを指定できることがWebデザイナーとしてのセンスを問われる部分になるのかもしれません。

参考までに、個人的には、文字数の少ないサイトなら21pxくらい、ブログなどのように長い文章の場合は16pxくらいのfont-size指定が非常に読みやすくて好きなサイズです。

猫のLINEスタンプ

猫のLINEスタンプ

Comment

  1. […] こちらのサイトさんに分かりやすくかかれていました♪ →http://memo.studiogaki.com/px-and-em/ […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

猫のLINEスタンプ

猫のLINEスタンプ
  • ちゃんとしたブログはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

PAGE TOP ↑