font-sizeについてのまとめ

9059 ワード
CSS font-size font CSS テキストリンク

個人的にはpxしか使いたくないが、いろいろメモ

font-sizeで使うことができるサイズ

px

font-sizeを絶対に指定するためのもの
環境によってfont-sizeが変更されることなし
font-size: 16px;は16pxで表示される

body { font-size:10px; } /* 10px */
p  { font-size: 16px; } /* 16px */
li { font-size: 16px; } /* 16px */
li p { font-size: 16px; } /* 16px */

em

親要素の文字サイズに基いて自身を1とする単位
MacintoshやWindowsなどの使用している環境によって大きさが変化する
（htmlの<em>タグとは関係なし）
基本的にはfont-size: 1em;で16pxが表示される。
（bodyなどの親要素でfont-size: 12px;などで指定していた場合、そのサイズがfont-size: 1em;で適応される）

body { font-size:10px; } /* 10px */
p  { font-size: 1.6em; } /* 16px */
li { font-size: 1.6em; } /* 16px */
li p { font-size: 1em; } /* 16px */

rem

基本的な使い方はemと同じ。
基本的にはfont-size: 1rem;で16pxが表示される。
emは直近の親要素から取得されるがremは最上位の要素(html要素)を基準にしてfont-sizeを取得する

html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */
p  { font-size: 1.6rem; } /* 16px */
li { font-size: 1.6rem; } /* 16px */
li p { font-size: 1.6rem; } /* 16px */

remの対応状況

CSS３やHTML５のブラウザ対応状況

pxを入力するだけでremを取得することができるchromeの拡張機能

PxtoRem -chromeストア

PxtoRem -簡単な使い方

%

基本的な使い方はemと同じ。直近の親要素から取得を行う。
基本的にはfont-size: 100%;で16pxが表示される。

%の対応表参考サイト
親要素が12~16pxまでの%表記が記載されている。

vw,vh,vmin,vmax

vw : 相対指定。ビューポートの幅の何パーセントか。

vh : 相対指定。ビューポートの高さの何パーセントか。

vmin : 相対指定。ビューポートの「幅か高さの短い方」の何パーセントか。

vmax : 相対指定。ビューポートの「幅か高さの長い方」の何パーセントか。

vwを指定した場合のfont-size参考

iphone5(width 320px)の場合を想定

px vw
10px 3.125vw
11px 3.4375vw
12px 3.75vw
13px 4.0625vw
14px 4.375vw
15px 4.6875vw
16px 5vw

これだけみてもよく意味がわからなかったので、参考のコード・結果も。。。

vw,vh,vmin,vmaxの参考コード

結果（横幅を変えるとフォントサイズも変わります。）

See the Pen font-size vh vw by miwa_shuntaro (@miwashutaro0611) on CodePen.

vw、vhなどの参考サイト

キーワードでfont-sizeを指定

font-size: xx-smallなどのキーワードでもfont-sizeを指定することができる

使うことができるキーワード

キーワード 意味
xx-small 基準値 - 3
(10px→chromeだと最小10pxのため)
x-small 基準値 - 2(10px)
small 基準値 - 1(13px)
medium 基準値(16px)
large 基準値 + 1(18px)
x-large 基準値 + 2(24px)
xx-large 基準値 + 3(32px)
smaller 文字段階が1段階減少(約13px)
larger 文字段階が1段階増加(約19px)

参考コード

See the Pen font-size keyword by miwa_shuntaro (@miwashutaro0611) on CodePen.

使用場面について

絶対に文字サイズを変更したくないならpx

px以外の単位だと他の要素に対して影響を受ける場合がある。
この文字は絶対このサイズのままがいい！という時は、pxでしっかり決める。

レスポンシブに対応させたいならrem

スマホの時もパソコンと同じHTMLソースを使う場合、いちいち全てのフォントを調整するのはなので、<html>タグのフォントサイズを調整するだけで全てのフォントのサイズを調整することができるので、変更が楽になる。

iphone5,iphone6など微妙に違うサイズなどにも対応させたいならvwなど

pxなどで宣言するとタブレットとspでいろいろと細かく設定しないといけないので、vwで設定すると楽にできる。文字全体に設定というよりは、タイトルなどデバイスで見え方が微妙に変わって欲しくないものに使用するのがいいと思う。。。