random() で飾りの位置・大きさ・傾きにばらつきを付ける（未対応ブラウザは固定値）

どんな時に使う？

• イベント告知、ポートフォリオ、キャンペーンページで、紙吹雪や星などの飾りを「整いすぎない」感じに散らしたいとき。
• 飾りごとに nth-child で位置を手書きするのが面倒なとき。JS の Math.random() で値を作って style に流し込む処理を CSS に置き換えたいとき。

コード

/* 先に固定値を書いておく（未対応ブラウザ用） */
.deco { position: absolute; left: 20%; top: 30%; width: 16px; rotate: 0deg; opacity: .8; }
.deco:nth-child(2) { left: 60%; top: 50%; }
/* …飾りごとの固定値… */

/* 対応ブラウザだけランダムで上書き */
@supports (width: random(8px, 24px)) {
  .deco {
    left: random(3%, 91%);
    top: random(8%, 72%);
    width: random(8px, 24px);
    rotate: random(-30deg, 30deg);
    opacity: random(.5, 1);
  }
}

ランダムにするのは位置・大きさ・傾き・透明度だけで、色と形はあらかじめ決めておく。飾りは文字の下などに専用の領域（position: relative の箱）を作って、その中だけで動かすと本文と重ならない。

random() の値はページを読み込んだとき（要素が作られたとき）に決まる。投稿者のデモでは「もう一度配置する」ボタンで飾りの要素を JS で作り直して再抽選しているが、乱数そのものは CSS が出している。

注意点

• 2026-10 時点で Chrome 156 から対応。ほかのブラウザは要確認なので、@supports で固定値にフォールバックさせる設計が必須。
• 見出し・ボタンなど「読む・押す」場所には使わない。レイアウトが毎回変わると利用者が迷う。
• 同じ値を複数のプロパティや要素で共有したいときの指定方法（キャッシュキー）は仕様で用意されているが、ブラウザの実装状況を確認してから使う。

出典

• @hayatastic の投稿
• CodePen のデモ
• 投稿者のブログ「CSSのrandom()で、カードの装飾だけ実装してみた」