CSS | 簡単なドット絵を作成する方法
CSSだけで簡単なドット絵（Pixel Art）を作成する方法の紹介です。
3×3のCSSドット絵サンプル
CSSで作る3×3のシンプルなドット絵サンプルです。
See the Pen Pixel Art 3×3 by yochans (@yochans) on CodePen.
サンプルコード
<div class="pixels"></div>.pixels{
position: relative;
width: 30px;
height: 30px;
background: #000;
}
.pixels::after{
content: "";
/* ドットサイズ */
width: 10px;
height: 10px;
/* 位置（box-shadowは1サイズ下にずれるのでtopを調節）*/
position: absolute;
top: -10px;
left: 0px;
/*ドット部分 */
box-shadow:
/* 1段目 */
0px 10px #A5D6A7, 10px 10px #43A047, 20px 10px #1B5E20,
/* 2段目 */
0px 20px #E57373, 10px 20px #EF5350, 20px 20px #B71C1C,
/* 3段目 */
0px 30px #4FC3F7, 10px 30px #039BE5, 20px 30px #01579B;
}ドットの部分はbox-shadowで作成しております。
1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3
サンプルではpixelsに指定しているwidth、heightがキャンバスサイズと考えています。
1ドットは10px四方で作っていますが、::afterのwidth、heightやbox-shadowのサイズをあわせることでサイズの調節が可能です。
書き換えは面倒なのでtransform:scale()を使ったサイズ調整もやってみたらスグにできると思います。
5×5のCSSドット絵サンプル
5×5のCSSドット絵サンプルです。
2列2段増やしただけで、大変になるのがわかりますが、自由度も高くなります。
このあたりから使う色を選んでおいたり、別でイメージシート的なのを作っておいた方が良いかもですね。
See the Pen Pixel Art 5×5 by yochans (@yochans) on CodePen.
.pixels{
position: relative;
width: 50px;
height: 50px;
background: #000;
}
.pixels::after{
content: "";
/* ドットサイズ */
width: 10px;
height: 10px;
/* 位置（box-shadowは1サイズ下にずれるのでtopを調節）*/
position: absolute;
top: -10px;
left: 0px;
/*ドット部分 */
box-shadow:
/* 1段目 */
0px 10px #4E342E,
10px 10px #4E342E,
20px 10px #4E342E,
30px 10px #4E342E,
40px 10px #4E342E,
/* 2段目 */
0px 20px #4E342E,
10px 20px #FFE0B2,
20px 20px #FFE0B2,
30px 20px #FFE0B2,
40px 20px #4E342E,
/* 3段目 */
0px 30px #FFE0B2,
10px 30px #212121,
20px 30px #FFE0B2,
30px 30px #212121,
40px 30px #FFE0B2,
/* 4段目 */
0px 40px #FFE0B2,
10px 40px #FFE0B2,
20px 40px #FFE0B2,
30px 40px #FFE0B2,
40px 40px #FFE0B2,
/* 5段目 */
0px 50px #FFE0B2,
10px 50px #FFE0B2,
20px 50px #DD2C00,
30px 50px #FFE0B2,
40px 50px #FFE0B2;
}10×10のCSSドット絵サンプル
10×10のCSSドット絵サンプルです。
何かのドット絵を作ろうとして、完全に挫折した感しかないサンプルです。
See the Pen CSS Pixel Art canvas 10×10 by yochans (@yochans) on CodePen.
.pixels{
position: relative;
width: 100px;
height: 100px;
background: #000;
}
.pixels::after{
content: "";
/* ドットサイズ */
width: 10px;
height: 10px;
/* 位置（box-shadowは1サイズ下にずれるのでtopを調節）*/
position: absolute;
top: -10px;
left: 0px;
/*ドット部分 */
box-shadow:
/* 1段目 */
0px 10px #64DD17,
10px 10px #64DD17,
20px 10px #64DD17,
30px 10px #64DD17,
40px 10px #64DD17,
50px 10px #64DD17,
60px 10px #64DD17,
70px 10px #64DD17,
80px 10px #388E3C,
90px 10px #1B5E20,
/* 2段目 */
0px 20px #795548,
10px 20px #795548,
20px 20px #795548,
30px 20px #795548,
40px 20px #795548,
50px 20px #795548,
60px 20px #795548,
70px 20px #795548,
80px 20px #5D4037,
90px 20px #3E2723,
/* 3段目 */
0px 30px #795548,
10px 30px #795548,
20px 30px #FFFF8D,
30px 30px #795548,
40px 30px #795548,
50px 30px #795548,
60px 30px #795548,
70px 30px #FFFF8D,
80px 30px #5D4037,
90px 30px #3E2723,
/* 4段目 */
0px 40px #795548,
10px 40px #795548,
20px 40px #795548,
30px 40px #795548,
40px 40px #795548,
50px 40px #795548,
60px 40px #795548,
70px 40px #795548,
80px 40px #5D4037,
90px 40px #3E2723,
/* 5段目 */
0px 50px #795548,
10px 50px #795548,
20px 50px #795548,
30px 50px #795548,
40px 50px #795548,
50px 50px #795548,
60px 50px #795548,
70px 50px #795548,
80px 50px #5D4037,
90px 50px #3E2723,
/* 6段目 */
0px 60px #795548,
10px 60px #795548,
20px 60px #795548,
30px 60px #795548,
40px 60px #FFFF8D,
50px 60px #795548,
60px 60px #795548,
70px 60px #795548,
80px 60px #5D4037,
90px 60px #3E2723,
/* 7段目 */
0px 70px #795548,
10px 70px #795548,
20px 70px #795548,
30px 70px #795548,
40px 70px #795548,
50px 70px #795548,
60px 70px #795548,
70px 70px #FFFF8D,
80px 70px #5D4037,
90px 70px #3E2723,
/* 8段目 */
0px 80px #795548,
10px 80px #795548,
20px 80px #795548,
30px 80px #795548,
40px 80px #795548,
50px 80px #795548,
60px 80px #795548,
70px 80px #795548,
80px 80px #5D4037,
90px 80px #3E2723,
/* 9段目 */
0px 90px #795548,
10px 90px #795548,
20px 90px #795548,
30px 90px #795548,
40px 90px #795548,
50px 90px #FFFF8D,
60px 90px #795548,
70px 90px #795548,
80px 90px #5D4037,
90px 90px #3E2723,
/* 10段目 */
0px 100px #795548,
10px 100px #795548,
20px 100px #795548,
30px 100px #795548,
40px 100px #795548,
50px 100px #795548,
60px 100px #795548,
70px 100px #795548,
80px 100px #5D4037,
90px 100px #3E2723;
}