どうも7noteです。方眼紙のような背景を作成する方法

以前チェック柄の背景を作成しました。

【初心者でもわかる】市松模様（いちまつもよう）やチェック柄をCSSで再現

このときに作った作り方を少し応用して、方眼紙のような背景を作ります。

css方眼紙の作り方

body{/* 10px四方の方眼紙 */background:linear-gradient(0deg,transparent9px,#33310px),linear-gradient(90deg,transparent9px,#33310px);background-size:10px10px}

結果

解説

線ですが、borderではなくbackgroundで再現します。
backgroundのグラデーションを2種類作成し、縦線の背景・横線の背景をそれぞれ1pxの線に見えるように設定します。
それに背景サイズを指定するだけ。とっても簡単！

まとめ

ずっと見ているとなんだかマインスイーパーでもできそうな感じに見えてきました。
またいつか作ってみたいですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