レスポンシブデザインにおけるフォントサイズ

こんにちは

インターン生のOigamiです!

レスポンシブ難しす・・・

そんな中、はじめに調べておけば良かった

フォントサイズ

について

CSSでフォントサイズの設定をされている方もたくさんいると思います

というか訓練校の授業では基本CSSでサイズ変更を行っていました


はじめに

CSSのフォントサイズ指定方法は次の2つに分類されます
絶対値(absolute)….16pxで指定したら絶対16px
相対値(relative)….親要素のサイズによって可変します


px指定

絶対値(absolute)

html{

font-size:100%;

p{

font-size:16px;

この場合ですと親要素のhtmlに関係なく絶対的に16pxのフォントサイスになります。


%指定

相対値(relative)

親要素のサイズの~~%というように可変します。

html{

font-size:100%;

div{

font-size:16px;

div p{

font-size:50%;

この場合divが16px、その半分の50%ですので、pは8pxになります


em指定

相対値(relative)

パーセントと考え方は同じ。
50パーセントが5割という表記に変わるような感じ

50%は0.5em
100%は1em

div{

font-size:16px;

div p{

font-size:0.5em;

divが16pxなので、pはその半分なので8pxになります。


ブラウザのデフォルトのサイズ

ちなみにブラウザのデフォルトのサイズがこれになります。

100% = 1em = 1rem = 16px = 12pt


rem指定

相対値(relative)

emと考え方は似ていますが、ルート(html)に対する割合

html{

font-size:100%;→16px

div{

font-size:2em;→32px

div p{

font-size:0.5em;

divが2emで32pxになっていますが、htmlが16pxなのでpは8pxになります。


vw vh指定

 

はい、これが一番良く分かりません

メディアクエリーで複数サイズ指定する以外に、ブラウザの幅に応じてフォントサイズを可変にします

vw・・・viewport width。ビューポートの幅に対する割合です
vh・・・viewport height。ビューポートの高さに対する割合です

ブラウザの横幅全体を「100vw」
10vwは、1/10のサイズ。

画面の横幅が320pxの時に、14pxのフォントサイズで表示したいときは、
14px÷320px=0.04375(4.375%)なので「4.375vw」と記述。

うん、めんどくさいなこれは・・・

主に計算が・・・

「レスポンシブ、フォント」で検索かけると大体これの設定方法が出てきます。

今どきのレスポンシブwebデザインでは主流なのかなぁ・・・

慣れたら%とかemで指定するのよりも楽にはなりそうですけどね。

画面確認しながらフォントの大きさ調節するのも、結構時間かかりますもんね。

すでに%指定でやってしまっているのだよ私は!

今回のサイトでは使いませんが、次回は挑戦してみようと思います。

ここまで読んでくださってありがとうございます

by Oigami

 

 

 

 

 

コメントを残す