CSSフレームワークを使おう

■第21話：メディアクエリを使わずに大きさを調整しよう（clamp, aspect-ratio）

（最終更新日：2023.08.07）

メディアクエリって面倒！

レスポンシブデザインというとメディアクエリを使って、 PC用、タブレット用、スマホ用と表示端末の解像度に合わせて画面を変化させるというのが一般的だった。 しかし近年（2018年以降）では、メディアクエリを使わずとも表示領域に合わせて、 文字や画像の大きさを調整してくれる単位や関数、プロパティが出てきた。 今回はそんなCSSの機能である「clamp」「min」「max」と「aspect-ratio」について説明する。

１.clamp, min, max

clampの使い方は簡単だ。clamp(最小値、推奨値、最大値)というように、プロパティ値を設定する。 下記の画像に実装した例だと、「width: clamp(200px, 20vw, 300px);」といった具合である。 基本は真ん中の20vwが採用されて、200pxよりも小さくなった場合は200pxで大きさが固定され、 300pxよりも大きくなった場合は300pxで大きさが固定される。

また、大きさの上限だけ決めたい、下限だけ決めたいという時もあると思う。 そんなときはminやmaxを使う。minは「width: min(推奨値, 最大値);」で最大値を指定することができる。 maxは「width: max(推奨値, 最小値);」で最小値を決めることができる。 minは2つの小さい方を採用する、maxは2つの大きい方を採用するということである。 和訳して解釈すると意味合いが逆になってしまうので、そこだけ気をつけよう。 困ったらclampを使うということでも構わない。

実際のコードのを下記に示す。 clampで最小値200px、最大値300px、その間は20vwに指定している。

２.aspect-ratio

aspect-ratioはその名の通り、アスペクト比を設定するCSSのプロパティである。 縦横比率を固定したい時に使う。 例えば、下図2.1のようにaspect-ratioを2:1に調整すれば横にひしゃげた状態で画像を拡大縮小することができる。 また、下図2.2のようにaspect-ratioをautoに設定すると、元々の画像の縦横比を採用して拡大縮小する。

ちなみに、aspect-ratioは画像や動画だけでなく、カラムの大きさなどにも使えたりする。 色々試してみよう。

それぞれの画像のコードを下記に示す。 aspect-ratio: 2/1にした画像（頭が潰れてる画像）のコードが上側、 aspect-ratio: autoにした画像（通常の比率で表示されてる画像）のコードが下側になる。 styleでHTMLに直接記述している。簡単に設定できることが分かるだろう。

3. まとめ

今回、主にCSSのclampとaspect-ratioを紹介した。 メディアクエリを使わなくても、比較的簡単に、レスポンシブにサイズを変えられるのが嬉しい。 レスポンシブに画像や文字を調整する機会は多いはずだ。 ぜひ、簡単なところから使ってみよう。

▼参考図書、サイト

  clamp()　　MDN Web Docs
  CSS関数のclamp()・max()・min()についてまとめてみる　　EVOWORX
  【CSS】aspect-ratio プロパティで縦横比を固定する　　Web Frontend Ninja