2025年7月7日のブックマーク (1件)

  • 値の補間計算を簡潔に記述できる CSS の `progress` 関数

    CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用することでより意図を明確に記述できます。この記事では、CSS の `progress` 関数の構文と使用例について解説します。 CSS の progress 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。フォントサイズをレスポンシブに調整する流体タイポグラフィ(Fluid typography)や、画面サイズに応じたレイアウトの調整、スクロール量に応じたプログレスバーの表示など、さまざまな場面で利用できます。progress 関数自体で新しい機能を提供できるわけではありませんが、既存の記述方法と比較してよ

    値の補間計算を簡潔に記述できる CSS の `progress` 関数
    cript
    cript 2025/07/07