フォントサイズをvw指定

css/コーディング

h2やh3なんかのタイトルにあてるフォントサイズを、pxやremの指定でもいいけれど

絶対1行におさめたいなーとか、サイズをレスポンシブにしたい事情がある場合

vwの指定が便利です。

たとえばこんなメッセージを表示させたいとします。

きょうはさむいですね

これはサイズにvwを使っているので、画面の横幅に合わせてフォントサイズを縮小・拡大してくれます。

コードはこんな感じです。

<div class="message">
きょうはさむいですね
</div>

cssに、vwを指定するとこんな感じ。

.message {
text-align: center;
font-size: 7vw;
}
@media screen and (min-width: 1080px) {
.message {
font-size: 60px;
}
}

vwは画面のビューポート幅に依存しているので、画面幅が大きくなるとフォントサイズも際限なく大きくなってしまいます。

なのでメディアクエリで最大値は指定しておくと良いかと!

タイトルとURLをコピーしました