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

市松模様

市松模様はさまざまなケースで利用できます。例えば、似た色の市松模

様を単色の背景の代わりに指定すれば、ユーザーの目を引くでしょう。ま

た、グレーと白の市松模様は透明を表すデファクトスタンダードであり、

多くの UI で採用されています。 CSSを使って市松模様を生成するのは可

能ですが、その方法は大方の想像を超えてトリッキーです。

市松模様を生成するためのタイルでは一般的に、図 2.44 で示したよう

に 2 色の四角形が 2 つずつ 含 ま れ ます。これ を 見 て、 background‐

positionをずらして 2つの四角形を配置するだけでよいと思われたかも

しれません。しかし、実際にはそうではありません。技術的には CSSグラ

デーションを使って四角形を生成することは可能ですが、周囲に余白がな

いため単色の塗りつぶしになってしまいます。 1 つのグラデーションだけ

では、余白のある四角形は作成できません。信じられないという読者は、

図2.45 のような模様を作れるかどうか試してみてください。

そこで、直角三角形を組み合わせて四角形を表示するという方針をとり

ます。直角三角形の作り方については、図2.29（ストライプとしては失

敗作ですが）などで解説しています。コードは以下のようなものでした。

色や透明度については、今回の例に合わせて変更しています。

これが何の役に立つのかと思われたことでしょう。図2.29 のような三

角形を組み合わせて四角形を作っても、やはり塗りつぶしにしかなりませ ...