Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【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」で指定した事で、角度を計算しなくても常に「対角線に沿って綺麗に分かれる」という事になります^^

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

 

 

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の2つの値を同じにする事で、

 

↑傾いた正方形が並ぶ市松模様になりましたね^^
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>

 

 

 

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

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