CSS font-sizeの使い方 文字の大きさ px / rem / em / %

CSS

【CSS font-sizeの使い方】文字サイズ変更(px rem em %)

2022年6月30日

今回は文字サイズを変更するのに使用されるCSSプロパティ「font-size」の使い方を紹介します。

font-sizeを利用するとテキスト文字の大きさを変更することができます。フォントサイズの指定方法には、pxやrem、em、%など使える単位が多く、今回は各単位の意味や使用例について解説していきます。

font-sizeプロパティでよく使われる値のまとめ

 

 

 

font-sizeプロパティの使い方

font-sizeは、文字のフォントサイズを変更するのに使用されるプロパティです。

フォントサイズを指定していない場合、pタグで囲ったテキストは、多くの場合初期値16pxの大きさで設定されています。

Google Chromeで指定されているデフォルトフォントサイズ

文字を大きくしたい場合は、たとえば「font-size:18px;」といった形で指定することでフォントサイズを指定できます。

font-sizeを18pxに変更している例

なお、上の例ではpx(ピクセル)と呼ばれる値を使用していますが、font-sizeプロパティでは様々な値が使用可能です。

 

font-sizeプロパティでよく使われる単位

それではfont-sizeプロパティでよく使われる単位をご紹介していきます。

font-sizeプロパティでよく使われる値のまとめ

 

px:デバイスの1ピクセルの長さを1とした絶対的な値

1つ目の値はpx(ピクセル)です。

pxはデジタル画像における最小単位のことで、1pxはデバイスの1画素に相当する単位です。後述のremやem、%は相対的な値ですが、pxは絶対的な値です。

font-sizeの値をpxを使って指定してる例
 

ただし、全ての要素のフォントサイズをpxで指定してしまうと、レスポンシブデザインなどでフォントの書き換えに手間がかかる場合があります。

そのため、「rem」をはじめ、emや%といった相対値を使用する場合もよくあります。

フォントサイズをpxで指定する上でのデメリット
 

rem:ルート要素(html要素)のフォントサイズを基準とした相対的な値

font-sizeで2つ目に使う単位はrem(レム)です。remは、pxに続いてとてもよく使われる単位です。

こちらの値はルート要素(html要素)に指定されているフォントサイズを基準(1rem)とし、remという単位を使ってフォントサイズを指定することができます。

font-sizeの値をremを使って指定してる例

また、上の例のようにhtmlに対して「font-size: 10px」といった値を指定することで、予めルート要素のフォントサイズを10pxにしておくことができるので、より直感的にフォントサイズを指定することができるようになります。

  • 1.6rem = 16px
  • 2.0rem = 20px
  • 3.0rem = 30px

ルート(html)要素に指定されているフォントサイズの値を変更すると他のrem指定のfont-sizeも自動的に変わります。

後述のemや%との違って、ルート要素を基準にする為入れ子構造になった際でもフォントサイズの計算がシンプルなため、レスポンシブサイト制作ではよく使われる単位となっています。
 

(補足):remを使う場合はhtmlのフォントサイズを「font-size: 62.5%」と指定することが多い

上の例ではルート要素(html)のフォントサイズを「font-size: 10px」のようにpxを使用して指定しましたが、px指定の場合だとブラウザ側のフォントサイズ設定を無視してしまうことがある為、「font-size: 62.5%」のように指定したサイトも多いです(※)。

(※)ブラウザのデフォルトフォントサイズは16pxで設定されていることが多いため「62.5%」を指定し、ルート要素が「16px × 0.625 = 10px」となるように指定しています。

例えば、目が悪い方であれば文字を見やすくする為に以下のようにブラウザ側の設定を以下のように「大」や「極大」にしている場合があります。

フォントサイズを極大にしている場合

この場合「font-size: 62.5%」と指定していると、「極大」フォントを基準(100%)としてルートのフォントサイズが設定されるので、pタグの大きさも少し大きめ(本例では24px)で表示されるようになります。

ブラウザ設定の「極大」の62.5%がルート要素のフォントサイズとなり pタグの大きさは、それに対する1.6倍になる

一方「font-size: 10px」と指定していると、ブラウザ設定の「極大」フォントの指定が10pxに上書きされてしまう為、pタグの大きさはブラウザ側のユーザー設定を無視して16pxのままになってしまいます。

ブラウザ設定の「極大」が無視され、ルート要素のフォントサイズが10pxに上書きされるので pタグの大きさは、それに対する1.6倍(16px)のまま変わらない

その為、少し慣れにくいですが、ルート要素に「font-size: 62.5%」と指定しているサイトも多くあります。
 

em:親要素のフォントサイズを基準とした相対的な値

2つ目の値はem(エム)です。

こちらの値は親要素に指定されているフォントサイズを基準(1em)とし、emという単位を使ってフォントサイズを指定することができます。

font-sizeの値をemを使って指定してる例

上の例では親要素であるbodyタグのフォントサイズを10pxとしている為、「font-size: 2em」を指定しているpタグのフォントサイズは20pxとなっています。

remと違ってemは入れ子構造になっている際は注意が必要で、例えば各階層でemを使った指定をしていると子要素のフォントサイズは複利計算されてしまうといったデメリットがあります。

フォントサイズをemで指定する上でのデメリット

その為、これが嫌な方はルート要素を基準とした指定値である「rem」を使用することが多いです。

 

%:親要素のフォントサイズを基準とした相対的な値

3つ目の値は%(パーセント)です。

こちらの値は親要素に指定されているフォントサイズを基準(100%)とし、%を使ってフォントサイズを指定することが可能です。

font-sizeの値を%を使って指定してる例

なおフォントサイズにおいてはemと%の考え方は同じです。

 

vw:画面の横幅を基準とした相対的な値

5つ目の値はvw(ブイダブリュー)です。

こちらの値を使用すると画面の横幅を基準(100vw)として、vwという単位を使ってフォントサイズを指定することができます。

font-sizeの値をvwを使って指定してる例

こちらの値を使用することで横幅に応じてメディアクエリを指定しないでもフォントサイズを変更することができ便利ですが、環境によっては文字が小さくなりすぎたり、大きくなりすぎたりするといったデメリットがあります。

その為、vwを使用する際は、以下のようにpx値の他の値も併用して最小値と最大値を指定してあげると良いでしょう。

font-sizeをvwで指定する際の応用テクニック

 

 

まとめ・フォントサイズを変更できるfont-size

まとめです。今回は文字サイズを変更するのに使用されるCSSプロパティ「font-size」の使い方を紹介しました。

font-sizeプロパティでよく使われる値のまとめ

フォントサイズの指定方法には、pxやrem、em、%など使える単位が多く、違いがわからず混乱してしまうことも多いのでぜひ覚えておきましょう。

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS