【CSS】斜め市松模様の解説

　どうも！LSSです！！

little-strange.hatenablog.com

について、「どういう理屈であのコードが斜め市松模様になるのか」って話を書きます。

linear-gradient を用いた模様を作る際の%による指定についても書いていますので、gradient系の指定方法を これから覚えたい方にも参考になるかと^^

linear-gradientについて

 

コード

<div style="
width: 200px;
height: 200px;
border: 1px solid black;
background-image:
linear-gradient(to top right,red,blue);
"> </div>

↑まずは「左下から右上に向かって、赤から青に変化するグラデーション（linear-gradient(to top right,red,blue)）」を描いてみました。

「to top right」、toは「～に向かう」というニュアンス、topは上、rightは右で、「右上に向かう」という指定になります。
この記載で、対角線を通って左下から右上に向かうグラデーションとなり、その後の「red,blue」で「赤から青に変化するグラデーション」を指定した事で、こういうグラデーションになるんですね。

グラデーションに位置を指定してみます

 

コード

<div style="
width: 200px;
height: 200px;
border: 1px solid black;
background-image:
linear-gradient(to top right,red 49%,blue 50%);
"> </div>

先ほどのコードの、「red」の後に半角スペースを開けて「49%」、「blue」の後に半角スペースを開けて「50%」と追記してみました。

すると、グラデーションではなくなり、ちょうど真ん中できっぱり赤と青に分かれましたね。

このように、色指定の後に「%」を指定すると、「グラデーションがその割合に進んだ時点ではその色である」と指定した事になります。

まんなか…＝「50%」のあたりで、49%地点では赤、50%地点で青、という指定になるため、「49%～50%のほとんど見えない細い範囲で急激に赤から青に変化するグラデーション」という事になっています。

なお、gradient中で色を指定した場合、最初の色は暗黙の了解として「0%」を含み、最後の色は「100%」を指定したのと同じ事になるため、この書き方で「0~49%部分は赤、50~100%は青」という意味になります。
（明示的に指定したら「red 0% 49%,blue 50% 100%」という書き方をしたのと同じ。）

対角線を指定する「to top right」の面白いところ

linear-gradientの中の最初の指定は「45deg」などの角度を指定する事も出来るのですが、今回のような「to top right」には角度指定ではできない面白い特徴があります。

 

コード

<div style="
width: 200px;
height: 120px;
border: 1px solid black;
background-image:
linear-gradient(to top right,red 49%,blue 50%);
"> </div>

↑要素の高さ（height）だけを200→120に変更してみました。

先ほどまでは 200x200 の正方形でしたが、今度は長方形。
に変えたにもかかわらず、赤から青の変わりめがちょうど「左上の角」と「右下の角」のところで変わっていますね。

これを「角度で指定」しようと思うと、サイン・コサイン・タンジェント…を持ち出して角度決めしないといけなくなり、また幅・高さの縦横比が変わるたびに再計算が必要になってしまいます。

が、「to top right」で指定した事で、角度を計算しなくても常に「対角線に沿って綺麗に分かれる」という事になります^^

※「右上に向かう」のに対して直角じゃないのがちょっと奇妙な気がしますが…そういうものだと納得してくださいｗ

25%と75%

さて、ここまでは「50%」＝「ちょうど真ん中」を例にとって書いてきました。

ここで、この「色のさかいめ」を「25%」と「75%」の位置で変化するように書き換えてみます。

 

コード

<div style="
width: 200px;
height: 120px;
border: 1px solid black;
background-image:
linear-gradient(to top right,red 24%,yellow 25% 74%,blue 75%);
"> </div>

「さかいめ」が増えたので、赤と青の間に黄色を挟んでみました。

「赤→黄色→青」という並びになりましたが…ここで注目して欲しいのが、「上下左右の各辺上の、色のさかいめ」部分！

赤から黄色、黄色から青…の変化が、

辺と当たっている部分…はいずれも「各辺のちょうど真ん中」になっています！

指定した25と75は、「0と50のまんなか」「50と100のまんなか」地点という事になるので、左上・右下の角になっていた「色のさかいめ」がやはり「まんなか」にきているんですね。

次に、色を「赤→透明→赤」にしてみます

 

コード

<div style="
width: 200px;
height: 120px;
border: 1px solid black;
background-image:
linear-gradient(to top right,red 24%,transparent 25% 74%,red 75%);
"> </div>

形としては先ほどと同じですが、色を変えただけです。

間の白く見えている部分は、透過色を指定している部分です。

そして左右逆向きのlinear-gradientを重ねます

 

コード

<div style="
width: 200px;
height: 120px;
border: 1px solid black;
background-image:
linear-gradient(to top left,red 24%,transparent 25% 74%,red 75%)
, linear-gradient(to top right,red 24%,transparent 25% 74%,red 75%);
"> </div>

「linear-gradient(to top right,red 24%,transparent 25% 74%,red 75%)」をクリップボードにコピーし、二つ並べて「,」（←カンマ）で区切りました。
そして一方の「right」を「left」に書き換えた事で、「左右逆向き」の模様を重ねた事になります。

「白い部分は透過」だったので、透過部分からもうひとつの模様が見えている感じですね^^

ここで、background-sizeを指定してみます

ここまで、background-sizeを指定せずに書いていたため、模様は「枠いっぱい」に広がった状態で描かれてきました。

ここで、background-sizeの指定を追加し、もっと小さい模様にしてみると…

 

コード

<div style="
width: 200px;
height: 120px;
border: 1px solid black;
background-image:
linear-gradient(to top left,red 24%,transparent 25% 74%,red 75%)
, linear-gradient(to top right,red 24%,transparent 25% 74%,red 75%);
background-size:40px 30px;
"> </div>

模様ひとつあたり、「横40px、縦30px」にしてみました。

background-repeat（繰り返し）はデフォルトで上下・左右とも「繰り返しアリ」になっているため、勝手に「枠内に小さい模様が繰り返し並べられた」事になっています。

並べられた事で、「左上・右上・右下・左下」にあった「赤い直角三角形」が合わさって菱形になっています。

また、その間部分も同じ大きさの「白（透明）の菱形」なので、「斜めになり、ひしゃげた市松模様」の完成です^^

…ひしゃげているのが嫌でしたら、background-sizeの２つの値を同じにする事で、

 

↑傾いた正方形が並ぶ市松模様になりましたね^^
※ background-size:30px 30px; としてみました。

あとがき

対角線指定ができる事と、%の指定の工夫次第ではlinear-gradientとは思えないような模様を描けそうですね^^

あと、思いついたのですが、

 

↑こんなフェンスのような背景も描けちゃったりします。

<div style="
width: 200px;
height: 120px;
border: 1px solid black;
background-image:
linear-gradient(to top left,#88888800 20%,#888888 25%,#88888800 30% 70%,#888888 75%,#88888800 80%)
, linear-gradient(to top right,#88888800 20%,#888888 25%,#88888800 30% 70%,#888888 75%,#88888800 80%);
background-size: 40px 30px;
"> </div>

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^