レンちゃんとペンタ

【コピペOK】CSSだけでチェック(格子・市松模様)が作れます

【コピペOK】CSSだけでチェック(格子・市松模様)が作れます

背景画像のリピートで実装することの多いチェック・格子・市松模様、実はCSSだけで実装できます。

この記事で分かること

  • CSSだけでチェック模様を作る方法

    Webデザインとブログで豊かに引きこもる。

    レンちゃんとペンタ

    Webデザインは器。ブログは中身。
    「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
    おウチで豊かに楽しく暮らす方法をご紹介しています。

    完成形はコチラ

    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だけで調整できるとラクなんですよね。
    画像を使わない分、ページ読み込み時間の短縮も期待できるかもしれません。

    1. Home
    2. 【コピペOK】CSSだけでチェック(格子・市松模様)が作れます

    Related Posts