【コピペOK】CSSだけでチェック(格子・市松模様)が作れます
背景画像のリピートで実装することの多いチェック・格子・市松模様、実はCSSだけで実装できます。
この記事で分かること
- CSSだけでチェック模様を作る方法
この記事の著者
- フリーランス
- Webデザイナー兼UI/UXデザイナー
完成形はコチラ
CSSのみで、チェック柄（市松・格子模様）ができます。
div{
width: 200px;
height: 200px;
background-image: conic-gradient(#FFE220 0deg 90deg, #F6AA2A 90deg 180deg, #FFE220 180deg 270deg, #F6AA2A 270deg 360deg);
background-size: 30px 30px;
}
格子模様の作り方
円錐形のグラデーションを作る
まずはconic-gradient()関数を使って、円錐グラデーションを作ります。
以下は12時の位置から時計回りに「黄色、オレンジ、黄色、オレンジ」を設定した円錐グラデーションのサンプルです。
div{
width: 200px;
height: 200px;
background-image: conic-gradient(#FFE220, #F6AA2A, #FFE220, #F6AA2A);
}
円錐形グラデーションの切り替わり位置を設定する
conic-gradient()関数では、1つの色に対して開始角度と終了角度、2つの数値を設定することができます。
以下は、12時の位置を0度として時計回りに、0〜90度が黄色、90〜180度がオレンジ、180〜270度が黄色、270〜360度がオレンジになるよう設定したサンプルです。
.div{
width: 200px;
height: 200px;
background-image: conic-gradient(#FFE220 0deg 90deg, #F6AA2A 90deg 180deg, #FFE220 180deg 270deg, #F6AA2A 270deg 360deg);
}
これで格子のユニットが1つできました。
格子を繰り返す
格子1ユニットあたりのサイズをbackground-sizeで調整します。今回は30px × 30pxにしました。
リサイズしたユニットが要素内を埋め尽くすようにリピート配置されることで、格子模様ができあがります。
div{
width: 200px;
height: 200px;
background-image: conic-gradient(#FFE220 0deg 90deg, #F6AA2A 90deg 180deg, #FFE220 180deg 270deg, #F6AA2A 270deg 360deg);
background-size: 30px 30px;
}
まとめ
これまでボーダーやストライプ、水玉など、様々なパターンをCSSだけで作る方法をご紹介してきていますが、サイズや色味をちょっと変えたい、なんていう時にCSSだけで調整できるとラクなんですよね。
画像を使わない分、ページ読み込み時間の短縮も期待できるかもしれません。
