こんにちは
インターン生の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