精製されたドットは並べられなければならない。

在処

要件：背景をドット柄で埋め尽くす方法の理屈を述べよ

フリーランスのWebデザイナーの小林さんが、ツイッターでつぶやいてくれる様々なCSS技巧について、「なんとなく判るけど、どんな理屈でそうなってるんだっけ？」を実際に触って試してみたいと思います。


・「radial-gradient」が夢と現実に境界線を敷く

　background-image:
　radial-gradient(#ddd 30%, transparent 31%),
　radial-gradient(#000 30%, transparent 31%);

「radial-gradient」は指定した要素内に放物線上のグラデーションを作成します。ここでは中心から30％までドットの色で、31％からは「transparent」で透明を選択することでグラデ部分を配した円形の形状を作り出します。
これを「,」で区切ってもう一つ作成しています。この辺は画像を複数枚指定するのと同じ理屈ですね。
この時点では色が同じで重なって表示されているので、見た目は1個だけです。


・「background-size」は君の形を明確にする

　background-size:40px 40px;

現状では円の形状やサイズは要素の大きさに沿っています。ここで「background-size」を使って大きさを定義します。同じ「background」な一族なので、大きさもこれで定義できます。サイズの指定は一つですが、「，」で区切って別サイズを指定すれば、2番目に記述したドットのサイズはそちらに合わせて変更されます。


・「background-position」が君たちをバラバラにする

　background-position: 0 0, 20px 20px;

現状では二つのドットが同じ位置で重なり合っていますので、2番目に記述した方の表示位置を移動させます。これも背景画像を2枚表示して表示位置をずらすのと同じ理屈ですね。最初のドットは据え置きで、2番目の方を横縦20pxずつズらして表示します。
これだと、ぱっと見た感じ判り難いですが、2個目のドットの色を別のモノに変更すれば判り易いかと思います。

ここまでで背景にドットを表示する方法はおしまいですが、なぜ全体を埋め尽くすのか追記しておきます。


・「background-repeat」で君たちは何度も繰り返す

「background-image」で作り出した2個のドットは、画像と同じ扱いとなっています。つまり「background-repeat」で繰り返し表示されていることになるんですね。デフォルトでは「background-repeat：repeat」なので、自動的に画像が繰り返し表示されていきます。
ここで以下の記述を追加します。

　background-repeat: repeat-X, repeat-y;

これで1番目のドットは横方向、2番目のドットは縦方向のみリピートされます。


・「background-position」で君たちは彼岸にお互いを見る

応用で記述を以下の様に書き換えます。

　background-position: 10％ 0, 90% 0;
　background-repeat: repeat-y, repeat-y;

これで指定した要素の両端から10％の位置に縦方向に並んだドットが表示されます。

・君たちは河の流れのように

お遊びとしてドットをスクロールさせてみます。

「background-repeat」は消去して、「background-positio」の記述を以下と入れ替えます。

　animation: dot_scroll 2s linear infinite;

そして以下を別個に記述します。

　@keyframes dot_scroll {
　from { background-position: 0 0, 20px 20px; }
　to { background-position: 40px 0, 60px 20px; }
　}

これでドットが左から右に延々スクロールしていきます。


以上、「どうして画面がドットで埋め尽くされるのか？」の解説でした。
CSS、思った以上にいろいろできますよね。

そんな便利なCSSですが、実際に背景をドット柄にする際に、CSS記述と画像を用いる方法のどちらを選択するかは要件次第（今後、ドットをCSSで表現し辛い形状に変更する予定があるetc）ですので、その辺は注意が必要ですね。

この記事が参加している募集

#やってみた

39,778件

この記事が気に入ったらサポートをしてみませんか？