ハローハロー

デザイナーの小山です。

今回は技術よりのお話。
実際にページを作っている人向けな内容になってしまいます。
一般の方は「へー、そんなことを考えながらページって作ってるんだー」なんて感じて頂ければ・・・。

まずはおさらい。

フォントの指定方法はいくつかあります。
px,em,rem,%などなど。

絶対値での指定方法の「px」はおなじみですね。

では他は？
はい、親要素に対しての相対的な指定方法ですね。

適材適所で残りの３つは使い分けていらっしゃることでしょう。
個人的には、rootを基準とした指定方法の「rem」が使いやすいと思ってます。

今回の本題「vw」とは？

vwとは、画面サイズを基準とする指定方法。
1ソースでレスポンシブサイトを作るなら、これは外せません。

たとえば！横幅375pxのスマホ（iPhone6など）で見る際、100vw=375pxとなります。
同じスマホで１6ｐｘを指定したいときは、16/375 ≒ 4.27%なので、
4.27vwとなります。

わかりづらい？
んー、とっつきにくいかもしれませんが、慣れれば割と簡単ですよ？

(指定したいフォント) / （その時の画面サイズ） × 100

この方法で１行での文字数や、段落の行数がほぼ変わらないよう指定できるわけです。
つまり、
スマホによって、レイアウトが崩れないわけです。
スマホそれぞれの画面サイズを基準に都度変わってくれるわけですからね。

一つ注意点が・・・

スマホ間での見劣りを無くせる「vw」ですが、いざレスポンシブサイトに使うときはもう一工夫必要です。
PC版ではメディアクエリで別の指定方法に切り替えてください。
PCの画面サイズの最近の主流は、1366×768。
4.27vwだった場合は、、

1366 × 4.27% = 58.3px

すごく・・・大きいです・・・。
冗談はさておき、「ここからはPC（場合によってはタブレットも）に！」というサイズでメディアクエリを指定してフォントを切り替えてくださいね。

「？・・・冗談って？？」

という顔をしているあなたは、是非そのままのあなたでいてもらいたい。

さてさて、この間は結びに「秋ですね〜」なんて話をしましたけど、気温的にはもう冬です。
あ、ユニクロの「暖パン」シリーズ、超オススメです。
すごい暖かいです。

ではでは。