ドット絵（ピクセルアート）は1980年代ごろのパソコンやゲーム機で、最もよく使われた画像の表現方法でしたが、パソコン等の高解像度化にともなって、ドット絵を使われることはほとんどなくなりました。
以前は解像度が低かったため、写真や画像を今のようにきれいに表示することができなかったので、ドットで描画することが主流でした。目で見てピクセルだと分かる範囲がドット絵と呼ぶそうです。
今だからこそ逆に斬新、かわいいと思うこともあるのですが、せっかくなのでドット絵をCSSだけで描画したいと思います。
もちろん、こんなチョコボを描くことも余裕でできます。
ドット絵に使うCSS
HTMLやCSSを使って描く表現方法はさまざま考えられますが、今回は「box-shadow」のみで描いていきたいと思います。box-shadowでドットを描く
HTML
<div></div>
まずHTMLには空のdivを用意してあげます。これだけでHTMLは完成です。
CSS
div {
background: transparent;
width: 10px;
height: 10px;
box-shadow:
0 10px red,
10px 20px blue,
20px 10px green;
}
CSSは基点＜（0, 0）の場所＞をtransparent（透明）とし、基本となるドットの大きさを縦、横ともに10pxずつと設定します。
そのときに、基点から下へ10pxの箇所に赤いドットを、右へ10px、下へ20pxの箇所に青いドットを、右へ20px、下へ10pxの箇所に緑のドットを描画します。
↓↓↓こんな感じで表示されます
本来box-shadow（ボックスシャドウ）は指定した要素に立体っぽく影をつけるCSSなのですが、ぼかし具合を入力しないことでゼロ、つまりただの直線として認識されます。
ざくざく作っていこう
こんな感じで、ドット絵を書いていくには元画像を準備し、ピクセル単位で描画していきます。
チョコボを描く（HTML）
<div id="chocobo"></div>
チョコボを描く（CSS）
#chocobo {
background: transparent;
width: 10px;
height: 10px;
box-shadow:
60px 0 #181010,
70px 0 #181010,
80px 0 #181010,
40px 10px #181010,
50px 10px #181010,
60px 10px #c08800,
70px 10px #f8f800,
80px 10px #e3b600,
90px 10px #181010,
100px 10px #181010,
30px 20px #181010,
40px 20px #f8f800,
50px 20px #f8f800,
60px 20px #f8f800,
70px 20px #f8f800,
80px 20px #f8f800,
90px 20px #f8f800,
100px 20px #e3b600,
110px 20px #181010,
20px 30px #181010,
30px 30px #e3b600,
40px 30px #f8f8f8,
50px 30px #c08800,
60px 30px #e3b600,
70px 30px #f8f800,
80px 30px #f8f800,
90px 30px #c08800,
100px 30px #181010,
10px 40px #181010,
20px 40px #181010,
30px 40px #f8f800,
40px 40px #1838d8,
50px 40px #f8f8f8,
60px 40px #c08800,
70px 40px #f8f800,
80px 40px #c08800,
90px 40px #181010,
0 50px #181010,
10px 50px #e88048,
20px 50px #e88048,
30px 50px #c08800,
40px 50px #1838d8,
50px 50px #f8f8f8,
60px 50px #e3b600,
70px 50px #f8f800,
80px 50px #f8f800,
90px 50px #e3b600,
100px 50px #181010,
0 60px #181010,
10px 60px #f8d294,
20px 60px #e88048,
30px 60px #b95b29,
40px 60px #e3b600,
50px 60px #e3b600,
60px 60px #f8f800,
70px 60px #e3b600,
80px 60px #c08800,
90px 60px #181010,
120px 60px #181010,
130px 60px #181010,
140px 60px #181010,
0 70px #181010,
10px 70px #e88048,
20px 70px #181010,
30px 70px #181010,
40px 70px #181010,
50px 70px #181010,
60px 70px #c08800,
70px 70px #c08800,
80px 70px #181010,
110px 70px #181010,
120px 70px #f8f800,
130px 70px #f8f800,
140px 70px #f8f800,
150px 70px #181010,
10px 80px #181010,
40px 80px #181010,
50px 80px #f8f800,
60px 80px #e3b600,
70px 80px #c08800,
80px 80px #181010,
100px 80px #181010,
110px 80px #f8f800,
120px 80px #e3b600,
130px 80px #181010,
140px 80px #181010,
30px 90px #181010,
40px 90px #f8f800,
50px 90px #f8f800,
60px 90px #f8f800,
70px 90px #f8f800,
80px 90px #e3b600,
90px 90px #181010,
100px 90px #181010,
110px 90px #f8f800,
120px 90px #c08800,
130px 90px #f8f800,
140px 90px #e3b600,
150px 90px #181010,
20px 100px #181010,
30px 100px #e3b600,
40px 100px #f8f800,
50px 100px #e3b600,
60px 100px #f8f800,
70px 100px #f8f800,
80px 100px #f8f800,
90px 100px #f8f800,
100px 100px #c08800,
110px 100px #c08800,
120px 100px #e3b600,
130px 100px #c08800,
140px 100px #181010,
20px 110px #181010,
30px 110px #f8f800,
40px 110px #f8f800,
50px 110px #c08800,
60px 110px #f8f800,
70px 110px #e3b600,
80px 110px #c08800,
90px 110px #f8f800,
100px 110px #f8f800,
110px 110px #a05800,
120px 110px #181010,
130px 110px #181010,
20px 120px #181010,
30px 120px #c08800,
40px 120px #f8f800,
50px 120px #a05800,
60px 120px #c08800,
70px 120px #f8f800,
80px 120px #e3b600,
90px 120px #a05800,
100px 120px #a05800,
110px 120px #181010,
30px 130px #181010,
40px 130px #c08800,
50px 130px #c08800,
60px 130px #a05800,
70px 130px #a05800,
80px 130px #a05800,
90px 130px #c08800,
100px 130px #181010,
40px 140px #181010,
50px 140px #181010,
60px 140px #181010,
70px 140px #704020,
80px 140px #181010,
90px 140px #181010,
70px 150px #181010,
80px 150px #a05800,
90px 150px #181010,
60px 160px #181010,
70px 160px #181010,
80px 160px #a05800,
90px 160px #a05800,
100px 160px #181010,
20px 170px #181010,
30px 170px #181010,
40px 170px #181010,
50px 170px #181010,
70px 170px #a05800,
80px 170px #704020,
90px 170px #181010,
100px 170px #181010,
110px 170px #181010,
120px 170px #181010,
130px 170px #181010;
}
▼こんな感じ
マリオも描いてみた
マリオを描く（HTML）
<div id="mario"></div>
マリオを描く（CSS）
#mario {
background: transparent;
width: 10px;
height: 10px;
box-shadow:
30px 0 #dc2900,
40px 0 #dc2900,
50px 0 #dc2900,
60px 0 #dc2900,
70px 0 #dc2900,
20px 10px #dc2900,
30px 10px #dc2900,
40px 10px #dc2900,
50px 10px #dc2900,
60px 10px #dc2900,
70px 10px #dc2900,
80px 10px #dc2900,
90px 10px #dc2900,
100px 10px #dc2900,
20px 20px #8a7301,
30px 20px #8a7301,
40px 20px #8a7301,
50px 20px #ffa53c,
60px 20px #ffa53c,
70px 20px #8a7301,
80px 20px #ffa53c,
10px 30px #8a7301,
20px 30px #ffa53c,
30px 30px #8a7301,
40px 30px #ffa53c,
50px 30px #ffa53c,
60px 30px #ffa53c,
70px 30px #8a7301,
80px 30px #ffa53c,
90px 30px #ffa53c,
100px 30px #ffa53c,
10px 40px #8a7301,
20px 40px #ffa53c,
30px 40px #8a7301,
40px 40px #8a7301,
50px 40px #ffa53c,
60px 40px #ffa53c,
70px 40px #ffa53c,
80px 40px #8a7301,
90px 40px #ffa53c,
100px 40px #ffa53c,
110px 40px #ffa53c,
10px 50px #8a7301,
20px 50px #8a7301,
30px 50px #ffa53c,
40px 50px #ffa53c,
50px 50px #ffa53c,
60px 50px #ffa53c,
70px 50px #8a7301,
80px 50px #8a7301,
90px 50px #8a7301,
100px 50px #8a7301,
30px 60px #ffa53c,
40px 60px #ffa53c,
50px 60px #ffa53c,
60px 60px #ffa53c,
70px 60px #ffa53c,
80px 60px #ffa53c,
90px 60px #ffa53c,
20px 70px #8a7301,
30px 70px #8a7301,
40px 70px #dc2900,
50px 70px #8a7301,
60px 70px #8a7301,
70px 70px #8a7301,
10px 80px #8a7301,
20px 80px #8a7301,
30px 80px #8a7301,
40px 80px #dc2900,
50px 80px #8a7301,
60px 80px #8a7301,
70px 80px #dc2900,
80px 80px #8a7301,
90px 80px #8a7301,
100px 80px #8a7301,
0 90px #8a7301,
10px 90px #8a7301,
20px 90px #8a7301,
30px 90px #8a7301,
40px 90px #dc2900,
50px 90px #dc2900,
60px 90px #dc2900,
70px 90px #dc2900,
80px 90px #8a7301,
90px 90px #8a7301,
100px 90px #8a7301,
110px 90px #8a7301,
0 100px #ffa53c,
10px 100px #ffa53c,
20px 100px #8a7301,
30px 100px #dc2900,
40px 100px #ffa53c,
50px 100px #dc2900,
60px 100px #dc2900,
70px 100px #ffa53c,
80px 100px #8a7301,
90px 100px #dc2900,
100px 100px #ffa53c,
110px 100px #ffa53c,
0 110px #ffa53c,
10px 110px #ffa53c,
20px 110px #ffa53c,
30px 110px #dc2900,
40px 110px #dc2900,
50px 110px #dc2900,
60px 110px #dc2900,
70px 110px #dc2900,
80px 110px #dc2900,
90px 110px #ffa53c,
100px 110px #ffa53c,
110px 110px #ffa53c,
0 120px #ffa53c,
10px 120px #ffa53c,
20px 120px #dc2900,
30px 120px #dc2900,
40px 120px #dc2900,
50px 120px #dc2900,
60px 120px #dc2900,
70px 120px #dc2900,
80px 120px #dc2900,
90px 120px #dc2900,
100px 120px #ffa53c,
110px 120px #ffa53c,
20px 130px #dc2900,
30px 130px #dc2900,
40px 130px #dc2900,
70px 130px #dc2900,
80px 130px #dc2900,
90px 130px #dc2900,
10px 140px #8a7301,
20px 140px #8a7301,
30px 140px #8a7301,
80px 140px #8a7301,
90px 140px #8a7301,
100px 140px #8a7301,
0 150px #8a7301,
10px 150px #8a7301,
20px 150px #8a7301,
30px 150px #8a7301,
80px 150px #8a7301,
90px 150px #8a7301,
100px 150px #8a7301,
110px 150px #8a7301;
}
▼マリオもいい感じ
アイコンにもおすすめ
ハートのアイコンを描く（HTML）
<div id="heart"></div>
ハートのアイコンを描く（CSS）
#heart {
background: transparent;
width: 10px;
height: 10px;
box-shadow:
20px 0 #cc0000,
30px 0 #cc0000,
70px 0 #cc0000,
80px 0 #cc0000,
10px 10px #cc0000,
20px 10px #ff6038,
30px 10px #ff6038,
40px 10px #cc0000,
60px 10px #cc0000,
70px 10px #ff6038,
80px 10px #ff6038,
90px 10px #cc0000,
0 20px #cc0000,
10px 20px #ff3300,
20px 20px #ff3300,
30px 20px #ff3300,
40px 20px #ff6038,
50px 20px #cc0000,
60px 20px #ff3300,
70px 20px #ff6038,
80px 20px #ff3300,
90px 20px #ff3300,
100px 20px #cc0000,
0 30px #cc0000,
10px 30px #ff3300,
20px 30px #ff3300,
30px 30px #ff3300,
40px 30px #ff6038,
50px 30px #ff6038,
60px 30px #ff3300,
70px 30px #ff3300,
80px 30px #ff3300,
90px 30px #ff3300,
100px 30px #cc0000,
0 40px #cc0000,
10px 40px #ff3300,
20px 40px #ff3300,
30px 40px #ff3300,
40px 40px #ff3300,
50px 40px #ff3300,
60px 40px #ff3300,
70px 40px #ff3300,
80px 40px #ff3300,
90px 40px #ff3300,
100px 40px #cc0000,
10px 50px #cc0000,
20px 50px #ff3300,
30px 50px #ff3300,
40px 50px #ff3300,
50px 50px #ff3300,
60px 50px #ff3300,
70px 50px #ff3300,
80px 50px #ff3300,
90px 50px #cc0000,
20px 60px #cc0000,
30px 60px #ff3300,
40px 60px #ff3300,
50px 60px #ff3300,
60px 60px #ff3300,
70px 60px #ff3300,
80px 60px #cc0000,
30px 70px #cc0000,
40px 70px #ff3300,
50px 70px #ff3300,
60px 70px #ff3300,
70px 70px #cc0000,
40px 80px #cc0000,
50px 80px #ff3300,
60px 80px #cc0000,
50px 90px #cc0000;
}
▼アイコンかわいい
今回作ったサンプルはこちらからも確認できます
Written by Creative Flake
コメント
コメントを投稿