【CSS】CSSでランダムな値を指定したい

Posted at 2024-11-04

はじめに

CSSでランダムな値を指定したいと思ったことはありますか？

僕はありません。

ただ、CSSでランダムな値を扱う random()・random-item() 関数が 2024年11月現在 Editor's Draft となっており、近いうちにCSSでランダムな値が指定できるようになることでしょう。

そのため、この記事では random()・random-item()関数の使い方を紹介しようと思います。

random() 関数は、均一分布から抽出された最小値と最大値の間のランダムな値を表す数学関数です。
また、オプションで選ばれる値を最小値と最大値の間のステップを制限できます。

random() 関数は、以下のような引数に受け取ります。

random(<random-caching-options>?, <calc-sum>, <calc-sum>, by <calc-sum>? )

<random-caching-options>
- ページ上の他のrandom() 関数と干渉しないように制御するオプション
- カスタム変数を指定します（--x, --hoge, etc. ）
<calc-sum>, <calc-sum>
- ランダムな値を選ぶ範囲を指定します
- 最大値が最小値より小さい場合は、最小値と等しいものとして扱われます
by <calc-sum>
- 最小値と最大値の間のステップ数を指定するオプション

例）100pxから300pxの間の50pxごとの値が選ばれる

.sample {
    width: random(--x, 100px, 300px, by 50px);
    /* 100px, 150px, 200px, 250px, 300px のどれかが選ばれる*/
}

random-item() 関数は、リストの中からランダムな項目を選ぶ関数です。

random-item() 関数は、以下のような引数に受け取ります。

random-item(<random-caching-options>?, [<declaration-value>?])

<random-caching-options>
- ページ上の他のrandom() 関数と干渉しないように制御するオプション
- カスタム変数を指定します（--x, --hoge, etc. ）
[<declaration-value>?]
- ランダムで選ばれる値を指定します

例）red, green, blueから値が選ばれる

.sample {
    width: random-item(--x, red, green, blue);
    /* red, green, blueから選ばれる*/
}

この記事では、random()・random-item()関数の使い方を紹介しました。

CSS Values and Units Module Level 5は、まだEditor's Draft であるため、仕様が変わる可能性があります。

CSSにおいて、random()・random-item()関数がどんな使われ方を想定しているか僕にはわかりませんが、使えるようになって有識者が色々とサンプルを作ってくれることを楽しみしています。