綺麗なレスポンシブ化を目指して
サイトのウィンドウ幅を縮めていったとき、ブレイクポイントでカクっと要素が変わるサイト、結構ありますよね。
CSSの中にはcalcやvwなど、ウィンドウに合わせて表現できるプロパティや単位があり、それらを活用するとカクッとならないようにすることができます。
今回は綺麗なレスポンシブ化を実現する関数・計算ツールについてご紹介します。
２つのレスポンシブ化の関数・計算ツール
CSS設計完全ガイド（著：半田惇志）という本を読み進めていたところ、レスポンシブ化の計算の際に「ViewPortScale」をというSassの関数を利用していることがわかりました。
またfont-sizeのレスポンシブ自動ツールといえば、以前コリスさんでも紹介されていた、
Fluid-responsive font-size calculatorもあります。
Viewport Scaleとは
このViewportScaleでは、Sassを使ってプロパティ値の自動計算を行います。
例えば「ウィンドウ幅500px～1000pxの間でfont-sizeを20px～30pxで伸縮に合わせて変化させる」といったことができます。
ウィンドウ幅を自由に設定できることはもちろん、font-sizeだけでなくheightやpaddingなどのプロパティを使うことも可能です。
↓こんなの。
出典：https://github.com/ixkaito/viewportscale
Fluid-responsive font-size calculatorとは
こちらはpxだけでなく、remやemにも対応しており、他にも設定をカスタマイズできます。
なおfont-sizeだけでなくheightなどもプロパティも使用可能です。
出典：https://websemantics.uk/tools/responsive-font-calculator/
２つのツールで違いが出るのか検証してみた
今後どちらをメインで使っていこうか迷っていた時、ふと「これ、違いは出ないよね？」と不安＆疑問が頭をよぎったので、検証してみました。
Fluid-respovie font-size calculatorのCSS
数値を入力するだけで自動でCSSが吐き出されます。（ワンクリックでコピペ可）
ViewportScaleのCSS
引数は、
（プロパティ, 最小幅, 最小サイズ, 最大幅, 最大サイズ）となっています。
Sass
CSS
.vs1のfont-size:calc(6.25rem+((1vw-7.68px)*23.1481));
.vs2のfont-size:calc(23.14851vw+ -77.77778px);
はい、calcの中身が違っています。果たして大丈夫なのか…。
計算で検証するのは大変すぎるので、codepenに両方のCSSを入れて比較しました。
検証結果
ウィンドウ幅を768px～1200pxの間で止めてディベロッパーツールで見てみました。
.vs1がFluid-respovie font-size calculator、
.vs2がViewportScaleです。
font-size：28.8518px
height：188.51px
い、い、一緒！！！！！！！
使い分けのポイント
結果は一緒だったので、どちらを使っても同じように動作してくれることがわかりました。
ただ今回の２つの関数では、min-widthで吐き出されます。
普段max-widthでレスポンシブさせることが多い方は書き換えが必要になってきます。
CSS設計完全ガイドの半田さんはどのように使用しているか伺った所、Sassに埋め込むのではなく、単なる計算ツールとしてViewportScaleを使っているとおっしゃっていました。
続けて「ViewportScaleはコードをいじればmax-widhtで出力させることも出来る」ともおっしゃっていました。関数に強い方は自分でカスタマイズするのがよいかと思います。
一方でFluidの方はワンクリックでコードをコピペ出来きるのが強みですね。
あまりレスポンシブさせる要素がない場合や、既存サイトの修正などの場合は、こちらを活用するのが良いかなと思います。
…そもそも時代はスマホファーストなので、本来はmin-widthで設計できる方がよいのかな～とか思ったり思わなったりラジバンダリ。
レスポンシブの際にブレイクポイントでカクっとなるのが気になる方は、是非これらの関数・ツールを使ってみてください(^^)/
コメント