CSSのタータンチェックジェネレーター

今回はタータンチェックのジェネレーターを作ってみました。

CSSでタータンチェックを作成する

CSSでタータンチェック模様を作成するには、主にbackgroundプロパティを利用して、線や色の組み合わせで模様を作り出す方法があります。CSSのlinear-gradientを使って、特定の角度で色を重ね合わせることで、タータンチェックのような模様を作ることができます。

/* CSS */

:root {
  /* 色のカスタムプロパティ */
--c-A1: rgba(200, 44, 85, 0.4);
--c-B1: rgba(0, 77, 37, 0.6);
--c-C1: rgba(193, 171, 5, 0.6); 

--c-A2: rgba(200, 44, 85, 1);
--c-B2: rgba(0, 77, 37, 1);
--c-C2: rgba(193, 171, 0, 0.8);

}



#tartancheck {
  width: 100%;
  height: 100vh;
background: repeating-linear-gradient(to right,
    var(--c-A1),
    var(--c-A1) 10px,
    var(--c-B1) 10px 15px,
    var(--c-A1) 15px 16px,
    var(--c-B1) 16px 21px,
    var(--c-A1) 21px 22px,
    var(--c-B1) 22px 27px,
    var(--c-A1) 27px 37px,
    var(--c-C1) 37px 39px),
  repeating-linear-gradient(to bottom,
    var(--c-A2),
    var(--c-A2) 10px,
    var(--c-B2) 10px 15px,
    var(--c-A2) 15px 16px,
    var(--c-B2) 16px 21px,
    var(--c-A2) 21px 22px,
    var(--c-B2) 22px 27px,
    var(--c-A2) 27px 37px,
    var(--c-C2) 37px 39px);
}

前回のアーガイル模様のジェネレーターを応用して、今回もカスタムプロパティを使用しました。
これで一応タータンチェックは表示されますが、問題がひとつあります。
それはグラデーションの幅をpx（ピクセル）で指定しているため、ディスプレイのサイズが変わると、デザインが崩れてしまうことがあるからです。pxは絶対単位なので、ディスプレイの解像度やサイズによって見え方が変わってしまいます。
この問題を解消するには、%（パーセンテージ）で指定する必要があります。%は相対単位なので、親要素やビューポートのサイズに基づいてサイズが変わるため、異なるディスプレイサイズに対しても柔軟に対応できます。つまりパーセンテージで指定すると、レスポンシブデザインが実現され、ユーザーがどのようなデバイスを使用していても、一貫したデザインが表示できるのです。

JavaScriptでレスポンシブデザインに

ということで、グラデーションの幅をパーセンテージで表す必要がありますが、全体のパターンを考慮しながら値を％に変換する作業は、非常に手間がかかります。
そこで、こちらも前回と同様にJavaScriptで背景のサイズと位置を%に変換する関数と、グラデーションの色の範囲を％に変換する関数を使ってレスポンシブデザインに対応させました。

// JavaScript

// 背景のサイズと位置を%に変換する関数
function convertBackgroundSizeAndPosition(size, position) {
  // sizeとpositionは、"width height"という形式の文字列とする
  // 例: "80px 80px", "0 0", "40px 40px"など
  // 返り値は、同じ形式の文字列とする
  // 例: "25% 25%", "0% 0%", "12.5% 12.5%"など

  // sizeとpositionを空白で分割して、数値に変換する
  let sizeArr = size.split(" ").map(Number);
  let positionArr = position.split(" ").map(Number);

  // 背景のサイズと位置を%に変換する
  // 背景のサイズは、画面の幅と高さに対する割合とする
  // 背景の位置は、背景のサイズに対する割合とする
  let width = (sizeArr[0] / window.innerWidth) * 100;
  let height = (sizeArr[1] / window.innerHeight) * 100;
  let x = (positionArr[0] / sizeArr[0]) * 100;
  let y = (positionArr[1] / sizeArr[1]) * 100;

  // 小数点以下を四捨五入して、文字列に変換する
  width = Math.round(width) + "%";
  height = Math.round(height) + "%";
  x = Math.round(x) + "%";
  y = Math.round(y) + "%";

  // 結果を返す
  return [width, height, x, y];
}

