gridを勉強している時に、「あれ?これってめちゃめちゃ細かくすればドット絵描けるじゃん」と思い、ドット絵を描いたのでそれに関するナレッジシェアです。これを読み終わる頃にはあなたもcssドット絵職人です。ver.1まずはこれを見てください。https://codepen.io/ebifly/pen/qxREjK/cssだけでマリオを描きました。マリオを描くためには12×16のドットが必要なので、htmlに192個のdivを書きます。8.33%;cssにはこのようにgrid-template-rowsに6.25%を16個grid-template-columnsを12個書きます。表示領域に合わせてマリオを縮めようと思って%指定にしていたんですが、無理。width:1200px;とにかくこれで正四角形が12x16個、用意出来ました。この192個のdivひとつひとつにbackground-colorを設定していけばドット絵が完成するというだけのお話しです。ver.2ただ上記の方法だと、「〇列の〇行目はこの色...」とひとつひとつ順にブラウザとHTMLを見比べながら埋めていかないといけないため時間がかかり過ぎます。背景に色入れたいから一回り大きくして14×18に書き直そう!なんて思った日には地獄が待っています。コードも見づらいです。先程のコードにリファクタリングを掛けてもっとドット絵を描きやすくしてみました。https://codepen.io/ebifly/pen/JLrMQL/親要素の修正まずはグリッドの親要素、ここでは「bl_mario」の内容を書き換えていきます。$pixel);ドットは常に正四角形且つ%指定が難しいので、変数にまとめました。columnsとrowsの指定にrepeatを使いました。サイズ)で指定した「数字」の回数分「サイズ」を繰り返してくれる関数です。これで何度も同じ数字を打たなくて済みます。10px;と同義です。grid-template-areasを指定することで直感的にドットの配置が出来るようになります。g21";コードを見てもらえばわかるように、アスキーアートのようにコーディングできます。エリアの指定により1ドット1ドット丁寧に描いていたものが、「この範囲は赤(r01)。この範囲は緑(g01)。」のように範囲での着色が出来るのです。空白のエリアには「.」を書きます。これによりHTMLの記述も少なくなります。続いて子要素の変更点について触れていきます。HTMLに着目しましょう。</div>200行書いていたHTMLが50行程度に収まりました。この時のポイントとしてはひとつひとつ真面目に書いてたら気が遠くなるのでエメットを利用して.bl_mario_itemRed$*13のように書くと一瞬です。エメットは$*数字で連番で展開してくれます。}HTMLで書いた連番のクラスをfor構文でまとめて指定しつつ、grid-areaの指定も同時に行っています。噛み砕いて説明すると、.bl_mario_itemRed01にgrid-areaのr01を指定。.bl_mario_itemRed02にgrid-areaのr02を指定。....bl_mario_itemRed21にgrid-areaのr21を指定。(itemGre,itemYelも同様)これにより親要素で指定していたgrid-template-areasに子要素達が収まり、色がつけられるようになります。if構文になっているところは一桁の時は頭に0を付ける処理です。仕組みとしてはこれだけです補足grid-areaの指定をわざわざ一桁の時に0を付与していることに気付いたと思うのですが、これは親要素のgrid-template-areasを見易くするという意図があります。g21";こんな感じの下半身が太いおじさんになります。表示上では問題無しですがこれでは、結合や位置関係が非常に分かりにくくドット絵を楽しく書けません。grid-areaが100や1000を超えるようなものになった時には、一桁代も合わせて001や0001にする必要があるということです。仕組み編」は終わりです。cssでドット絵を描く方法は理解して頂けたかと思います。実践編」として、実際にドット絵を描く順序に沿って注意点なども紹介出来ればと思います。何かおかしい所やcssドット絵ガチ勢の方がいましたらコメントにてよろしくお願いします。