ここではCSSのlinear-gradientプロパティを利用することでグリッド線を作る方法をまとめます。linear-gradientは本来グラデーションを作成するためのプロパティですが、応用することでグリッド線を作成することができます。

横線

　仕組みとしてはlinear-gradientプロパティを利用し、始点と終点を同色としたグラデーションを連続で指定することで横線を作成します。

• 結果

• HTML

• CSS

• 横線

• /* HTMLの例 */
  	
  横線
  	

• /* CSSの例 */
  
  .sample1 {
      background-image: linear-gradient(white 25%, skyblue 25%, skyblue 50%, white 50%, white 75%, skyblue 75%, skyblue);
      background-size: 10px 10px;
      height:100px;
  }
  	

縦線

　グラデーションの角度を90度で指定します。

• 結果

• HTML

• CSS

• 縦線

• /* HTMLの例 */
  	
  縦線
  	

• /* CSSの例 */
  
  .sample2 {
      background-image: linear-gradient(90deg,white 25%, skyblue 25%, skyblue 50%, white 50%, white 75%, skyblue 75%, skyblue);
      background-size: 10px 10px;
      height:100px;
  }
  	

斜線

　グラデーションの角度を-45度又は45度で指定します。

• 結果

• HTML

• CSS

• 斜線

• /* HTMLの例 */
  	
  斜線
  	

• /* CSSの例 */
  
  .sample3 {
      background-image: linear-gradient(-45deg,white 25%, skyblue 25%, skyblue 50%, white 50%, white 75%, skyblue 75%, skyblue);
      background-size: 10px 10px;
      height:100px;
  }
  	

• 結果

• HTML

• CSS

• 細い斜線

• /* HTMLの例 */
  	
  細い斜線
  	

• /* CSSの例 */
  
  .sample4 {
      background-image: linear-gradient(-45deg,white 49%, skyblue 49%, skyblue 50%, white 50%, white 51%, skyblue 51%, skyblue);
      background-size: 10px 10px;
      height:100px;
  }
  	

複合

　縦横線の複合です。background-imageを複数適用します。既にサポート期限は終了しているIE9以前については複数背景を適用できないため正しく表示できません。

• 結果

• HTML

• CSS

• 縦横線

• /* HTMLの例 */
  	
  縦横線
  	

• /* CSSの例 */
  
  .sample5 {
      background-image: linear-gradient(transparent 0%,transparent 45%, skyblue 46%, skyblue 55%, transparent 56%, transparent 100%),linear-gradient(90deg,white 0%,white 45%, skyblue 46%, skyblue 55%, white 56%, white 100%);
      background-size: 10px 10px;
      height:100px;
  }
  	

• 結果

• HTML

• CSS

• 斜線

• /* HTMLの例 */
  	
  斜線
  	

• /* CSSの例 */
  
  .sample6 {
      background-image: linear-gradient(-45deg,transparent 0%,transparent 45%, skyblue 46%, skyblue 55%, transparent 56%, transparent 100%),linear-gradient(45deg,white 0%,white 45%, skyblue 46%, skyblue 55%, white 56%, white 100%);
      background-size: 10px 10px;
      height:100px;
  }