CSS

CSSで可変フォントを指定


CSSで可変フォントを作る

viewの大きさに合わせてサイズが動的に変わるフォントを作る方法。

調べてもemやremばかり出て発狂したのでメモ。

結論から言うと、使うのはvw(ViewportWidth)とvh(ViewportHeight)。

それぞれ画面の横幅、縦幅に合わせて変化する。

例えばfont-size{3vm;}とすれば横幅の3%、font-size{3vh;}とすれば縦幅の3%の値になる。


index.html

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>可変フォント</title>
<style type="text/css" media="screen">
html {
height: 100%;
width: 100%;
font-size: 62.5%;
}
body {
font-size: 1.4em;
}
p#vw {
font-size: 5vw;
}
p#vh {
font-size: 5vh;
}
</style>
</head>
<body>
<p>windowサイズに合わせてフォントサイズを変更</p>
<p id="vw">僕は横幅で変わる</p>
<p id="vh">俺は縦幅で変わる</p>
</body>
</html>

デフォルトver

スクリーンショット 2016-01-30 21.08.13.png

横伸ばしver

スクリーンショット 2016-01-30 21.08.56.png

縦伸ばしver

スクリーンショット 2016-01-30 21.09.11.png


締め

簡単なことなのに中々検索しても出てこなかった。リファレンスを黙って読んでれば良かったのかもしれない。