SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.03.26
  • CATEGORY
TITLE

【CSS font-size】文字の大きさ・単位について解説します!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は「【CSS font-size 】文字の大きさ」について解説します!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • font-sizeの使い方について学びたい方へ
  • font-sizeの単位が多すぎて分からない方へ

今回は「文字(フォント)」に対してfont-sizeプロパティを適応させる解説になります。

絶対値と相対値について

絶対値と相対値について

単位の種類は「絶対値」と「相対値」の2種類があります。

絶対値について

絶対値とはブラウザの表示領域や親要素のサイズに影響させることなく、指定したサイズが表示します。
よく使用させれるpxが例にあげられます。

相対値について

相対値とはブラウザの表示領域や親要素のサイズを基準として相対的に算出される単位です。
ブラウザの操作によって変化する単位です。
よく使用させれる%などが例にあげられます。

フォントサイズ指定の単位について

フォントサイズ指定の単位について

フォントサイズを指定する際に、px%emremなど、いろいろな単位があって
わかりずらいですよね。

まず基本として、デフォルトのfont-sizeフォントサイズは16pxと言われています。

css基本的な記述方法

px(ピクセル)について

p{font-size: 16px}

一般的に使用されるpxは絶対値で指定できる単位です。
絶対値であるpxは他に影響を受けないため「16px」と指定した際には、必ずそのサイズで表示されます。

%(パーセント)について

%(パーセント)について
html {
  font-size: 100%;  /*--16px--*/
}   
 
div {
  font-size: 200%;  /*--32px--*/
}   
 
div p {
  font-size: 50%;  /*--16px--*/
}

See the Pen
xxGQPRV
by shu (@shu0325)
on CodePen.


%は親要素の相対値で指定ができる単位です。

ページ内でfont-sizeを指定していない場合は、100%=16pxとなります。
htmlfont-size:100%を指定しています。100%はデフォルトサイズの16pxになります。
div要素はhtmlに対しての200%指定になるため、倍の32pxになります。
div pタグは親要素の32(px)×50%=16pxになります。

ページ内でfont-sizeを指定している場合について

html{
    font-size: 14px; /*--14px--*/
}

div{
    font-size: 24px; /*--24px--*/
}

div p{
    font-size: 50%; /*--12px--*/
}

See the Pen
abOQMOb
by shu (@shu0325)
on CodePen.

em(エム)について

em(エム)について
html {
  font-size: 1em;  /*--16px--*/
}   

div {
  font-size: 2em;  /*--32px--*/
}   

div p {
  font-size: 0.5em;  /*--16px--*/
}

See the Pen
oNXQmyN
by shu (@shu0325)
on CodePen.


emは親要素の相対値で指定ができる単位です。

ページ内でfont-sizeを指定していない場合は、1em=16pxとなります。
htmlfont-size:1emを指定しています。1emはデフォルトサイズの16pxになります。
div要素はhtmlに対しての2em指定になるため、倍の32pxになります。
div pタグは親要素の
32(px)×50%(0.5em)=16pxになります。

ページ内でfont-sizeを指定している場合について

html {
  font-size: 14px;  /*--14px--*/
}   

div {
  font-size: 2em;  /*--28px--*/
}   

div p {
  font-size: 0.5em;  /*--14px--*/
}

See the Pen
gOpQqNR
by shu (@shu0325)
on CodePen.

rem(レム)について

rem(レム)について
html {
  font-size: 1rem;  /*--16px--*/
}   

div {
  font-size: 2rem;  /*--32px--*/
}   

div p {
  font-size: 0.5rem;  /*--8px--*/
}

See the Pen
RwPqdKZ
by shu (@shu0325)
on CodePen.


remは常にルート(html)に対して相対値で指定ができる単位です。
remはroot em(ルート エム)の略です。
ルートとは親要素ではなく一番上の階層(html)に指定したフォントサイズが反映されます。

ページ内でfont-sizeを指定していない場合は、1rem=16pxとなります。
htmlfont-size:1remを指定しています。1remはデフォルトサイズの16pxになります。
div要素はhtmlに対しての2rem指定になるため、倍の32pxになります。
div pタグは一番上の階層の
16(px)×50%(0.5rem)=8pxになります。

ページ内でfont-sizeを指定している場合について

See the Pen
PoqxLXd
by shu (@shu0325)
on CodePen.

フォントキーワードで指定をする方法について

フォントキーワードで指定をする方法について

実際にあまり使うことはありませんが、キーワードで指定することもできるのでご説明いたします。
フォントキーワードには「絶対サイズ」、「相対サイズ」があります。
medium(16px)を基準としてキーワードを指定していきます。

絶対サイズ

  • xx-small
    mediumより3段階小さいサイズで表示します。
  • x-small
    mediumより2段階小さいサイズで表示します。
  • smal
    mediumより1段階小さいサイズで表示します。
  • medium
    ブラウザの標準フォントサイズ16pxで表示します。
  • large
    mediumより1段階大きいサイズで表示します。
  • x-large
    mediumより2段階大きいサイズで表示します。
  • xx-large
    mediumより3段階大きいサイズで表示します。

相対サイズ

  • smaller
    親要素より1段階小さいサイズで表示します。
  • larger
    親要素より1段階大きいサイズで表示します。

See the Pen
BaNGeyK
by shu (@shu0325)
on CodePen.

まとめ

今回はこれで以上です。

POINT
  • 単位の種類は「絶対値」と「相対値」の2種類があります。
  • 基本として、デフォルトのfont-sizeフォントサイズは16pxと言われています。
  • pxは他に影響を受けないため「○px」と指定した際には、必ずそのサイズで表示されます。
  • %emは親要素の相対値で指定ができる単位です。
  • remは親要素ではなく一番上の階層(html)に指定したフォントサイズが反映されます。
  • font-sizeはキーワードで指定することもできます。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top