CSSシークレット ―47のテクニックでCSSを自在に操る

知っておくべきポイント

CSSグラデーション、 P.78の「ストライプ模様の背景」、 P.88の

「複雑な背景のパターン」

課題

幾何学的なパターンの繰り返しは美しいのですが、やや退屈です。自然

界では、まったく同じパターンが繰り返されるはほぼありません。繰り返

しの中にも、何らかの変化や無作為が見られるものです。例えば花畑で

は、均一さがもたらす美しさとランダムさによる面白みが共存していま

す。まったく同じ花は1 つもありません。我々にとっての背景のパターン

も同様に、自然さを追求し、かつ繰り返されるタイルの継ぎ目に気づかれ

にくいようにしています。しかしこれらの目標は、ファイルサイズを減ら

したいという願望とは相容れません。

固有の特徴（例えば木目の中の節など）が等間隔に何度も現れたとした

ら、それは自然界のランダムさに反しており、ユーザーが抱く幻想は崩

されてしまいます。

— AlexWalker, TheCicadaPrincipleandWhyItMatterstoWebDesigners

（sitepoint.com/the‐cicada‐principle‐and‐why‐it‐matters‐to‐web‐designers）

CSSには乱数の機能が用意されていないため、ランダムさを表現するの

は簡単ではありません。例えば、色（ここでは 4 色とします）や幅がさま

ざまに異なる縦方向のストライプを作成し、タイルの間には目に見えるす

き間が生じないようにしてみましょう ...