CSS progress()関数カリキュレーターとは
CSSのprogress()関数（Chrome 138+）は、入力値をある数値範囲から0〜1の進行値に変換する数学的なマッピング関数です。たとえば、progress(scroll-position from 0 to 500)は、スクロール位置が0のときに0、500に達したときに1、250のときに0.5を返します。この進行値は任意の数値CSSプロパティを制御でき、スクロール連動エフェクト、ビューポート相対サイズ調整、カスタムプロパティの補間における複雑なcalc()チェーンを不要にします。
クイックアンサー
CSSのprogress(input from min to max)を使用して、任意の数値を0〜1の進行範囲にマッピングします。スクロール位置、ビューポート寸法、カスタムプロパティに基づいて、opacity、scale、transform、color-mixのパーセンテージ、または数値を受け入れる任意のCSSプロパティを制御できます。Chrome 138+。出力を制限するにはclamp(0, ..., 1)でラップします。
Last updated: 2026-05-30
制限事項
- progress()はChrome 138+が必要です。Firefox、Safari、および古いバージョンのChromeはサポートしていません。クロスブラウザ対応のフォールバックとして、スクロール駆動アニメーションのキーフレームまたはJavaScriptベースのスクロールリスナーを使用してください。
- この関数は数値CSSプロパティでのみ機能します。カラーストップ、グラデーション角度、シェイプ関数を直接制御することはできません。色の遷移には、progress()とcolor-mix()を組み合わせ、進行値を混合パーセンテージとして使用してください。
- progress()のscroll-positionはデフォルトでドキュメントのスクロール位置を測定し、要素のスクロールコンテナは測定しません。特定のスクロールコンテナにはself-scroll-positionを使用しますが、コンテナがスクロール可能で定義されたスクロール範囲を持っていることを確認してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 入力ソースとその範囲を指定します。scroll-position、viewport width/height、viewport inline/block size、または最小値と最大値を持つカスタムCSSプロパティから選択できます。
- 制御したいターゲットCSSプロパティと、progress 0およびprogress 1における値を設定します。たとえばopacity 0から1、またはscale 0.5から1.5などです。
- 必要に応じてclamp()ラッピングを有効にし、入力が定義範囲を超えた場合でも結果を出力範囲内に制限します。
- 生成されたCSSをコピーしてスタイルシートに追加します。出力にはprogress()ルールと完全なプロパティ宣言の両方が含まれます。
主な用途
- ユーザーがページを0から200ピクセルスクロールするのに合わせて、スティッキーヘッダーの不透明度を完全透明から不透明に変化させます。
- ビューポート幅が320pxから1920pxに拡大するのに合わせてヒーロー画像を1から1.2に拡大し、ワイド画面で微妙なズーム効果を生み出します。
- ユーザーがセクションをどの程度スクロールしたかに基づいて、color-mix()の混合パーセンテージを制御し、ある色から別の色に遷移させます。