// グラデーションの色の範囲を%に変換する関数
function convertGradientColorRange(angle, range) {
  // angleは、グラデーションの角度を表す数値とする
  // 例: 0, 45, 90, 135など
  // rangeは、色の範囲を表す数値の配列とする
  // 例: [0, 10, 10, 15, 15, 16, 16, 21, 21, 22, 22, 27, 27, 37, 37, 39]など
  // 返り値は、同じ形式の数値の配列とする
  // 例: [0, 25, 25, 37.5, 37.5, 40, 40, 52.5, 52.5, 55, 55, 67.5, 67.5, 92.5, 92.5, 97.5]など

  // 角度をラジアンに変換する
  let radian = (angle * Math.PI) / 180;

  // 背景のサイズを取得する
  let width = window.innerWidth;
  let height = window.innerHeight;

  // グラデーションの繰り返しの間隔を計算する
  // 三角関数を使って、背景の対角線の長さを求める
  let interval = Math.sqrt(
    width * width + height * height - 2 * width * height * Math.cos(radian)
  );

  // 色の範囲を%に変換する
  // 色の範囲は、グラデーションの繰り返しの間隔に対する割合とする
  let result = range.map((value) => {
    let percent = (value / interval) * 100;
    // 小数点以下を四捨五入する
    return Math.round(percent);
  });

  // 結果を返す
  return result;
}

// 以下は、実際に関数を使ってCSSの値を変換する例

// 背景のサイズと位置を%に変換する
let size1 = "80px 80px";
let position1 = "0 0";
let size2 = "80px 80px";
let position2 = "40px 40px";
let [width1, height1, x1, y1] = convertBackgroundSizeAndPosition(
  size1,
  position1
);
let [width2, height2, x2, y2] = convertBackgroundSizeAndPosition(
  size2,
  position2
);

// グラデーションの色の範囲を%に変換する
let angle1 = 45;
let range1 = [0, 25, 25, 50];
let angle2 = -45;
let range2 = [0, 25, 25, 50];
let result1 = convertGradientColorRange(angle1, range1);
let result2 = convertGradientColorRange(angle2, range2);

// 変換した値をCSSのコードに反映する
let cssCode = `
#tartancheck {
  width: 100%;
  height: 100vh;
  background: repeating-linear-gradient(
    ${angle1}deg,
    var(--c-A1) 0,
    var(--c-A1) ${result1[1]}%,
    var(--c-B1) 0,
    var(--c-B1) ${result1[3]}%
  );
  background-size: ${width1} ${height1};
  background-position: ${x1} ${y1};
}

#tartancheck::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    ${angle2}deg,
    var(--c-A2) 0,
    var(--c-A2) ${result2[1]}%,
    var(--c-B2) 0,
    var(--c-B2) ${result2[3]}%
  );
  background-size: ${width2} ${height2};
  background-position: ${x2} ${y2};
}
`;

// 背景の要素のスタイルを変更する
document.getElementById("tartancheck").style.cssText = cssCode;

少し解説します。

1. function convertBackgroundSizeAndPosition(size, position)
   • この関数は、背景のサイズと位置をパーセンテージに変換します。
   • size と position は、”width height” という形式の文字列で指定されます（例: “80px 80px”, “0 0”, “40px 40px” など）。
   • 返り値は、同じ形式の文字列で、パーセンテージ表記された値です（例: “25% 25%”, “0% 0%”, “12.5% 12.5%” など）。
   • 最後に四捨五入して文字列に変換し、結果を返しています。
2. function convertGradientColorRange(angle, range)
   • この関数は、グラデーションの色の範囲をパーセンテージに変換します。
   • angle はグラデーションの角度を表す数値で、range は色の範囲を表す数値の配列です。
   • 返り値は、同じ形式の数値の配列で、パーセンテージ表記された値です（例: [0, 25, 25, 37.5, 37.5, 40, 40, 52.5, 52.5, 55, 55, 67.5, 67.5, 92.5, 92.5, 97.5] など）。
3. let radian = (angle * Math.PI) / 180;
   • 角度をラジアンに変換します。これは三角関数を使って背景の対角線を求める
     let interval = Math.sqrt(width * width + height * height – 2 * width * height * Math.cos(radian));の引数にするためです。
4. let でそれぞれの値を宣言して変換
   • 実際に関数を使ってCSSの値を変換する例です
     • – 背景のサイズと位置をパーセンテージに変換して、#tartancheck のスタイルを設定しています。
     • – グラデーションの色の範囲をパーセンテージに変換して、#tartancheck::before のスタイルを設定しています。

これでどんなディスプレイでもデザインを崩さずに表示することが出来るようになりました。
せっかく作成したデザインなので、綺麗に表示させたいですよね。

CodePenでも公開しています。
タータンチェックを作成するときは、使ってみてください。

See the Pen Tartan Check Generator2 by ic ya (@ic-ya) on CodePen.