どうも7noteです。市松模様やチェック柄を再現します

模様の再現は画像でやる方が簡単だったりしますが、CSSでも再現が可能です。
CSSなら色を変えたり大きさを変えたりが安易にできるので、使えるようになると便利かもしれませんね。

そんなわけで今回は2つの模様（柄）の作り方をまとめていきます。

市松模様（いちまつもよう）

チェック柄

まずは、CSSで市松模様（いちまつもよう）の作り方

index.html

<divclass="ichimatsu"></div>

style.css

.ichimatsu{width:200px;/* 横幅を200pxに指定 */height:200px;/* 高さを200pxに指定 */background-image:linear-gradient(45deg,#00025%,transparent25%,transparent75%,#00075%),linear-gradient(45deg,#00025%,transparent25%,transparent75%,#00075%);/* 市松模様になるようグラデーションで単色を入れる */background-position:00,30px30px;/* 「0 0」と1マス（1色）の大きさ「30px 30px」をそれぞれ指定 */background-size:60px60px;/* 1マス分の倍の大きさを指定「60px 60px」 */background-color:#FFF;/* もう一つの単色を入れる */}

結果

仕組みはこんな感じ。

background-imageで指定している2つのグラデーションを色分けしてみると・・・

このように連続する三角形の2種類がうまく重なり、正方形が並んでいるように見える。

これも1パーツでみるとこんなかんじ。

この赤枠と青枠がそれぞれ上下左右にリピートされることで、市松模様が作られている。

つぎは、CSSでチェック柄の作り方

index.html

<divclass="plaid"></div>

style.css

.plaid{width:200px;/* 横幅を200pxに指定 */height:200px;/* 高さを200pxに指定 */background-image:repeating-linear-gradient(tobottom,rgba(255,77,77,0.50),rgba(255,77,77,0.50)30px,rgba(0,0,0,0)0,rgba(0,0,0,0)60px),repeating-linear-gradient(toright,rgba(255,77,77,0.50),rgba(255,77,77,0.50)30px,rgba(0,0,0,0)0,rgba(0,0,0,0)60px);background-color:#fff;}