【HTML/CSS】CSSで格子模様やチェック柄背景を作る方法

2022-09-01 2025.01.02

1 格子模様やチェック柄背景とは
2 CodePen ソースコードサンプル
3 基本的なHTML構造
4 CSSで格子模様やチェック柄背景を作成する方法

ウェブデザインにおいて、背景に格子模様やチェック柄を取り入れることで、視覚的な魅力と動きを加えることができます。これらのパターンはシンプルながらも効果的で、さまざまなデザインスタイルにマッチします。本記事では、CSSを使用して格子模様やチェック柄背景を作成する方法を、具体的なコード例とともに詳しく解説します。

格子模様やチェック柄背景とは

格子模様やチェック柄背景は、交互に色が変わる縦横の線で構成されたパターンです。これらのパターンは、シンプルでありながら視覚的に印象的なデザインを実現し、テキストや他のコンテンツを引き立てる効果があります。格子模様やチェック柄は、ブランドアイデンティティの強化や、セクションの区切りとしても活用されます。

CodePen ソースコードサンプル

基本的なHTML構造

格子模様やチェック柄背景を適用するための基本的なHTML構造は非常にシンプルです。以下のような<div>要素にクラスを付与し、CSSでスタイリングを行います。

<div class="chequered">
  <p class="text">テキストテキストテキストテキストテキスト</p>
</div>

解説:

<div class="chequered">: 格子模様やチェック柄背景を適用するコンテナ要素です。
<p class="text">: 背景上に表示されるテキスト要素です。適宜スタイリングします。

CSSで格子模様やチェック柄背景を作成する方法

CSSのrepeating-linear-gradientを使用して、格子模様やチェック柄の背景を作成します。以下に基本的なスタイルを示します。

.chequered {
  --CHECK_SIZE: 20px; /* 基本のチェックサイズ */
  --CHECK_BORDER: 2px; /* 線の太さ */
  --CHECK_COLOR: #119be6; /* 線の色 */
  --CHECK_BG: #fff; /* 背景色 */
  
  background-size: var(--CHECK_SIZE) var(--CHECK_SIZE);
  background-position: 50% 50%;
  background-image: 
    repeating-linear-gradient(
      90deg, 
      var(--CHECK_COLOR), 
      var(--CHECK_COLOR) var(--CHECK_BORDER), 
      var(--CHECK_BG) var(--CHECK_BORDER), 
      var(--CHECK_BG) var(--CHECK_SIZE)
    ), 
    repeating-linear-gradient(
      0deg, 
      var(--CHECK_COLOR), 
      var(--CHECK_COLOR) var(--CHECK_BORDER), 
      var(--CHECK_BG) var(--CHECK_BORDER), 
      var(--CHECK_BG) var(--CHECK_SIZE)
    );
}

@media screen and (min-width: 768px){
  .chequered{
    --CHECK_SIZE: 30px; /* デスクトップ用チェックサイズ */
  }
}

@media screen and (max-width: 767px){
  .chequered{
    --CHECK_SIZE: 20px; /* モバイル用チェックサイズ */
  }
}

.text {
  text-align: center;
  padding-block: 200px;
}

ポイント: