CSS でストライプや格子模様を作るには repeating-linear-gradient() 関数を使おう！
最終更新日 - 公開日 2019.02.21
by
CSS でストライプや格子模様を作るには repeating-linear-gradient() 関数の使用がおすすめです。
例えば、画像を使わずにストライプや格子模様を作りたいときに便利な方法です。
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-size と background-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単位の表現をする場合、ブラウザーによっては線が滲むので注意しましょう。
