CSS

文字サイズが可変でデザイン出来るViewportの割合を使ったCSSの単位

2017.09.19

2017.10.26

いろんな大きさ

Webデザインで文字サイズを!
文字サイズを可変にレイアウト出来る時代がついにきました!

うん、実は随分前から出来ました・・・
CSSで文字サイズを可変にするにはpxemなどの単位を使うのではなくvwという単位を使います。

Viewportの割合を使う単位

vwはViewportの横幅の割合を使った単位で、Viewport Widthの略です。画面の表示幅ですね。同じようにViewport Heightをの割合を使うvhもあります。ブラウザのサポート状況も良好ですので、気にせずガシガシ使えます。

関連する単位でvminvmaxがあります。それぞれvw、vhの値の大きい方、小さい方に対する割合を利用しますが、使いどころ・・・・・

vwはスクロール幅に注意

vwを使う時の注意点はスクロールバーです。Macはスクロールバーが無い計算になりますので、PCのクロスブラウザ対応を考えるとレイアウトには使わない方が無難だと思います。

フォントサイズに指定してみよう!

フォントサイズの単位はvwを使います。

画面に対して何文字入るかってのが基準になります。PCの場合はスクロールバー問題がありますので、各ブラウザ完全再現ではなくおおよその感じ!で使いましょう。
厳密にサイズを指定したい場合はブレイクポイントで根性を見せましょう。

10文字程度がベストなら100÷10=1010vwになります。

font-size: 10vw;

20文字なら100÷20=55vwになります。

font-size: 5vw;

上記の表示例をつくっております。ウィンドウをぐいんぐいんしながらご確認ください。

calcに計算させる

サイズ指定にcalcを使えば自分で計算する必要がなくなります。

font-size: calc(100vw / 10);

calcを使った場合なぜかリアルタイムで確認できなかったので、その辺に留意しましょう!

って言ってもブラウザ幅を変えながらサイトを見るのってWeb制作者が幅フェチの方ぐらいだと思われますので一般の方には不要の気遣いです。

文字サイズを可変にする時の注意点

文字サイズを可変にするときに気付いた点が2つあります。

  1. max-widthを指定したとき
  2. スマホサイトを横向きで見たとき

max-widthを指定したとき

vwmax-widthを指定してもその範囲で収まってくれません。
俺の器はそんなもんじゃねーよ!と言わんばかりにどんどん大きくなりやがります。

ブラウザ幅を大きくしたとき

ちなみに当サイトのトップページを馬鹿でかいサイズで確認したときです。これはこれでありっちゃありなのですがもう少しで視認できない領域までいきます。

そんな大きなサイズで誰も見ないよぉ・・・・とか聞こえてきそうですが、文字サイズを可変にするときは、max-widthを小さくしすぎないことがポイントですかね。

スマホサイトを横向きで見たとき

スマホサイトの横向きも油断なりません。
誰も見ねーよって聞こえてきそうですが、不意に自分で横向きを確認したときに赤面する事態に遭遇するかもしれません。

そして先ほど「使いどころ・・・」なんで言っちゃったvmin辺りを使っておくと大崩れはないのかもしれません。

色んな環境で確認しよう

それ文字サイズ可変に限らないんだけど・・・って聞こえてきそうですが、ある程度の見た目を担保しつつ、可変を実現するなら突飛な設定でも確認しておいた方が、無難です。クオリティーはそういった細部のこだわりの結晶ですからね!

いま私いいこと言った!

そういやぁこれでエラスティックレイアウトの実現が現実的になりましたね。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する