パソコンとまねきねこ

相対単位と絶対単位の違いとは

相対単位とは

相対単位とは、ブラウザの設定・環境に依存して可変的にサイズを指定する単位で、親要素の文字の大きさを基準に「何文字分」といった相対的なサイズで表示されます。

em(エム)親要素に対しての割合で示す、1emで親要素と同じ2emで倍の大きさ
ex(エックスハイト)指定しているフォントの小文字の高さを1とした単位、あまり使われない。
%(パーセント)親要素に対しての割合で示す、50%で親要素の半分の大きさ
rem(レム)htmlタグに指定された大きさ(ルートの文字サイズを基準)に対し割合で示す。
px(ピクセル)画面上の1ピクセル(小さな点)の大きさ、画像の解像度により大きさが変わる。

絶対単位とは

絶対単位とは、ブラウザの設定・環境に依存せず普遍的なサイズを指定する、ブラウザや画面解像度が違っても表示される文字の大きさが変わらない。

in(インチ)1インチは2.54センチを表します
cm(センチメートル)1cmは10㎜
㎜(ミリメートル)10㎜は1cm
pt(ポイント)72ptで1in(インチ)
pc(パイカ)1pcで12pt(標準的な大きさ)

標準サイズからサイズを決める

7段階あり、標準サイズから1段階上がる(下がる)とサイズが1.2倍になります。

xx-largemediumより3段階大きいサイズを表示
x-largemediumより2段階大きいサイズを表示
largemediumより1段階大きいサイズを表示
mediumブラウザの標準単位で表示
smallmediumより1段階小さいサイズを表示
x-smallmediumより2段階小さいサイズを表示
xx-smallmediumより3段階小さいサイズを表示
larger親要素より1段階大きなサイズを表示
smaller親要素より1段階小さいサイズを表示

相対単位・絶対単位にはこのようなものがあります

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事