HTML

コピペで簡単 CSS でストライプや格子模様を作るには repeating-linear-gradient() 関数を使おう!

コピペで簡単 CSS でストライプや格子模様を作るには repeating-linear-gradient() 関数を使おう!
例えば、画像を使わずにストライプや格子模様を作りたいときに便利。

  1. CSS でストライプや格子模様を作るには repeating-linear-gradient() 関数を使おう!
    1. CSS で横縦縞ストライプを作る方法
    2. CSS で縦縞ストライプを作る方法
    3. CSS で格子模様を作る方法
  2. ストライプや格子の繰り返しを中央から始める方法

CSS でストライプや格子模様を作るには repeating-linear-gradient() 関数を使おう!

CSS でストライプや格子模様を作るには repeating-linear-gradient() 関数を使用します。

CSS で横縞ストライプを作る方法

CSS で横縞ストライプを作るためには repeating-linear-gradient() 関数を使います。
例えば、32px x 32px の範囲で 1px の線の横縞ストライプを作る場合は次の様に指定します。

.stripe1 {
background-image:
repeating-linear-gradient(
#000 ,
#000 1px,
#fff 1px,
#fff 32px
);
}

Chrome の場合、線が細いと滲んで見える場合があります。注意しましょう。

CSS で縦縞ストライプを作る方法

CSS で縦縞ストライプを作るためには repeating-linear-gradient() 関数に角度の値を追加します。
例えば、32px x 32px の範囲で 1px の線の縦縞ストライプを作る場合は次の様に指定します。

.stripe2 {
background-image:
repeating-linear-gradient(
90deg,
#000 ,
#000 1px,
#fff 1px,
#fff 32px
);
}

CSS で格子模様を作る方法

CSS で格子模様を作るためには repeating-linear-gradient() 関数をカンマ区切りで複数指定します。
例えば、32px x 32px の範囲で 1px の線の格子模様を作る場合は次の様に指定します。

.lattice1 {
background-image:
repeating-linear-gradient(
90deg,
#000 ,
#000 1px,
transparent 1px,
transparent 32px
),
repeating-linear-gradient(
0deg,
#000 ,
#000 1px,
#fff 1px,
#fff 32px
);
}

ストライプや格子の繰り返しを中央から始める方法

ストライプや格子の繰り返しを中央から始めるには background-sizebackground-position を指定します。
例えば、32px x 32px の範囲で繰り返しを中央基準にしたい場合は次のように指定します。

.lattice_center1 {
background-size: 32px 32px;
background-position: 50% 50%;
background-image:
repeating-linear-gradient(
90deg,
#000 ,
#000 1px,
transparent 1px,
transparent 32px
),
repeating-linear-gradient(
0deg,
#000 ,
#000 1px,
#fff 1px,
#fff 32px
);
}

background-size で繰り返す対象のサイズを指定。
background-position で繰り返し位置を中央に指定します。

まとめ

コピペで簡単 CSS でストライプや格子模様を作る方法を紹介しました。
1px単位の表現をする場合、ブラウザーによっては線が滲むので注意しましょう。

この記事をシェアする