スーダラぶるーす。(仮)

湘南あたりを転がってる石コロのゆるゆる生きてく軌跡です。音楽、本のレビュー、WEB制作、日々のコラムなど。

【WEBデザイン】CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分

f:id:sudara_bluse:20171010023946p:plain

いまだにレスポンシブデザイン怖い、、

なぜなら、%とかemとかremとかvw、vhとか恐ろしいフォントサイズ指定がたくさん。。。

これらををなんとなくでしてる僕みたいな人。 :japanese_goblin:

途中で引き継いだ案件とかでpx以外が指定されててビビったあなたへ捧げます。 :ok_hand:

 大前提

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

 px指定

みんな大好き安心のpx指定。絶対値(absolute)
16pxって指定したら親のサイズが何であれ、16px。

Q.pタグのフォントサイズは何pxで表示されますか?

html{
    font-size:100%;
}
p{
    font-size:16px;
}

A.16px :innocent:

 %指定

親要素のサイズの~~%というように可変。相対値(relative)

Q.divの子要素のpタグのフォントサイズは何pxで表示されますか?

html{
    font-size:100%;
}
div{
    font-size:16px;
}
div > p{
    font-size:50%;
}

A.8px :innocent:

divが16pxなので、その50%なので8px

 em指定

パーセントと一緒の考え方。相対値(relative)
50パーセントが5割という表記に変わるような感じ

50%は0.5em
100%は1em

Q.divの子要素のpタグのフォントサイズは何pxで表示されますか?

html{
    font-size:100%;
}
div{
    font-size:16px;
}
div > p{
    font-size:0.5em;
}

A.8px :innocent:

divが16pxなので、その半分なので8px

 休憩 大事な豆知識

ブラウザのデフォルトサイズは
100% = 1em = 1rem = 16px = 12pt

 rem指定

emと同じような考え方だが、ルート(html)に対する割合のサイズ

相対値(relative)

Q.divの子要素のpタグのフォントサイズは何pxで表示されますか?

html{
    font-size:100%;
    /* つまり16px */
}
div{
    font-size:2em;
}
div > p{
    font-size:0.5rem;
}

A.8px :innocent:

divは32pxだけど、htmlが16pxでその半分なので8px

 おまけ

body { font-size:62.5%; }
よく見るこれは、1emが10pxになるように調整する為らしい。

 ラスボス vw vh指定

(2016/7/5 追記)

おそらく一番ビビってしまうだろう、

vw vh指定について、勇気を出して調べてみた。

「ブラウザの幅に応じてフォントサイズを可変に対応する方法は、
メディアクエリーで複数サイズ指定する以外にないのか...?」

その答えがこちらだそうです。

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

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

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

 

これは心折れそう、、、、😭 www

参考

フォントサイズを「vw・vh」でビューポートの幅にあわせて可変させる | ホームページ制作 東京 【SKYGOLD】 / フリーランス WEBデザインオフィス

 

 理解を深める参考サイト

[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説

coliss.com

あなたはどれにする?CSSの文字サイズ指定「px、em、%」 – デザインメモ

 

フォントのサイズ指定はpx? em? 既存の再検討とこれからのテクニック

coliss.com

 

 

Qitaでも公開してます

qiita.com