Web制作フォントサイズを「vw」でレスポンシブに変化させつつ、最大値・最小値を指定する方法ビューポートの幅に対しての大きさを指定できる「vw」を用いてフォントサイズをレスポンシブに変化させつつ、最大値・最小値も同時に指定する方法を出来るだけ分かりやすく解説します。メディアクエリを使えば、文字サイズを14px→18px→24pxのように段階的に変化させるのは簡単です。解像度ごとにfont-sizeを指定するだけですからね。画面のサイズに応じてスムースに文字サイズを変化させるにはどうすればいいでしょうか?はい、vwを使いましょう。「vw」の仕組み自体は超簡単です。vwとは?画面(ビューポート)の幅に対しての割合。100vwを基準として指定する。38.4pxこのように、画面の横幅を基準とした数値を指定できるので、レスポンシブなWebサイトを制作する際に重宝します。ちなみに「vh」という単位を使えば画面の高さに応じた数値も指定可能です。全画面表示のメインビジュアルとかでよく使いますね。この「vw」という単位はfont-sizeの値でも使うことが出来るので、上手く使えば文字サイズを動的に変化させることが可能です。font-sizeにvwを指定してみるまずはfont-sizeに3vwを指定しただけの表示結果です。あ、画面の幅を変えて見たいなら右上の「CodePen」から見てね。CodePen.28426ブラウザのサイズをぐりぐり変えると、文字サイズが滑らかに変化しているのが分かるかと思います。このままだと、スマートフォンのような小さな画面だと文字が小さすぎるし、4Kモニターのような高解像度環境だと文字が大きくなりすぎる...という使い物にならない状態です。この問題を解決するには、文字サイズの最小値と最大値を指定する必要があります。最大値・最小値を指定してみる以下の条件を満たすことの出来る指定方法を考えてみましょう。横幅1200px以上の環境では文字サイズを36pxに固定640~1200pxの間は文字サイズを滑らかに変化させるこれらの条件を満たすfont-sizeの指定方法がこちらです。//最大値}}記述が急激にややこしくなりましたが、一つ一つ確認してみましょう。16px;が適用されます。36px;が適用されます。横幅640~1199pxの環境だと難しいのがこの部分です。6.4px)*3.571));CSS内で計算をすることができるcalc()を使うことになります。ややこしい数値を文字で置き換えて、それぞれの求め方を見てみましょう。Y)*Z));Xここには文字サイズに指定したい最小値を入れます。今回は16pxですね。Y最小値を適用したい横幅の1%です。今回は640px未満の環境から文字サイズを固定したいので、100/640=6.4pxです。することで1vw-6.4px=0となり、先程のXに入れた値が文字サイズの最小値となります。Zこれが一番分かりにくいですね。文字サイズの最大値と最小値の差となります。3.571428...こうなるので、適当に丸めて、Zに入れる値は3.571になります。6.4px)*(20/5.6)));僕は計算できる数値は予め計算しておきたい派なので使いませんが、そこらへんは各自お好みでどうぞ。【CSS】ステッチ(縫い目)風の見出しを作る方法を2パターン紹介けものフレンズのタイトルロゴをCSSだけで作ったのー?すっごーい!!【CSS】text-shadowを使ったテキストの装飾パターンを色々作ってみたCSSだけでマリオ(ドット絵)を作ってジャンプさせてみたヘッダー上部に謎の余白が出来てしまう時の対処法CSSのみでお洒落なアニメーション付きのモーダルウィンドウを作ってみたAuthor名前:Leo26歳にしてようやくフリーターから脱却してWeb屋さんになった人。ライターみたいな事もするよ。あと雪国に住んでるけどバイクが好き。特技は後先考えずに突撃して自滅することです。