今回は「【CSS font-size 】文字の大きさ」 について解説します!
こんな方に読んでほしい
CSSを学び始めた方へfont-size
の使い方について学びたい方へfont-size
の単位が多すぎて分からない方へ今回は「文字(フォント)」に対してfont-size
プロパティを適応させる解説になります。
絶対値と相対値について 単位の種類は「絶対値 」と「相対値 」の2種類があります。
絶対値について 絶対値 とはブラウザの表示領域や親要素のサイズに影響させることなく、指定したサイズが表示します。 よく使用させれるpx
が例にあげられます。
相対値について 相対値 とはブラウザの表示領域や親要素のサイズを基準として相対的に算出される単位です。 ブラウザの操作によって変化する単位です。 よく使用させれる%
などが例にあげられます。
フォントサイズ指定の単位について フォントサイズを指定する際に、px
、%
、em
、rem
など、いろいろな単位があって わかりずらいですよね。
まず基本として、デフォルトのfont-size
フォントサイズは16pxと言われています。
px(ピクセル)について 一般的に使用される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となります。 html
にfont-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--*/
}
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となります。 html
にfont-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--*/
}
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となります。 html
にfont-size:1rem を指定しています。1remはデフォルトサイズの16pxになります。 div
要素はhtml
に対しての2rem指定になるため、倍の32pxになります。 div p
タグは一番上の階層の16(px)×50%(0.5rem)
=8px になります。
ページ内でfont-sizeを指定している場合について フォントキーワードで指定をする方法について 実際にあまり使うことはありませんが、キーワードで指定することもできるのでご説明いたします。 フォントキーワードには「絶対サイズ 」、「相対サイズ 」があります。 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段階大きいサイズで表示します。まとめ 今回はこれで以上です。
POINT 単位の種類は「絶対値 」と「相対値 」の2種類があります。 基本として、デフォルトのfont-size
フォントサイズは16pxと言われています。 px
は他に影響を受けないため「○px」と指定した際には、必ずそのサイズで表示されます。 %
、em
は親要素の相対値で指定ができる単位です。 rem
は親要素ではなく一番上の階層(html)に指定したフォントサイズが反映されます。 font-size
はキーワードで指定することもできます。
スポンサーリンク
SHU 1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。 趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑 つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事 関連記事