px?rem?サイズいろいろ

スキルシミュを作ろうと思ってから、ソースを覗いたのですが、サイズ指定にpxとかremとかあってよく分からん、ということで調べてきました。

スポンサーリンク

どれがいいの?サイズ指定

pxとは

まずpx。pxとは画面の色情報を持つ最小単位とのこと。この一つ一つのpxが集まって文字や図形を形作っているわけです。

ちなみに一番見やすいフォントサイズは16pxとのこと。Simplicityはデフォルトが16pxですね。IEでフォントサイズを変更した時、px指定だと文字の大きさを変えられないようです。FIrefox、Chrome、Microsoft Edgeは拡大、縮小でpx指定でも文字の大きさが変えられます。

20px

上はフォントサイズを20pxにしたもの。少し大きくなっていますね。

%で

%はサイズをデフォルトの何%で表示するか指定できるもの。相対的な大きさになります。このサイトだと

100%=16pxとなります。

80%

120%

emって何?

emも相対的な大きさの指定になります。1文字の大きさが1emです。大体%と同じようです。

相対指定は親要素の影響を受けます。入れ子のような構造だと

  • 1.6em

    1.6em

上は両方とも1.6emで指定したのですが、入れ子構造になっているため2番目が

1.6×1.6=2.56em

になってしまうのです。このようにemで入れ子にすると、どんどん拡大もしくは縮小されることになります。

remだと…?

remで同じように入れ子にしてみます。

  • 1.6em

    1.6em

どうでしょうか。大きさが揃っています。

remはroot要素(html)の大きさを基準にするために、入れ子にしても拡大、縮小が起きません。

こう見るとremが便利そうですが、問題は対応していないブラウザ(IEなど)があることです。その場合に合わせて、pxなどで指定する必要があるようです。

まとめ

読者が読みやすい大きさで見られるように相対指定が良さそうですが、emでは入れ子になると面倒が起きる、remは対応していないブラウザがある、と一長一短ですね。使いやすさと見やすさから、remを使うのが主流になるのかな?

rem対応がブラウザの基本になってほしいですね。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする