CSS

CCSで文字サイズを可変にできるvwの使い方を工夫してより使い勝手をよくする

2018.07.30

typer

CSSで文字サイズを可変にできるViewportの割合を使ったCSSの単位vwvhですが、最大サイズや最小サイズを指定できないので、使いどころが難しい印象です。特に小さい文字ですね!大きなサイズの文字はある程度割り切って使うことができますが、そのまま使ってしまうと文字サイズ的に大変なことになってしまいます!

グローバルナビの文字サイズを可変にしたい

私が小さな文字サイズでも可変にしたいと思うのはPCのグローバルナビです。最近はスッキリデザインが主流ですのでロゴからグローバルナビまで一行でまとまっていることが多いからです。

文字数を減らすか文字サイズを可変にするか

グローバルナビを一行に収めるためには、数の調整、文字量の調整、文字サイズの調整などが必要です。数に関してはコンテンツの優先順位などもあるので、べらぼうに多くする必要はありませんが、文字量・ラベルに関しては省略してわかりにくくなるのは本末転倒なので、なるべくわかりやすさを優先したいと考えます。となると文字サイズです。

下記は最近実際に案件で使った文字サイズ指定の設定です。

font-size: calc(0.7em + .15vw);

CSSのプリセットの設定にもよりますがベストで見れる最小のブラウザ幅を1160pxと考え最小文字サイズが12〜13pxの大きさに見えるように設定しました。

ポイントはcalc

この設定のポイントはcalcです。直接vwで単位をしてしまうと文字サイズがとんでもなく大きくなったり小さくなったりします。calcを用いることでその辺が緩和できます!ちょっとしたCSSの小技ですね!

もう一つのポイント%は使わない

もう一つのポイントはサイズ指定に%を使わないことです。理由はIEやEdgeで・・・・・な感じになるからです。まぁ慣れっ子ですけどね!

まとめ

そんなわけで、今回は可変で文字サイズ指定する時の小技をご紹介しました。可変で文字サイズを指定できるのは素晴らしいことなのですが、思ったよりも入念にチェックしないと、とんでもなデザインになってしまうこともあるので、工数に余裕のない案件では実装を躊躇してしまいます。それでもポイントで使う分には問題解決に繋がるかもしれませんので、ぜひお試しを!

WEBSITE DESIGN REQUEST

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

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

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