Webデザインでは、デバイス毎にCSSの記述を変えて、各対象デバイスで快適に閲覧できるようにすることが好ましい。スマホが普及してからは、Webサイトの表示もPC版とスマホ版を制作するのが当たり前になっている。このコーディングの際に便利なのが『vw』という単位である。

「vw」は「viewport width」の略で、デバイス或いはWebブラウザの表示領域幅を100vwとした単位であり、概念としては「%」と同じである。

スマホ版のコーディングでは、この「vw」をベースに制作すれば、機種による画面幅の違いはほぼ考えなくてもよくなるため非常に重宝するのだが、PC版のコーディングとなると事情が異なってくる。

それは、PC上でのWebブラウザの表示幅は数100px～2000px程度まで、非常に変化の幅が広いため、表示領域幅を基準に各要素のサイズを指定してしまうと、非常に小さくなったり、逆にあまりにも大きくなりすぎたりするので、単純にvwを使うわけにはいかない。

PC版のコーディングでvwを使う際の考え方としてはこうだ。表示領域が1100px～1375pxまでの範囲では要素のサイズを可変にするが、その前後では最小サイズ・最大サイズで固定にする。そんな時に便利なのが、CSSのclamp()という関数である。

これはその名の通り、許容範囲外の数値は圧縮して範囲内に収めてくれる便利ものである。

例えば、表示領域が1100px～1375pxの場合には文字サイズをvwに従って可変にしたい場合、表示幅1100pxで文字サイズが24px＝2.182vwならば、表示幅1375pxでは文字サイズは30pxになる。つまり、font-size: clamp(24px, 2.182vw, 30px); と指定すれば良いのだが、2つ目3つ目の引数の数値は計算しなければ分からないため、コーディングの効率は決して良くない。

そこで、clamp()に、Sassの@functionを組み合わせることで厄介な計算無しで上記を実現するようにしたい。

Sassの@functionは使いまわせるため、サイト制作時に最初に記述しておけば、あとは使いたい場所で関数名に引数を渡して呼び出すだけなので活用すると非常に便利である。このコードで何をしているかは下に簡単な解説を書いてみたので参考にしてほしい。

この@functionを利用すれば、下記のように使いたい場所でサクッとclamp()を利用できるようになる。もちろん、@function内で変数として設定している$minWidthや$maxWidthを、制作しているWebサイトの仕様に合わせて変更すれば応用もできるだろう。font-sizeのみならず、要素の配置や写真サイズの変更など、数値指定するあらゆる場所に適用できることは言うまでもない。

親ノードの幅に相対的に依存する「%」とは異なり、デバイスの表示領域を基準とする「vw」という概念は非常に便利である反面、各所での数値の算出という手間が発生しがちである。そういった手間を少しでも減らしてコーディングを効率よく進めるためには、Sassの関数作成機能である@functionや、clamp()のようなCSSに用意された関数などをどんどんガシガシばりばり活用していきたい。

なお、このclamp()にはひとつ注意点があり、Safariでは動かないという報告がチラホラ見受けられる。Safariがclamp()に対応したのはversion13.1からなので、最新のSafariを使用していれば動くはずである。もし、自分の書いたclamp()がSafariで機能しない場合には、CSSの最初におまじないの一文を追加してみよう。

* { min-height: 0vw; }

これでclamp()が機能するようになるだろう。