WordPressのテーマビルダープラグイン「Elementor」のファンブログ

フォントサイズ単位 (px,em,Rem,VW)とは一体?

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
fontsize-thumbnail

フォントサイズ単位 で復帰!

フォントサイズ単位 が復帰第一弾!

おじさん
おじさん
急にブログを更新するな!

すみません、ようやく時間が出来てきたので、これから頑張ります。

という訳で、復帰早々マニアック?なテーマでお届けして参りたいと思います。ですが、これを知っておくと自身を持ってフォントサイズ単位を選べると思いますので、じっくり見て行きましょう!

フォントサイズ単位 とは一体?

fontsize-indicator

赤枠の部分の(PX、EM、REM、VW)がフォントサイズ単位になります。以前のバージョンでは%やVHなどもあったのですが、現在(Elementor Ver3.0)ではこの4種となっています。

おじさん
おじさん
確かに、これ前から気になっていたんだよね。

ですよね、なんとなく選択してなんとなく使ってたりしてる方も少なくないはず!以前は自分も「EMでこのサイトは作ろう!」とか、根拠の無い自分ルールでやってました・・・。

それでは、それぞれどの様な単位なのかを見て行きましょう。

PX(ピクセル)

画像のサイズ(300px×240pxみたいなやつです)などでお馴染みの単位かと思います。でも、いざ「PXって何?」と聞かれると答えられる人は多くは無いと思います。

ざっくり言うと、1px=画面表示出来る最小の単位

おじさん
おじさん
あー無理。

まぁまぁ・・・(汗)じっくり行きましょう(笑)

画面というはパソコンのモニターや、スマホの画面を指します。その画面上で一番小さく表示出来る限界のサイズとなります。ここでポイントなのは、モニターの解像度になります。この解像度とは、簡単に言えばピクセルの密度になります。

pixel_set

上のイメージの様に、解像度が高ければPXは小さく表示され、解像度が低ければPXは大きく表示されることになります。

おじさん
おじさん
なんか塗りつぶしていくパズルみたいだな。

確かにありますよね。ドット絵のイメージが近いかもしれません。マスが多く小さければ詳細な絵となり、マスが少なく大きければモザイクがかかった絵になるようなイメージです。

つまり、フォントサイズにおけるPXはモニターの性能によって大きさが変わってくるということになります。とは言え、文字が読めない程の解像度のモニターは今の時代少ないと思います。

今回取り上げる単位の中では、絶対的指定が出来るサイズ単位となります。

おじさん
おじさん
絶対的とはなんだね?

それはこの後を見て頂ければよりわかりやすいのですが、指定したサイズ(例:20px)はいかなる場合も20pxに変わりはないということです。

EM

先ほどのPXとは相反して、相対的な単位となります。例えば、2emと指定しても、ある条件では文字サイズが異なるということです。

全〜然わかりません。
おじさん
おじさん

一般的なEMの説明文としては「親要素のfont-sizeを基準にした相対値」となります。ただし、Elementorの場合、テーマスタイルで設定された本文の文字サイズが基準となります。

typography-set2

Elementor編集画面の右上のメニューを開くと、「サイト設定」があります。

typography-set3

サイト設定の中に(テーマスタイル)タイポグラフィという項目があります。(※Elementor Ver3.0以上)

typography-set4

その中