0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【初心者でもわかる】CSSで方眼紙のような背景を作る方法

Posted at

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

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

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

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

css方眼紙の作り方

style.css
body {
  /* 10px四方の方眼紙 */
  background: linear-gradient(0deg, transparent 9px, #333 10px), linear-gradient(90deg,  transparent 9px, #333 10px);
  background-size: 10px 10px
}

結果
sample.png

解説

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

まとめ

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

おそまつ!

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?