CSSの「mod」関数：縞模様、グリッド、アニメーションなど、創造的なデザインを可能にする強力なツール

機能

mod() 関数は、2つの値を受け取り、最初の値を2番目の値で割ったときの剰余を返します。しかし、負の入力値の場合は、返される値が常に最初の値の符号と同じになります。

構文

mod(a, b)

ここで、

• b は、除数です。
• a は、剰余を求める値です。

例

以下の例では、mod() 関数の動作をいくつか示します。

/* 正の値 */
mod(10, 3) == 1  /* 10 ÷ 3 = 3 余り 1 */
mod(15, 4) == 3  /* 15 ÷ 4 = 3 余り 3 */

/* 負の値 */
mod(-10, 3) == -1  /* -10 ÷ 3 = -3 余り -1 */
mod(-15, 4) == -3  /* -15 ÷ 4 = -3 余り -3 */

/* ゼロ */
mod(0, 3) == 0  /* 0 ÷ 3 = 0 余り 0 */

mod() 関数の用途

mod() 関数は、主に以下の目的で使用されます。

• アニメーションを作成する
  アニメーションのタイミングを制御したり、特定のフレームのみスタイルを設定したりすることができます。
• 要素の位置を調整する
  要素を特定のピクセル間隔で配置したり、特定のグリッドラインに揃えたりすることができます。
• 縞模様やグリッドを作成する
  縞模様やグリッドを作成する際に、特定の行または列のみスタイルを設定することができます。

• 他の CSS プロパティ (例えば、calc() 関数) で代替できる場合もあります。
• 複雑な計算に使用すると、パフォーマンスが低下する可能性があります。
• mod() 関数は、すべてのブラウザで完全にサポートされているわけではありません。古いブラウザでは、互換性のためにベンダープレフィックスを使用する必要がある場合があります。

---

例 1：縞模様の背景を作成する

この例では、mod() 関数を使用して、水平方向の縞模様の背景を作成します。

body {
  background-color: #f0f0f0; /* 薄いグレーの背景色 */
  background-image: linear-gradient(to right, transparent 10px, #ccc 10px, #ccc 20px, transparent 20px);
}

このコードは、以下のようになります。

1. 背景色を薄いグレーに設定します。
2. linear-gradient() 関数を使用して、水平方向のグラデーションを作成します。
3. mod(x, 20) 式を使用して、縞模様のパターンを作成します。 mod(x, 20) は、x が 20 で割ったときの余りを返します。余りが 0 の場合は、透明色になります。余りが 10 の場合は、薄いグレー (#ccc) になります。

例 2：要素をグリッドに配置する

この例では、mod() 関数を使用して、要素を水平方向のグリッドに配置します。

.grid-container {
  display: flex;
  flex-wrap: wrap;
  width: 800px; /* コンテナの幅 */
}

.grid-item {
  width: 200px; /* アイテムの幅 */
  height: 150px; /* アイテムの高さ */
  margin: 10px; /* アイテム間のマージン */
  border: 1px solid #ccc;
  text-align: center;
  line-height: 150px;
}

1. .grid-container クラスを持つ要素をフレックスコンテナとして設定します。
2. .grid-item クラスを持つ要素の幅と高さを設定します。
3. .grid-item クラスを持つ要素にマージンと境界線を追加します。
4. .grid-item クラスを持つ要素のテキストを中央揃えにし、行高さを設定します。

以下の CSS コードを追加して、mod() 関数を使用して要素をグリッドに配置します。

.grid-item:nth-child(odd) {
  background-color: #f0f0f0;
}

1. .grid-item クラスを持つ要素の子要素の奇数番目 (1 番目、3 番目、5 番目...) にのみ背景色を設定します。

この結果、要素は 3 列のグリッドに配置され、奇数番目の要素は薄いグレーの背景色になります。

例 3：アニメーションを作成する

この例では、mod() 関数を使用して、要素を左右にアニメーションさせます。

.animated-element {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #f00;
  animation: move 2s infinite alternate;
}

@keyframes move {
  from { left: 0; }
  to { left: 200px; }
}

1. .animated-element クラスを持つ要素を相対位置に設定します。
2. .animated-element クラスを持つ要素の幅と高さを設定します。
3. .animated-element クラスを持つ要素の背景色を赤色 (#f00) に設定します。
4. move という名前のアニメーションを定義します。
5. move アニメーションは、2 秒間続き、無限に繰り返し、交互に実行されます。
6. move アニメーションの from キーフレームは、要素を左端に配置します。
7. move アニメーションの to キーフレームは、要素を 200 ピクセル右に移動します。

以下の CSS コードを追加して、mod() 関数を使用してアニメーションのタイミングを制御します。

@keyframes move {
  0% { left: 0; }
  50% { left: mod(time_ms, 400) + 100; } /* time_ms はミリ秒単位の時間 */
  100% { left: 200px; }
}

---

算術演算子と負号の組み合わせ

負の値を含む入力値に対して、「mod」関数と同様の動作を再現するために、算術演算子と負号を組み合わせることができます。

例：

/* 正の値 */
calc(10 % 3) == 1
calc(-10 % 3) == -1

/* ゼロ */
calc(0 % 3) == 0

calc()関数と条件分岐

calc()関数と条件分岐を組み合わせることで、「mod」関数と同等の機能を実現できます。

/* 正の値 */
@if (10 % 3 == 0) {
  background-color: #f00;
} else {
  background-color: #0f0;
}

/* 負の値 */
@if (-10 % 3 == 0) {
  background-color: #f00;
} else {
  background-color: #0f0;
}

/* ゼロ */
@if (0 % 3 == 0) {
  background-color: #f00;
} else {
  background-color: #0f0;
}

カスタム関数

複雑なロジックが必要な場合は、mod関数の機能を再現するカスタム関数を作成することができます。

function mod(a, b) {
  if (a < 0) {
    return (a + Math.abs(b)) % Math.abs(b);
  } else {
    return a % b;
  }
}

/* 使用例 */
.element {
  background-color: #f00;
  width: mod(15, 40) + 20px;
}

ベンダープレフィックス

古いブラウザでは「mod」関数がサポートされていない場合があります。そのような場合は、ベンダープレフィックスを使用して互換性を確保する必要があります。

/* Firefox and Safari */
background-color: -moz-mod(10, 3);
background-color: -webkit-mod(10, 3);

/* Opera */
background-color: -o-mod(10, 3);

推奨事項

上記の代替方法はそれぞれ長所と短所があります。状況に応じて適切な方法を選択することが重要です。

• 古いブラウザへの互換性：ベンダープレフィックスは必須です。
• 複雑なケース：calc()関数と条件分岐、またはカスタム関数は、より柔軟なロジックに対応できます。
• シンプルなケース：算術演算子と負号の組み合わせが簡潔で分かりやすいです。

• JavaScriptを使用する場合は、Math.abs()関数と%演算子を使用して「mod」関数の機能を再現できます。