CSS | 簡単なドット絵を作成する方法

2020-10-01CSS,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;
}

2020-10-01CSS,CSS デザイン

Posted by Yousuke.U