CSSのrandom()関数を試す

目次 目次をスキップ いくつかのデモを作成しました コード例に関する注意点 ブラウザサポートに関する注意点 ボケ効果 位置 サイズ 位置、再訪 円の色 ピンぼけ度 アニメーション すべてを組み合わせる 落下する花びら 開始位置 サイズと花びらのスタイル 落下アニメーション ねじれアニメーション 投げ飛ばせるポラロイドの山 スタックを構築する インタラクティブ性の追加 順序付け random-item()で詩をデザインする random()のステップ値を使用する 離散的なランダム値で詩をスタイリングする 重み付きランダム値 視覚的な詩 その他のデモ 揺れるグリッド ランダムに回転する長方形 オーロラ 進行中 新しい記事、CSSリソース、ツールに関する最新情報をご希望の場合は、ニュースレターにご登録ください。 メール HPSubscribe または他の場所で購読: @Polypane.app RSS CSSには`random()`関数が導入されつつあり、プロパティをランダムな値で設定できるようになり、面白くてクリエイティブな新しいデザインを作成できます。これはPolypane 29+でテスト可能であり、実験的機能が有効になっているChromium 148+でも利用できます。 Safari 26.2+も`random()`をサポートしていますが、この記事で紹介するすべてのデモを完全にサポートしているわけではありません。Firefoxは現在、`random()`をサポートしていません。 この記事のデモを試すには、Polypane 29+、Safari 26.2、または実験的機能が有効なChromium 148+を使用してください。デモの動作を確認したい場合は、Polypaneを入手して無料で試すことができます。 いくつかのデモを作成しました 私は数週間かけて、`random()`を使用して興味深いデザイン、パターン、背景を作成する方法のさまざまな例を考え出しました。 コード例に関する注意点 以下のコード例では`random()`を直接使用しており、まだサポートしていないブラウザのフォールバックはありません。例の動作を確認したい場合は、Polypaneを入手して無料で試すことができます。 コード例は完全に編集可能なCSSを含んでいますが、各効果に関連するCSSのみを表示しています（例えば、以下のボケ効果は位置決めを表示しますが、border-radiusは表示しません）。 例のCSSを編集して、その仕組みを確認できます。コード例では最も関連性の高いCSSのみを表示していますが、コードをコピーすると、例の完全なHTMLとCSSが得られます。「randomize」ボタンをクリックすると、各プロパティに新しいランダム値が適用されて例が再読み込みされます。 ブラウザサポートに関する注意点 ブラウザでの実装は進行中であり、実験的Web機能フラグの背後にあるのはそのためです。 一部のデモはSafariでうまく動作しません。以下の例の一部は、今後の実装変更に耐えられない可能性が高いと確信しており、バージョン148、149、150の間で実装が進化しているため、Polypane 29（Chromium 148ベース）とそれ以降のバージョンのChromiumの両方をサポートするためにいくつかのトリックを施す必要がありました。 この記事は常に最新の状態に保ちますが、もしあなたが現在未来におり、デモの一部が動作しなくなったことに気づいた場合は、お知らせください。記事を更新します！ ボケ効果 Polypane 29で`random()`が利用可能になったと知ったとき、すぐに試してみたくなりました。 私のお気に入りの「ランダムデザイン」タイプの一つは、写真効果でピンぼけした光の点を生成するボケ効果です。`random()`を使ってボケ効果を作成するのは楽しいだろうと思いました。そこで、MDNの`random()`ページを調べて作業に取り掛かりました。 ボケ効果を見ると、本質的にはいくつかの点で異なるたくさんの円です。 円の位置 円のサイズ 円の色 円のピンぼけ度 変化の速度（アニメーションするボケの場合） 位置 円の位置は最も簡単です。`position:absolute`に設定し、`left`と`top`プロパティで`random()`を使用します。これにより、円がランダムな位置に配置されます。 Bokeh: Random Position Randomize copy code .bokeh { position:absolute; left: random(0%, 100%); top: random(0%, 100%); border-radius: 100%; } .bokeh { position:absolute; left: random(0%, 100%); top: random(0%, 100%); border-radius: 100%; } `random()`関数は、最も単純な形式では最小値（0%）と最大値（100%）を取り、それらの値の間のランダムな値を返します。 注: ここでの最小サイズは0ですが、両方の値が同じタイプであることを確認するために`%`を含める必要があります。もし`random(0, 100%)`とだけ書くと、最小値が`<number>`で最大値が`<percentage>`になるため無効になります。 サイズ ボケ効果の各円は異なるサイズですが、それでも円です。したがって、`random()`を使用してサイズを設定したい場合、幅と高さが同じ値であることを確認する必要があります。 私の考えは、ランダムな値をカスタムプロパティ（例: `--size: random(50px, 20vmin)`）に「格納」し、そのカスタムプロパティを幅と高さの両方に使用することでした。そうすれば、幅と高さは常に同じ値になります。 そう思っていました。 Bokeh: Random Ovals Randomize copy code .bokeh { left: random(0%, 100%); top: random(0%, 100%); --size: random(50px, 20vmin); width: var(--size); height: var(--size); } .bokeh { left: random(0%, 100%); top: random(0%, 100%); --size: random(50px, 20vmin); width: var(--size); height: var(--size); } うわ、幅と高さが違う！ カスタムプロパティをランダムな値に設定すると、そのカスタムプロパティを使用するたびに新しいランダムな値が生成され、宣言時だけでなく毎回生成されます。 これを修正するには、`random`関数に`element-scoped`というカスタムキーワードを追加する必要があります。 これは、要素ごとに1つのランダムな値を生成するようにブラウザに指示します。したがって、各要素は異なるランダムな値を取得しますが、各要素の幅と高さは同じになります。 Bokeh: Size Fixed With element-scoped Randomize copy code .bokeh { top: random(0%, 100%); left: random(0%, 100%); --size: random(element-scoped, 50px, 20vmin); width: var(--size); height: var(--size); } .bokeh { top: random(0%, 100%); left: random(0%, 100%); --size: random(element-scoped, 50px, 20vmin); width: var(--size); height: var(--size); } 注: `element-scoped`はまだこの機能の最終的な名前ではありませんが、現在PolypaneとSafariでサポートされているものです。これは`per-element`に改名される予定です。どちらもまだMDNドキュメントの一部ではありませんが、追加するためのPRが提出されています。 位置、再訪 最も単純だったので位置から始めたいと思いましたが、位置には実際には問題があります。円が左から99%の位置で始まり、サイズが100pxの場合、コンテナからはみ出してスクロールバーが発生します。 これを修正するには、`calc()`を使用して円のサイズを位置から減算します。 Bokeh: Size Fixed With element-scoped Randomize copy code .bokeh { left: random(0%, calc(100% - var(--size))); top: random(0%, calc(100% - var(--size))); --size: random(element-scoped, 50px, 20vmin); width: var(--size); height: var(--size); } .bokeh { left: random(0%, calc(100% - var(--size))); top: random(0%, calc(100% - var(--size))); --size: random(element-scoped, 50px, 20vmin); width: var(--size); height: var(--size); } 円のサイズが正確にどれくらいかはわかりませんが、`--size`がこの要素の各プロパティで同じであるため、それを使用して円が常にコンテナ内に完全に収まるようにすることができます。 円の色 円の色については、すべての円がほぼ同じ明るさと彩度で、各円が異なる色相を持つようにしたかったのです。そこで、`hsl()`関数と`random()`を色相値に使用しました。 さらに、ボケ効果の画像を見ると、一部の円はより目立ち、一部はあまり目立ちません。そこで、ランダムな不透明度も追加しました。 Bokeh: Color and Opacity Randomize copy code .bokeh { left: random(0%, calc(100% - var(--size))); top: random(0%, calc(100% - var(--size))); --size: random(element-scoped, 50px, 20vmin); width: var(--size); height: var(--size); background: hsl(random(0, 360) 80% 50%); opacity: random(0.1, 1); } .bokeh { left: random(0%, calc(100% - var(--size))); top: random(0%, calc(100% - var(--size))); --size: random(element-scoped, 50px, 20vmin); width: var(--size); height: var(--size); background: hsl(random(0, 360) 80% 50%); opacity: random(0.1, 1); } HSLの色相は単なる数値なので、単位は必要ありません。不透明度も同様です。 注: この例と次のいくつかの例では、円の数を増やしました。