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

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest

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

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

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

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

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

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

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

その中の「本文」の設定が、EMの基準となるサイズを決定することになります。

typography-set5

ここで設定した(上の画像:16PX)がEMの基準の文字サイズとなり、その基準(16PX)の何倍かを示す数値がEM値となります。

おじさん
おじさん
今、基準の文字サイズを設定したということ?

さすがです!おっしゃる通りです。この本文文字サイズ(例では16px)を基準に、EM値によって文字サイズが変動します。

EM値は、1EM=基準の文字サイズの100%(同じサイズ)となり、0.5EM=基準の文字サイズの50%のサイズとなります。

em-sample
上の画像はElementorで作成した見出しウィジェットです。一番上の赤字が「本文」の見出し(つまり、上記で設定した基準のフォントサイズ)です。次の青字は、スタイルにて1EMを設定した見出しになります。説明通り基準(赤字)の100%なので、同じサイズであることが分かると思います。そして、3つめは、2EMで個別に設定しましたので、基準の16pxの2倍の32px相当となります。

おじさん
おじさん
なるほど、基準のサイズによっての割合ってことね。でも、これってどんな時に使うの?

ご理解頂けましたでしょうか?基準を(本文文字サイズ=100px)にすれば、2EMは200px相当となります。

さて、このEMをどんな時に活用するのが良いか・・・これは、最後のまとめでお伝えしようと思います。

おじさん
おじさん
もったいぶりやがって・・・(ぶつぶつ)

まぁまぁ・・・

REM

EMと考え方は同じです。ただ基準となるのがブラウザフォントサイズになります。

chrome-fontsize

ブラウザサイズはサイトを閲覧するユーザー側で設定するものとなります。上のサンプル画像はchromeのフォントサイズ設定画面です。

この様に、ホームページを見る環境(ブラウザ)によって、基準となる文字サイズが変わってくるということです。

おばさん
おばさん
私は視力が低いから文字サイズ特大よ!

あっ、いらっしゃったんですね(笑)なるほど、そう言った方も少なくないと思います。ブラウザの文字サイズが50pxだとすれば、2REMで設定した場合、100pxとなってしまいます。

browser-fsize-b

↑上のサンプル画像はブラウザのフォントサイズを標準(デフォルト)の状態で表示させた状態です。赤字はピクセルで絶対指定したサンプルテキストです。

↓下のサンプル画像はブラウザのフォントサイズをやや大きめ(125%程度)の状態で表示させた状態です。

browser-fsize-n

赤字(16pxで絶対指定)は、ブラウザのフォントサイズを変更しても変化無いことが分かるかと思います。それに対し、REMで設定した文字サイズはブラウザの設定に対し、変化しているのが分かるかと思います。

おじさん
おじさん
なるほど。で、どんな時に使うの?PXで良くない?

まぁまぁ、最後にちゃんと説明しますので、もう少しお待ち下さい(汗)

ちなみに、ブラウザの標準文字サイズは16pxが一般的とのことです。つまり、1REMは16pxで表示されることが多いと考えられます。

 

VW

VWのVはビューポートのVになります。ビューポートとは?ブラウザで見えている範囲を指します。画面いっぱいにブラウザを表示したり、子ウィンドウとして小さくブラウザを表示させたりと経験があるかと思います。

その際、ブラウザのサイズを変化することによってビューポートが伸縮します。その伸縮に合わせて文字サイズも変えるのVWの単位です。

おそらく動画を見て頂いた方が良いかと思いますので、こちらをどうぞ!

これはブラウザの端っこを掴んで、小さくしたり大きくしたりしています。赤字はピクセル指定(1VWとありますが、PX指定しています)その為、ブラウザサイズの変更によりビューポートが変化しても、文字サイズは変化しない事がわかります。それに対し、VW指定している青字のサンプルテキストは、小さくなったり大きくなったりしているのが分かるかと思います。

この様に、ビューポートの幅に合わせて文字サイズを指定する事が出来るのが、VW単位となります。

ちなみに1VWはビューポートの幅サイズが1000PXだとした場合、フォントサイズは1/100の10PXになります。

どの単位を使うべきか?

お待たせ致しました。結局のところどの単位でホームページを作れば良いの?という所ですが、下に自分なりにメリットとデメリットを考えてみました。

fontsize-merit demerit

おじさん
おじさん
EMが一番いいな。

何言ってるのよ、REMに決まってるじゃない!
おばさん
おばさん


まぁまぁ、落ち着いて下さい・・・(汗)

おそらくどの単位を使うべきか?は無く、特徴を理解して状況に合わせて使うのがベストだと思います。

おじさん
おじさん
はいはい、平和的回答・・・

そんな事言わないで下さいよ〜

ただ、世界的に見ると「PXで指定する」がトレンドの様です。というのは、文字だらけの昔のサイトに比べ、デザインの凝ったサイトなどが多く出てきており、「このサイズで見せる!!!」という思いも強まっていると考えられます。

また、スマートフォンやタブレットなどPC以外での閲覧も増え、それぞれの端末で見やすいサイズを追求する上で、EMなどの便利さは無いですが、コントロールが効くPXは最終的に良いと判断する人も多い様です。

個人的には・・・(ぼそっ)

個人的経験から言えば、PXです。一時EMやREMで作っていた時もあったのですが、やはり場面場面で最適な文字サイズを求める内に、個別の設定箇所が増え、一括で管理する意味がなくなってきてしまったのが理由です。

また、Elementorの文字サイズの設定のしやすさもPXを使う理由の一つです。特にレスポンシブの最適化をする際、機種が多様なスマートフォンビューを作成する際は、PX設定が重宝します。

まとめ

いかがでしたでしょうか?多分一番やってはいけないのは、理解せずに1つのサイトで単位を混在させるのはあまり良くないという事でしょうか。理解した上で、使い分ける!これがベストな気がします。

特にクライアントのサイト制作をElementorでされている方は、ここを理解すると非常にあとあと楽ですよ〜

【YouTubeチャンネル】は、こちら
チャンネル登録お願いします!!

【わからないことはQ&Aで検索!】

多くの人にElementorを知ってもらいたいので
\ SNSでシェアお願いします /
Share on facebook
Facebook
Share on twitter
Twitter

プロフィール

icon

 HTMLはなんとなく聞いた事があったけど、CSSって?っていうレベルの人間がこのElementorと出会い、ハマり、好きになってしまい・・・今や他社のサイト制作を受注するまでに至りました。
 プログラミングリテラシーがゼロのこの僕が、仕事でホームページ制作を請負うまでになり、今や個人事業主から中小企業まで年間のべ25〜30サイトの制作をElementorと共にやらせて頂いております。

自称:プロElementor
趣味:Elementor・デザイン・マーケティング

オススメ記事

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。