プログラマー必読！知っておきたい「線形補間」の知識【効率よく様々なデバイスに対応するために…】

メディアクエリを利用することで様々な画面サイズに柔軟に対応することができます。

しかしcalc()とvwやvhなどのビューポートの単位を組み合わせることで、より柔軟なレイアウトを構築することが可能になります。この記事ではそれを実現するために必要となる線形補間の考え方について解説していきます。

線形補間とは、線の上に２つ点がある時に、その間にある点の座標を求める手法です。ウェブ開発においてはフォントサイズやマージン、幅などCSSの値を求めるのに使います。わざわざこのような手法を使うのは、ビューポートが変化した際に複数のブレークポイントを生成することなくコンテンツの流れを制御するためです。線形補間を使えば計算をブラウザに任せることができます。

例を見てみましょう。下の例は線形補間を利用しているSass関数です。私たちはbetweenという名前で呼んでいます。

これは次のように使うことができます。

この例では、コンテナのパディングをモバイルでの20pxからデスクトップの100pxまで変化させています。この間であれば、20〜100pxまで自動的に計算されたサイズが適用されることになります。パディングが最大値を超えることがないよう、ブレークポイントを使って制限することもできます。

このような関数を使うことで、スペース計算をぐっと楽にすることができます。以前は手動で指定していたものも、ブラウザに任せることができるようになるのです。

・remと組み合わせてもっと強力に

先ほどのbetweenを今度はルート要素のフォントサイズに適用してみましょう。remという単位はルート要素のフォントサイズを示し、ビューポートの横幅によってその大きさが決まります。ルート要素のfont-sizeを10pxから18pxまでに指定した場合、ビューポートの大きさが変わると10〜18pxの間でフォントサイズが自動的に変化していきます。

・まとめ

デバイスが多様化し、画面サイズがモバイルやタブレットの一般的なものから外れるケースも増えてきています。そうしたデバイスに対応する際に、今回のテクニックは非常に役立つでしょう。またレイアウト作成におけるバグを減らすことにもつながりるため、開発者も利益を得ることができます。これから新たにプロジェクトを始めるのであれば、ぜひ取り入れたいテクニックです。