約1分29秒1003ピクセルアート(ドット絵)は高解像度の画像が使えるようになって失われつつある表現手法ですが、同時に愛着を持ってしまう方も少なくないはず。ピクセルアートのつくり方かなりシンプルで、HTMLとCSSが使えれば簡単に作ることができます。そんなピクセルアートでの遊び方を解説した記事がありましたので、ご紹介しましょう。グリッドを作るなによりも始めに、ピクセルアートではカンバスとなるグリッド(網目)が必要です。このグリッドを作る方法はいろいろありますが、スタンダードな作り方のひとつとしてHTMLのtableタグを使うやり方があります。8行×8列のグリッド(8bit)を作るとして、それぞれのセルを10pxにするなら全体としては80px×80pxのグリッドを用意します。CodePen.単純に解像度を8bit→16bitに上げたいならセルの数を倍にすればOKです。ペイント開始ピクセルアートの最も肝心なところは、各セルに色をつけていく工程です。グリッドの中の特定のセルに色づけるために、ここでは「nth-child」を使っています。ご想像の通り、この工程はセル数の多さによってかかる時間が増減します。上図の「ピカチュウ」のピクセルアートには合計1,920のセルと300以上の子要素が使われています。CodePen.ここではシンプルなサンプルをご紹介します。少ないセル数に4色のみ使ったサンプルが上です。ちなみに、上の「ピカチュウ」のHTMLとCSSはこんな感じです。Art」を参考にしています。コードを追加する』で「JP20gd6nv7」を入れてください。※1000円分無料で頼めます。