導入：なぜprogress()が重要なのか
Webデザインにおいて、レスポンシブなレイアウトや動的なエフェクトを作る際、「ある値が、最小値から最大値の間でどの位置にあるか（0から1の範囲で取得したい）」という計算に頭を悩ませた経験はありませんか？
従来、こうした計算はJavaScriptで行うのが一般的でしたが、最新のCSSで利用可能になったprogress()関数を使えば、CSSだけでこの「進捗率（正規化）」を算出できます。JavaScriptの負荷を軽減し、レイアウトと連動した直感的なアニメーションやスタイル調整をCSSのみで完結させるための強力な武器となります。
基礎知識：progress()の仕組み
progress()関数は、指定した3つの値から、現在の位置を0〜1の数値（比率）として返します。
構文は以下の通りです。
progress(現在の値, 最小値, 最大値)
計算式は「(現在の値 – 最小値) / (最大値 – 最小値)」となります。
例えば、progress(5, 0, 10) と記述すれば、結果は 0.5（50%）となります。もし現在の値が範囲外であれば、自動的に0か1に制限（クランプ）されるため、安全に数値を扱えるのが特徴です。
実装：calc()との組み合わせが基本
progress()が返す値は単位のない数値（0〜1）です。そのため、実際のCSSプロパティ（pxや%など）として利用するには、calc()関数と組み合わせて掛け算を行うのが一般的です。
サンプルプログラム：可変幅のプログレスバー
以下のコードは、親要素の幅が400pxから700pxの間で変化する際、その進捗率を計算してバーの長さに反映する例です。
HTML
CSS
応用・注意点：現場で役立つポイント
1. 単位の統一：
progress()の引数に使う値は、すべて同じ単位（すべてpx、すべて%など）である必要があります。単位が混在すると計算が無視されるため、注意が必要です。
2. ブラウザ対応状況：
現時点ではすべてのブラウザで完全にサポートされているわけではありません。実務で導入する場合は、必ず「Can I use」等のサイトで最新の対応状況を確認し、必要に応じてフォールバック（機能しない場合の代替スタイル）を用意してください。
3. 複雑な表現への応用：
単なる幅の制御だけでなく、rgba()のカラー値や、opacityの微調整など、「画面幅に応じたデザインの繊細な変化」をCSS変数と組み合わせることで、非常にリッチなUI表現が可能になります。
JavaScriptでresizeイベントを監視してクラスを付け替える手法から卒業し、モダンなCSS設計を取り入れていきましょう。
コメント