デザイン

デザイン

これはハマる!?ピクセルアート(ドット絵)をHTMLとCSSのみで描く方法

10,162 views

読了時間 : 約1分29秒

ピクセルアート(ドット絵)は高解像度の画像が使えるようになって失われつつある表現手法ですが、同時に愛着を持ってしまう方も少なくないはず。

 

でもピクセルアートのつくり方かなりシンプルで、HTMLとCSSが使えれば簡単に作ることができます。そんなピクセルアートでの遊び方を解説した記事がありましたので、ご紹介しましょう。

 

 

グリッドを作る

 

なによりも始めに、ピクセルアートではカンバスとなるグリッド(網目)が必要です。このグリッドを作る方法はいろいろありますが、スタンダードな作り方のひとつとしてHTMLのtableタグを使うやり方があります。

 

もし8行×8列のグリッド(8bit)を作るとして、それぞれのセルを10pxにするなら全体としては80px×80pxのグリッドを用意します。

See the Pen CSS Pixels – Table Grid Example by Geoff Graham (@geoffgraham) on CodePen.

 

単純に解像度を8bit→16bitに上げたいならセルの数を倍にすればOKです。

 

 

ペイント開始

 

ピクセルアートの最も肝心なところは、各セルに色をつけていく工程です。グリッドの中の特定のセルに色づけるために、ここでは「nth-child」を使っています。


ご想像の通り、この工程はセル数の多さによってかかる時間が増減します。例えば上図の「ピカチュウ」のピクセルアートには合計1,920のセルと300以上の子要素が使われています。

 

 

シンプルなサンプル

 

See the Pen CSS Pixels – Self Portrait by Geoff Graham (@geoffgraham) on CodePen.

ここではシンプルなサンプルをご紹介します。少ないセル数に4色のみ使ったサンプルが上です。

 

ちなみに、上の「ピカチュウ」のHTMLとCSSはこんな感じです。

 

See the Pen CSS Pixels – Table Grid Example by Geoff Graham (@geoffgraham) on CodePen.

 

ピクセルアートにご興味を持たれた方は、ぜひチャンレンジしてみてください!

 

 

(※本稿は「Fun Times With CSS Pixel Art」を参考にしています。)

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