CSS で見事なチェッカーボード背景を作成する

はじめに

この実験では、CSS プログラミングを使ってチェッカーボードの背景パターンを作成します。CSS のグラデーション技術を使って、視覚的に魅力的なチェッカーボードパターンを設計する方法を学びます。このパターンは、様々な Web プロジェクトを引き立てることができます。チェッカーボードパターンは、チェス盤のように、グリッド状に配置された交互の色の正方形から構成される古典的なデザイン要素です。

この実験を完了することで、CSS の背景、グラデーション、およびパターン作成に関する実践的な経験を積むことができます。これらのスキルは、現代の Web デザインにとって非常に重要です。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CodingStandardsandBestPracticesGroup(["Coding Standards and Best Practices"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/properties("Properties") css/BasicConceptsGroup -.-> css/values("Values") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/CodingStandardsandBestPracticesGroup -.-> css/comments("Comments") subgraph Lab Skills css/properties -.-> lab-35180{{"チェッカーボード背景パターン"}} css/values -.-> lab-35180{{"チェッカーボード背景パターン"}} css/colors -.-> lab-35180{{"チェッカーボード背景パターン"}} css/width_and_height -.-> lab-35180{{"チェッカーボード背景パターン"}} css/backgrounds -.-> lab-35180{{"チェッカーボード背景パターン"}} css/comments -.-> lab-35180{{"チェッカーボード背景パターン"}} end

プロジェクトファイルの理解

チェッカーボードパターンの作成を開始する前に、仮想マシン (VM) で提供されているプロジェクトファイルを確認しましょう。

ファイルエクスプローラーパネルで index.html ファイルをクリックして、エディターで開きます。

最初の HTML ファイルは次のようになっているはずです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- You will add your code here -->
  </body>
</html>

次に、エディターで style.css ファイルを開きます。

最初の CSS ファイルは空であるか、最小限のスタイルが含まれているはずです。

/* CSS styles will be added here */

ウェブページの初期状態を確認するために、開発サーバーを起動しましょう。

ウェブページをブラウザで表示するには、エディターの右下隅にある「Go Live」ボタンをクリックします。これによりライブサーバーが起動し、ウェブページが Web 8080 タブに表示されます。

この時点ではまだコンテンツやスタイルを追加していないため、空白のページが表示されるはずです。

HTML 構造の作成

プロジェクトファイルを理解したので、チェッカーボードパターンの HTML 構造を作成しましょう。

再度エディターで index.html ファイルを開きます。
チェッカーボードパターンのコンテナ要素を追加する必要があります。<body> タグ内のコメントを、クラス名が "checkerboard" の <div> 要素に置き換えます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="checkerboard"></div>
  </body>
</html>

Ctrl+S を押すか、「ファイル」>「保存」をクリックして、index.html ファイルを保存します。
次に、チェッカーボードの寸法を定義する基本的な CSS を追加しましょう。style.css ファイルを開き、次のコードを追加します。

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
}

この CSS コードは以下のことを行います。

チェッカーボードの幅と高さを 240 ピクセルに設定します。
背景色を白 (#fff) に設定します。

style.css ファイルを保存します。
Web 8080 タブを更新して変更を確認します。

これで幅と高さが 240 ピクセルの白い正方形が表示されるはずです。これがチェッカーボードパターンのキャンバスになります。

最初のグラデーションの作成

ここでは、CSS グラデーションを使ってチェッカーボードパターンの作成を始めましょう。パターンの一部を作成するために、最初の線形グラデーションを追加します。

CSS 線形グラデーションの理解

CSS の線形グラデーションを使用すると、直線上で 2 色以上の色を滑らかに遷移させることができます。linear-gradient() 関数は、角度と一連のカラーストップをパラメータとして受け取ります。この手法を使ってチェッカーボードの正方形を作成します。

以下の手順に従ってください。

style.css ファイルを開きます。
.checkerboard クラスを変更して、最初の線形グラデーションを追加します。

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(
    45deg,
    #000 25%,
    transparent 25%,
    transparent 75%,
    #000 75%,
    #000
  );
  background-size: 60px 60px;
}

このグラデーションが何をするか説明します。

45deg はグラデーションの角度を指定します。
#000 25% は利用可能な領域の 0% から 25% までを黒色にします。
transparent 25% は 25% から透明色を開始します。
transparent 75% は 75% まで透明色を維持します。
#000 75% は 75% で再び黒色に遷移し、最後まで続きます。
background-size: 60px 60px は各繰り返しグラデーションセルのサイズを設定します。

style.css ファイルを保存します。
Web 8080 タブを更新して変更を確認します。

これでパターンが形成され始めているはずですが、まだ完全なチェッカーボードにはなっていません。最初のグラデーションはパターンの一部だけを作成します。次のステップでは、2 つ目のグラデーションを追加してチェッカーボードを完成させます。

チェッカーボードパターンの完成

ここでは、2 つ目の線形グラデーションを追加してチェッカーボードパターンを完成させ、要素全体に繰り返し表示させましょう。

再度 style.css ファイルを開きます。
.checkerboard クラスを変更して、交互のパターンを作成する 2 つ目の線形グラデーションを追加します。

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image:
    linear-gradient(
      45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    ),
    linear-gradient(
      -45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    );
  background-size: 60px 60px;
  background-repeat: repeat;
}

