方眼紙模様の背景を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/)
ホームに戻る