これ、CSSだけでできますか？①　方眼紙（グリッド）な背景

jsでやるのが当たり前と思われているものをCSSで作っちゃお企画、第一弾です！
‣ 結論だけみたい人はこちら

方眼紙（グリッド）模様の背景画像をCSSだけで作っちゃおう💪

background は指定した画像を繰り返します。
なので、方眼紙な background を作るには繰り返す最小単位を見つけましょう💪
方眼紙の場合以下の2箇所を繰り返すと縦線と横線が繰り返され、グリッド状になりますネ😇

ステップ1　— 縦の糸はあなた —

ではその模様を一つ作ってみましょう😇
プロパティはbackground-imageを使います。方眼の幅は32px四方にしておきましょうか。。

background-image: linear-gradient(90deg, transparent 31px, #333 32px);
/* 透明を 31px まで続けて 32pxめに #333 の色になる垂直のグラデーション */
background-size: 32px;
/* ↑この模様は32px */

これはこうなります⬇️

ステップ2　— 横の糸はわたし —

ではもう片方を作ってみましょう😇
角度を変えるだけですネ！

background-image: linear-gradient(0deg, transparent 31px, #333 32px);
background-size: 32px;
/* ↑この模様は32px */

これはこうなります⬇️

ステップ3　— 織りなす布は —

ではこれを掛け合わせましょう💪
linear-gradient は,で複数指定することができます。これを利用します。
これで完成✨

background-image: linear-gradient(0deg, transparent 31px, #333 32px), linear-gradient(90deg,  transparent 31px, #333 32px);
background-size: 32px 32px;

おまけ

今回は transparent を使っているので、さらに背景色を指定することで変化をつけられます😇

background-color: skyblue;

まとめのコード

とっても簡単にできました😇
グラデーションで線を表現する というのが今回のミソですね！

機会があればぜひ使ってみてくださいネ〜👋