8ch

方眼紙模様の背景をCSSで実装する方法

HTML

<div class='grid'>
  ここにテキストを入力する
</div>

CSS

.grid {
    background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                  linear-graident(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
    background-size: 10px 10px;
    background-repeat: repeat;
    background-position: center center;
}

解説

background-imageで横に1pxの1本線、縦に1pxの1本線を引く

background-repeatで線をリピートしてマス目にする

background-sizeで1マスの大きさを指定

linear-gradient

グラデーションの角度…0deg(下から上へ)、90deg(左から右へ)

グラデーションの色… transparent calc(100% – 1px), #f0f0f0 calc(100% – 1px) は

0pxから100%-1pxまで透明にする、100%-1pxから100%までは灰色にするという意味

参考サイト

https://web-dev.tech/front-end/css/graph-paper-background/

ホームに戻る