背景を水玉模様にする

できあがりイメージ

つくりかた

Step2 水玉模様にしたい要素のCSSセレクタを探す

CSSのセレクタで クラス名"photo"を探しましょう。

Step3 背景に等間隔の水玉模様を作る

background-image に radial-gradient を追加して、円形のグラデーションを作ります。
radial-gradient でカッコの中に、２色の色とその色が表示される範囲(-％)を指定すると円形のグラデーションが作成できます。
２色の値と値は , (カンマ) で区切るように注意しましょう。
サンプルでは #ffb553(オレンジ)と、transparent(色を表示させない) を指定しています。
#ffb553とtransparentに同じ%の指定をすると、色の境界線がはっきりします。

Step4 水玉のサイズを指定する

background-size を追加して、水玉のサイズを指定します。
background-sizeでは水玉のサイズを指定しています。
最初の値が水玉の横のサイズ、２つ目の値が縦のサイズです。

Step5 コードを書くかコピー＆ペーストする

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step6 今の見え方を確認する

水玉が等間隔に並んでいたら次のステップに進みましょう。

Step7 水玉を増やす

radial-gradient をもう一つ追加して、水玉を増やします。
２つ目の radial-gradient は１つ目の radial-gradient の後ろに , (カンマ) で区切って追加します。
サンプルではわかりやすいように水玉の色を pink(ピンク)にしています。
今は１つ目の水玉 (オレンジ) の下にピンクの水玉が重なって作られているので、見えていません。

Step8 水玉を交互に並べる

background-positionで水玉の位置を指定できます。
最初の 0 0 は黄色の水玉の位置、20px 20px はピンクの水玉の位置で , (カンマ) で区切ります。
最初の値が水玉の横の位置、２つめの値が縦の位置です。
片方の水玉の位置を半分の距離づつずらすことで交互に並んでいるように見えます。

Step9 コードを書くかコピー＆ペーストする

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step10 実際の見え方を確認する

水玉が交互に並んでいたら完成です。