2022.07.20
デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナ...
デザイン
制作
2021.06.11
cssでfont-size
を指定する方法はいくつかあるのですが、どれを使っていいか迷ってしまうこともあると思います。
今回はその中でもコーディングするときに特に使われるpx、em、remなどの違いについて解説いたします!
各フォントの指定の方法を理解することで効率のいいコーディングができるようになりますので、ぜひ参考にしてみてください!
目次
pxは親要素の大きさや画面の幅に影響を受けずにフォントサイズを指定できる絶対指定です。
大きさを変えたくない場合や、基準となるフォントサイズを指定する時はpxで指定することがおすすめです!
【例】
html{
font-size:16px;
}
p{
font-size:20px;
}
この場合のpは20pxになります。
emは親要素の大きさに影響される相対指定です。
【例】
html{
font-size:16px;
}
p{
font-size:20px;
}
p span{
font-size:0.8em;
}
この場合、span
タグは親要素pの20pxを基準として0.8文字分の大きさになるため、16pxになります。
レスポンシブの際、親要素のフォントサイズだけ変えるだけでspan
タグもサイズが変わるのでpxで指定するより記述が少なくなります。
remはルート要素(通常はhtml)を基準とする相対指定です。
【例】
html{
font-size:16px;
}
p{
font-size:20px;
}
p span{
font-size:0.5rem;
}
この場合、span
タグはhtmlの16pxを基準としているので8pxになります。
emのように単位が入れ子になっていてもhtmlを基準とするので親要素の影響を受けずに指定ができます。
%をフォントサイズの単位で使うときはemを同じく親要素を基準とする相対指定となります。
【例】
html{
font-size:16px;
}
p{
font-size:20px;
}
p span{
font-size:0.8%;
}
emと同じ相対指定になるため、今回のspan
タグも16pxになります。
vwとvhはブラウザ(ビューポート)の幅に応じてフォントサイズが変わる相対指定です。
【例】
LPのファーストビューのキャッチコピーを絶対に1画面に収めたい場合など、画面の幅に合わせてフォントサイズを可変させたいときに便利です。
可変に強い反面、コンテンツの見出しをvw、本文をpxなどで指定すると画面幅によって見出しと本文のバランス感が変ってしまうので使い方には注意が必要です。
どのフォントサイズの指定方法が正解、この場合にはこれを使うべき、という明確な判断をするのは難しいですが、それぞれのメリットを踏まえたうえで使い分けていけるといいでしょう。
フォントサイズの指定方法で作業の効率も上がるため、ぜひ使ってみてください!
おすすめ記事はこちら!