ウィンドウ幅に文字サイズを連動させて変えるCSSの書き方。

こんにちは、minoruです。

Webに公開しているHTMLファイルは、当然ですがPCやスマホなど、色んな異なる画面幅で読まれるわけですが、画像を背景にして、その上に文字を重ねている場合など、画面幅に合わせて画像は縮小表示されても、文字はそのまんまでバランスがおかしくなります。

ウィンドウ幅に文字サイズを連動させて変えるCSSの書き方を探したらありました。

ちなみに「css 横幅 文字サイズ 自動」でGoogle検索して発見。

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

上記サイトのサンプルページ

vw相対指定。ビューポートの幅の何パーセントか。

vh相対指定。ビューポートの高さの何パーセントか。

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

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

私のやりたかった事は、

こう書けば解決しました。

ただ、これだと画面幅の何パーセントか？なので、もし極端に横長なディスプレイとかが今後流行してしまった場合、ちょいと面倒な手直しが必要かも知れませんね？

まあ詳しい事は必要になった時にじっくり覚えるとして、とりあえず解決できそうなWebページを見つけたので載せておきます。

参考：レスポンシブルにフォントサイズを変更し、最小サイズ・最大サイズを指定する方法

要するにCSSの@mediaって奴を使って、最小・最大を指定しておく方法。

最終的なソース部分を以下に引用。