背景をグリッド線にする方法

articles＞coding

背景をグリッド線にする方法

更新: 2026/3/31

「グリッド線」とは:

格子模様のこと。

設置方法:

以下のコードをコピペするだけ。

【CSS】

/*▼グリッドここから*/

background-image: 
  /*1pxの#abb8c8横線*/
  linear-gradient(0deg, transparent calc(100% - 1px), #abb8c8 calc(100% - 1px)),
  /*1pxの#abb8c8縦線*/
  linear-gradient(90deg, transparent calc(100% - 1px), #abb8c8 calc(100% - 1px));

/*線と線の間隔が15px*/  
background-size: 15px 15px;

/*繰り返す→グリッド線が全体に広がる*/
background-repeat: repeat;

/*背景の開始地点（中央から配置）*/
background-position: center center;

/*▲グリッドここまで*/

【デモ】