CSSのみでランダム処理が可能に！CSSのrandom()関数の使い方
これまでWebデザインにおいて「要素をランダムに配置する」あるいは「要素ごとに異なる傾きをつける」といった処理を行うには、JavaScriptを使って1要素ずつ数値を計算して、インラインスタイル（style=”…”）を付与していくのが一般的でした。
意図的にデザインを崩すためだけに、JS側でループを回してスタイルを動的につけるコードを書いたことのある方も多いと思います。
しかし、CSS Values and Units Module Level 5仕様では、CSSのみでランダムな数値を生成できるrandom()関数が定義されました。すでにSafari 26.5以降などで先行サポートが始まっており、これからはわざわざスクリプトを記述しなくても、CSS側だけでこうしたランダムな表現を完結できるようになります。
この関数の大きなメリットは、単純に数値をバラバラにするだけでなく、指定するキーワード（ランダムキー）を組み合わせることで、「縦横比を保ったままサイズを変える」といった、ルールのある連動したランダム制御もCSS側でこなせるようになります。
ここでは、random()関数の基本的な記述方法から、実際のコーディングで使える実用的なサンプルコードまで詳しく解説します。
CSSのrandom()関数とは？
CSSのrandom()関数は、指定した範囲（最小値〜最大値）の中からランダムな数値を返す機能です。
JavaScriptの Math.random() は通常 0 以上 1 未満の小数しか返さないため、開発者が掛け算や足し算をして範囲を調整する必要がありました。一方、CSSの random() は「100px から 300px の間」といった具体的な範囲と単位を直接指定できるのが大きな特徴です。
主な特徴と挙動
- ページリロード時に再計算
生成された値はページを更新するたびに新しく計算されます（画面のスクロールなどで頻繁に値が変わることはありません）。 - ステップ値（刻み幅）の指定が可能
「50px刻み」や「整数限定」といった、特定の倍数のみを出力させるオプションも備わっています。 - 同じ型（Type）の混在は可能
引数に指定する単位は最終的に同じ「型」に解決される必要があります。例えば、px、em、% はすべて「長さ」の型なので混ぜて指定（例：random(10px, 100%)）できますが、px（長さ）と deg（角度）のように全く異なる型を混ぜることはできません。
構文（Syntax）
random()関数の基本的な構文は以下になります。
random( <random-key>? , <calc-sum> (最小値), <calc-sum> (最大値), <calc-sum>? (ステップ値) )<random-key>（第一引数・省略可）:
複数の要素間で同じランダム値を共有するか、要素ごとに個別の値を生成するかをコントロールする「ランダムキー（識別子やカスタムプロパティなど）」を指定できます。省略した場合は auto（基本的には要素ごとに独立）として振る舞います。
最小値・最大値（第二・第三引数・必須）:
ランダム値の範囲を指定します。結果はこの範囲内に収まります（境界値を含みます）。
ステップ値（第四引数・省略可）:
値を特定の刻み幅に限定したい場合に指定します。例えば、random(100px, 300px, 50px) と指定すると、出力される値は 100px, 150px, 200px, 250px, 300px のいずれかに限定されます。
CSSのrandom()関数は、現時点では一部のブラウザによる先行実装の段階です。最新の対応状況は以下のリンクから確認できます。
Can I use（random())
https://caniuse.com/wf-random-function
実務に導入する際は、未対応ブラウザで表示が崩れないよう、後述のサンプルコードのように @supports を使った条件分岐（フォールバック）を記述するのが安全です。
random()関数の使い方（実装サンプル）
random()関数は、きれいに整列しすぎて単調に見えがちなレイアウトに、手作業で配置したような自然なバラつきを出したいときに便利です。
手作りの雰囲気（クラフト感）を出したいとき
規則正しく並んだグリッドの中に、あえて傾きのランダム性を加えることで、温かみのあるデザインを作ることができます。
例：要素ごとに少しずつ傾きを変えた、ポラロイド風の写真やカードの配置
HTML
<div class="gallery">
<div class="card">Photo 1</div>
<div class="card">Photo 2</div>
<div class="card">Photo 3</div>
<div class="card">Photo 4</div>
<div class="card">Photo 5</div>
</div>CSS
.gallery {
display: flex;
justify-content: center;
gap: 40px;
padding: 5rem 0.625rem;
background-color: #e7e7e7;
}
.card {
width: 120px;
height: 150px;
background: #fff;
color: #333;
padding: 0.625rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
text-align: center;
transform: rotate(0deg); /* 未対応ブラウザ用：傾きなし */
}
/* Safari 26.5+ 対応：カードを -8度 〜 +8度 の間でランダムに傾ける */
@supports (transform: rotate(random(-8deg, 8deg))) {
.card {
transform: rotate(random(-8deg, 8deg));
}
}random()関数がサポートされているブラウザでは、対象の要素にスタイルが適用されているのが確認できます。
実際に適用されている値はランダムの値となります。
すべてのカードを「同じ角度」で揃えて傾ける
上記のコードのように識別子を省略した場合、ブラウザは要素ごとに異なるランダム値を生成するため、カードは一枚一枚バラバラに傾きます。
一方で、あえて特定のカスタム識別子（例：–my-angle）を設定し、すべての .card で完全に同じ名前を共有させることもできます。この場合、生成されるランダムな値が1つに固定されるため、ページを開くたびに角度は変わりますが、その時のすべてのカードの傾きは完全に一致します。
CSS
@supports (transform: rotate(random(--my-angle, -8deg, 8deg))) {
.card {
/*
第一引数にカスタム識別子（例: --my-angle）を指定。
すべてのカードが同じ識別子を参照するため、同じ角度（例: すべて3度）に揃います。
*/
transform: rotate(random(--my-angle, -8deg, 8deg));
}
}複数のプロパティを同期させる（ランダムキーの応用）
ランダムキー（第1引数のカスタム識別子）の最も実用的な使い方は、同じ要素内の異なるプロパティ同士で、ランダムな数値を連動させることです。
例えば、「サイズが大きくなったカードは、文字サイズも同時に大きくする」「傾きが大きくなったカードは、位置も一緒にズラす」といった、ルールのある連動したランダム表現が可能になります。
CSS
/* Safari 26.5+ 対応：複数キーによるランダム値の同期 */
@supports (width: random(--card-size, 100px, 180px)) {
.card {
/* グループ1（--card-size）：縦横比を固定してサイズを連動 */
width: random(--card-size, 100px, 180px);
height: random(--card-size, 100px, 180px);
/* グループ2（--card-color）：背景色と文字色のトーンを連動 */
background-color: hsl(random(--card-color, 0, 360), 70%, 60%);
color: hsl(random(--card-color, 0, 360), 70%, 20%);
/* 独立したランダム（--card-rotation）：要素ごとに角度をランダム化 */
transform: rotate(random(--card-rotation, -10deg, 10deg));
}
}
このコードでは、ブラウザの内部で役割の違う識別子が用意され、それぞれが独立して機能します。
- –card-size ➔ カードの「サイズ」を連動
対象：幅（width）と高さ（height）
縦と横が同じ割合で変化するため、アスペクト比が崩れることなく、綺麗な正方形のまま縮尺だけがランダムに変わります。 - –card-color ➔ カードの「配色」を連動
対象：背景色（background-color）と文字色（color）
サイズとは完全に別の数値が生成されます。ここでは「背景の色相」と「文字の色相」に同じランダム値が渡るため、背景が何色に変わっても、文字色が同系色のままきれいに馴染みます。 - –card-rotation ➔ カードの「角度」を独立して変化
対象：回転（transform: rotate）
サイズや色とは一切連動せず、要素ごとに個別の角度でランダムに傾きます。これにより、全体の配置に手作業で並べたようなばらつきが生まれます。
なぜ複数のキーに分けるのか？
もし、すべてのプロパティを1つのキー（例えば –card-size だけ）にまとめてしまうと、「サイズが小さいカードは、必ず背景が赤くて傾きがマイナスになる」「サイズが大きいカードは、必ず背景が青くて傾きがプラスになる」というように、変化の組み合わせが固定されてしまいます。
キーを –card-size、–card-color、–card-rotation のように分けておくことで、「形は小さいけれど、色は鮮やかで、大きく傾いている」といった、要素ごとに異なる表情を持った自然なランダムデザインが実現できます。
補足：冒頭の @supports について
最初の@supports文は、そのブラウザが random()関数に対応しているかどうかをチェックしているだけです。中で指定している数値やプロパティ自体が、実際の .card のスタイルに直接影響することはありません。
不規則な四角形（変形シェイプ）を作りたいとき
clip-path: polygon()の各頂点の座標を、四隅から少しずつランダムに内側へズラすことで、直線的ではない歪んだ四角形を作ることができます。ページを開くたびに、すべての要素が異なる形状に切り抜かれます。
例：1つひとつ形状が異なるカードの背景や、手作り感のあるラベルの表現
HTML
<div class="paper-container">
<div class="torn-paper">MEMENTO</div>
<div class="torn-paper">ART</div>
<div class="torn-paper">CRAFT</div>
</div>CSS
.paper-container {
display: flex;
justify-content: center;
gap: 40px;
padding: 5rem 0.625rem;
background-color: #222;
}
.torn-paper {
width: 150px;
height: 100px;
background-color: #f4edd9;
color: #333;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-family: serif;
box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
clip-path: none; /* 未対応ブラウザ用：綺麗な長方形 */
}
/* Safari 26.5+ 対応：各頂点の位置をランダムに歪ませる */
@supports (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) {
.torn-paper {
clip-path: polygon(
/* 左上の頂点：X(0%〜15%) , Y(0%〜15%) の間でランダム */
random(0%, 15%) random(0%, 15%),
/* 右上の頂点：X(85%〜100%) , Y(0%〜15%) の間でランダム */
random(85%, 100%) random(0%, 15%),
/* 右下の頂点：X(85%〜100%) , Y(85%〜100%) の間でランダム */
random(85%, 100%) random(85%, 100%),
/* 左下の頂点：X(0%〜15%) , Y(85%〜100%) の間でランダム */
random(0%, 15%) random(85%, 100%)
);
}
}
まとめ
CSSのrandom()関数を使えば、これまでJavaScriptに頼るしかなかった要素ごとのランダムな変化を、CSS単体のシンプルなコードで実装できるようになります。
まだ一部ブラウザの先行実装という段階ですが、@supports構文と組み合わせれば、非対応ブラウザのデザインを崩すことなく、対応ブラウザにだけランダムな視覚効果をプラスする形で今すぐ活用できます。今後、主要なブラウザへの対応が進み、より手軽にデザインのアクセントとして使えるようになるのが楽しみな機能です。
