HTML&CSS

CSSで画面の幅に応じてフォントサイズを変える

画像やdiv要素の幅はブラウザの幅に応じて変えられても、フォントサイズはメディアクエリ―を使うしかないと思ってませんか?ブラウザの幅に対してのサイズ指定が可能なvwという単位は、フォントサイズに対しても指定できます。書籍にも載ってなかったりするので、知らない人が多いんじゃないかなと思いましてご紹介することにしました。

ブラウザの表示領域に応じたサイズ指定

ブラウザの表示領域(ビューポート)に応じたサイズ指定を vw, vhという単位で指定できます。

私がよく用いるケースは、トップ画面のメインビジュアルの表示領域に対して、以下のようにブラウザの縦幅がいくつであろうと画面いっぱいに表示するという指定をするケースです。

div{
   width: 100vw;
   height: 100vh;
]

これを50vw, 50vhにすれば横幅はブラウザの最大幅に対しての50%、縦幅は50%になります。

このことについては知っている方多いかと思いますが、vwがフォントサイズに対しても指定可能です、という話です。

フォントサイズをブラウザの幅に応じて変える方法

vwを使う

以下のように指定します。

h1{
   font-size: 3vw;
}
@media screen and (max-width: 599px) {
h1{
   font-size: 16px;
}

もちろん、メディアクエリ―がないといけないというわけじゃないのですが、スマホサイズくらいになると、3vwだと文字サイズが小さすぎるようになるので、上記は一つの違和感がない指定の例です。

メディアクエリ―だけを使う方法だと、長い見出しの時の改行の位置が気になることが多く、そうなると改行の有無もメディアクエリ―を使って変更したりしますが、このvwを使った指定で解決することが多いと思います。

メディアクエリ―を使う

以下のようにメディアクエリ―だけを使った方が自然な感じになるというケースもあるとは思いますので、使い分けだとは思っています。

h1{
   font-size: 60px;
}
@media screen and (max-width: 1024px) {
h1{
   font-size: 30px;
}
@media screen and (max-width: 767px) {
h1{
   font-size: 24px;
}
@media screen and (max-width: 599px) {
h1{
   font-size: 20px;
}

まとめ

vwという単位がフォントサイズに対しても指定可能です、というご紹介でした!

著者のイメージ画像

BringFlower
稲田 高洋(Takahiro Inada)

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。
2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。
プロフィール詳細