CSSのアーガイル柄ジェネレーター

CSSでアーガイル模様のジェネレーターを作ってみました。

CSSでアーガイル模様を作成する

CSSでアーガイル柄を作成するには、conic-gradient()、linear-gradient()、repeating-linear-gradient()を使って菱形のパターンを形成し、色やサイズを調整して作成します。

 /* CSS */

.argyle-pattern {
background-image: repeating-linear-gradient(
45deg,
#bfbfbf 0%,
#bfbfbf 25%,
transparent 25%,
transparent 50%
),
repeating-linear-gradient(
-45deg,
#bfbfbf 0%,
#bfbfbf 25%,
transparent 25%,
transparent 50%
),
linear-gradient(90deg, #dfdfdf 0%, #dfdfdf 50%, #bfbfbf 50%, #bfbfbf 100%),
linear-gradient(#ffdfdf 0%, #ffdfdf 100%);
background-size: 8px 8px, 8px 8px, 4px 4px, 4px 4px;
background-position: 0 0, 4px 4px, 0 0, 4px 4px;
}

ただしこの方法では、柄の変更が必要な場合には、コード内の各値を直接編集する必要があります。
これが結構面倒なので、CSSのカスタムプロパティとJavaScriptを利用して、ジェネレーターにしてみました。

CSSのカスタムプロパティ

CSSのカスタムプロパティ（またはCSS変数とも呼ばれます）は、CSSのプロパティ値を代入し、名前で呼び出せる機能です。これにより、同じ値を複数の場所で再利用できるようになります。

具体的には、以下のような特徴があります。

1. 定義方法: カスタムプロパティは--（ハイフンふたつ）を使って定義します。例えば、:root { --yellow: #fff100; }といった形式で定義します。
2. 呼び出し方: カスタムプロパティはvar(--変数名)という形式で呼び出します。例えば、.selector { background-color: var(--yellow); }といった具体的な使用例があります。
3. 予備のフォールバックの値: カスタムプロパティには予備のフォールバックの値をセットできます。変数が適用されなかった場合に、フォールバック値が適用される仕組みです。

では実際にカスタムプロパティを使ってコードを書き変えます。

 /* CSS */

/* --color-A,B,Cの色を変える */
#argyle {
  --border: #48266e88;
  --color-A: #202f55;
  --color-B: #e6eae6;
  --color-C: #418b89;
  --linear-1: var(--border), var(--border) 0.5%, rgba(255, 255, 255, 0) 0.5% 24.5%, var(--border) 24.5% 25%;
  --linear-2: var(--color-B) 12.5%, rgba(255, 255, 255, 0) 12.5% 87.5%, var(--color-B) 87.5%;
  --conic: var(--color-C) 60deg, rgba(255, 255, 255, 0) 30deg;
  /* Change the size of the pattern by width */
  /* widthのサイズで模様の大きさ変更 */
  width: 4rem;
  height: 100%;
  background-repeat: repeat;
  background-image: 
    repeating-linear-gradient(300deg, var(--linear-1)), 
    repeating-linear-gradient(240deg, var(--linear-1)),
    linear-gradient(300deg, var(--linear-2)),
    linear-gradient(240deg, var(--linear-2)),
    conic-gradient(from 330deg at 50% 25%, var(--conic)), 
    conic-gradient(from 150deg at 50% 75%, var(--conic)),
    conic-gradient(from 30deg at 25% 50%, rgba(255, 255, 255, 0) 120deg, var(--color-A) 120deg 180deg, var(--color-C) 180deg 300deg, var(--color-A) 300deg),
    conic-gradient(from 30deg at 75% 50%, var(--color-C) 120deg, var(--color-A) 120deg 180deg, var(--color-B) 180deg 300deg, var(--color-A) 300deg);  
}

カスタムプロパティの–border, –colorA, –colorB, –colorC の値を書き変えるだけで、色合いを変えることが出来ます。
widthのサイズを変更することで、模様の大きさも変更可能です。

今回コードを書きなおすにあたって、Copilotが conic-gradient() 関数を教えてくれました。
conic-gradient()`関数は、中心点の周りを回りながら色が変化するグラデーションを生成します。これは円錐（conic）を上から見たような形で、色が円周上に配置され、扇形のグラデーションを作り出します。
アーガイル柄を作成する際にconic-gradient()を使用すると、円錐状のグラデーションを利用して複雑なパターンや色の遷移を表現できます。これにより、アーガイル柄特有の菱形パターンや色の重なりを簡単に作成することが可能で、便利とのことでした。
ただし、Internet Explorer (IE): IE 11以前のバージョンと、Safari on iOS: バージョン12.2から17.3までの一部のバージョンではサポートされていないので、注意が必要とのことです¹。

JavaScriptでレスポンシブなデザインを実現

コードを書き直す際に、JavaScriptを使用してウィンドウのサイズが変更されるたびに背景パターンが適切に表示されるようにしました。静的なCSSスタイル要素だけではウィンドウのサイズに合わせることが難しい場合があり、JavaScriptを使用してスタイルを調整することが必要です。

// JavaScript

// 背景の要素を取得する
const argyle = document.getElementById("argyle");

// 背景のサイズと位置を設定する関数
function setArgyleBackground() {
  // 背景パターンの1ユニットの幅を取得する
// parseFloatを使用して小数点を含む数値を取得  
  const argyleWidth = parseFloat(getComputedStyle(argyle).width);
  // 背景パターンの1ユニットの高さを計算する
  let argyleHeight = (argyleWidth / 4) * Math.sqrt(3) * 4 + "px";

  // 背景のサイズと位置を設定する
  argyle.style.width = "100%";
  argyle.style.backgroundSize = argyleWidth + "px " + argyleHeight;
}

// 画面のサイズが変わったときに、背景のサイズと位置を設定する関数を呼び出す
window.addEventListener("resize", setArgyleBackground);

// 最初に一度、背景のサイズと位置を設定する
setArgyleBackground();

これでとても簡単に綺麗なアーガイル模様を作成でるようになりました。

アーガイルジェネレーター

レンダリング結果はこちらでご確認ください。

See the Pen Argyle GeneratorArgyle 2 by ic ya (@ic-ya) on CodePen.

1. CSS Conical Gradients ↩︎