いつか使うかも？cssのfont-sizeをビューポート-パーセンテージで指定する

HTML・CSS

二俣です。ちょっとニッチな内容かもしれないですが、備忘録を兼ねて。

よくあるfont-sizeの指定方法

よく見かけたり、使ったりしているfont-sizeの単位は、だいたい下記のような感じかと思います。

px: 絶対指定。pxで指定する。
em: 相対指定。親要素のフォントサイズの何倍か。
%: 相対指定。親要素のフォントサイズの何パーセントか。
rem: 相対指定。html要素のフォントサイズの何倍か。

.txt1{
  font-size: 10px;
}
.txt2{
  font-size: 1.6em;
}
.txt3{
  font-size: 160%;
}
.txt4{
  font-size: 1.6rem;
}

サンプルページ

~~念願の~~、ie8のサポートが終了したこともあり（参考：https://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/）、実案件でremを使う機会も増えているのではないでしょうか？

たいていの場合、上記を適宜使い分けることで事足りると思います。僕は事足りていました。

が・・・

事足りなかった

リキッドで作成していて、画像の上にテキストを載せるようなレイアウトがありました。

上記のようなpxやremなどのfont-sizeの指定方法では、基本的にテキストのサイズは一定です。画像はwidth: 100%;のように、ブラウザ（親要素）の幅に合わせて拡大縮小するのですが、その画像の上に乗せたテキストはテキストのサイズが一定になってしまうため、画像との比率が崩れてしまいます。

つまり要件は、
「ウィンドウ幅に合わせて、テキストのサイズもいい感じに可変させたい」
ということですね。

パッと思いつく対応方法としては

デザインの変更をお願いする。
テキストごと画像にしてしまう。
jsでリサイズイベント取得してごにょごにょする。

くらいですが、上記では~~負けた気がするので~~ベストな対応ではないと思い、見つけたのが「vw」という指定方法でした。

vwとは

vwはビューポート-パーセンテージという相対単位の1つで、「ビューポートの幅の1/100」という指定です。
viewport widthの略ですね。

ビューポート-パーセンテージは、ビューポートの幅や高さを基準に計算するもので、他にも、vh、vmin、vmaxがあります。
（参考：https://developer.mozilla.org/ja/docs/Web/CSS/Length）

ざっと書くと

vw: 相対指定。ビューポートの幅の何パーセントか。
vh: 相対指定。ビューポートの高さの何パーセントか。
vmin: 相対指定。ビューポートの「幅か高さの短い方」の何パーセントか。
vmax: 相対指定。ビューポートの「幅か高さの長い方」の何パーセントか。

.txt5{
  font-size: 3vw;
}
.txt6{
  font-size: 4vh;
}
.txt7{
  font-size: 5vmin;
}
.txt8{
  font-size: 6vmax;
}

ということになります。

つまりどうなるのか

こうなります。

サンプルページ（※ウィンドウ幅をぐりぐりしてみてください。）

「ウィンドウ幅に合わせて、テキストのサイズもいい感じに可変させたい」
こちら、解決できました。
remなどと同様、相対指定なのですが、参照元となるのが親要素やhtml要素といったcssで定義されたものではなく、ブラウザの幅になるのでリサイズされたときにテキストのサイズもいい感じに反映してくれます。