これ、CSSだけでできますか?① 方眼紙(グリッド)な背景

公開:2020/09/20
更新:2020/09/20
2 min読了の目安(約1500字TECH技術記事

‣ 結論だけみたい人はこちら

方眼紙(グリッド)模様の背景画像を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;

まとめのコード

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

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