【CSS Modules】mod()関数の使い方

mod()関数は、与えられた2つの数値の剰余（モジュロ演算の結果）を計算する関数です。

最初の引数を2番目の引数で割ったときの「余り」を返し、計算結果の符号は2番目の引数（除数）と同じになります。例えば、mod(10, 3)は1を、mod(-10, 3)は2を返します。

この関数は、CSSプロパティの値として、周期的な計算や繰り返しパターンが必要な場面で活用できます。calc()関数と組み合わせることで、要素の配置やアニメーション制御など、より柔軟で動的なスタイル表現が可能になります。特に、グリッドレイアウトやカスタムプロパティを使用して、特定の法則に基づいたパターンを自動的に生成する際に有用です。

mod()関数はCSSの標準機能として提供されており、CSS Modulesを含む現代のCSS開発環境で広く利用可能です。これにより、保守性が高く、表現力豊かなスタイルシートの作成に役立ちます。

Copy
1.element {
2  /* 構文: mod(割られる数, 割る数) */
3  --remainder-value: mod(100, 30);
4}

dividend, divisor

• dividend: 割られる数
• divisor: 割る数

<number> または <dimension>

mod() 関数は、指定された2つの数値の剰余を計算し、その結果を <number> 型または <dimension> 型で返します。