追加した内容は以下の通りです。

最初のグラデーションに似ていますが、交互のパターンを作成するために -45deg の角度を持つ 2 つ目の linear-gradient()
background-repeat: repeat プロパティは、パターンが要素全体に繰り返し表示されることを保証します

これら 2 つの異なる角度のグラデーションを組み合わせることで、古典的なチェッカーボードパターンが作成されます。最初のグラデーションは一連の斜めの正方形を作成し、2 つ目のグラデーションは隙間を埋める別の正方形を作成します。

style.css ファイルを保存します。
Web 8080 タブを更新して最終結果を確認します。

これで、黒と白の正方形が交互に並んだ完全なチェッカーボードパターンが表示されるはずです。このパターンは 240px × 240px の要素全体に繰り返し表示されます。

パターンの仕組み

チェッカーボードの効果は以下のようにして作成されます。

逆の角度 (45deg と -45deg) の 2 つの線形グラデーションを使用する
各グラデーションは角に黒い正方形のパターンを作成する
透明な領域により、白い背景が透けて見える
background-size プロパティはパターン内の各正方形のサイズを制御する
background-repeat プロパティはパターンを要素全体に繰り返し表示させる

この手法は、画像ファイルを必要とせずに複雑なパターンを作成する CSS グラデーションの威力を示しており、読み込み時間の短縮とスケーラビリティの向上につながります。

まとめ

チェッカーボード背景パターンの実験を完了したことをお祝いします。この実験では、以下のことを行いました。

チェッカーボードパターンを表示するための HTML 構造を作成しました。
CSS の線形グラデーションを使ってパターンを作成する方法を学びました。
異なる角度の複数のグラデーションを組み合わせてチェッカーボードの効果を作成しました。
パターンを完成させるためにサイズと繰り返しのプロパティを適用しました。

このチェッカーボードパターンは、多くのウェブデザインプロジェクトに適用できる強力な CSS テクニックを示しています。画像の代わりにグラデーションを使用するこのアプローチは、ウェブページの読み込み時間を短縮し、スケーラビリティを向上させます。

これで、CSS グラデーションを使って他のパターンや視覚効果を作成することができます。以下のことを試してみることができます。

チェッカーボードの色を変える
正方形のサイズを変更する
グラデーションの角度を変える
縞模様やドットなどの他の幾何学模様を作成する

この実験で学んだテクニックは、純粋な CSS で洗練された背景パターンを作成するための基礎を提供します。