CSSでドット絵を描く方法

CSSでドット絵を描きたい人のために、その仕組を解説しています。
やり方は非常に簡単なので、すぐに覚えられるでしょう。

CSSでドット絵を描く方法

CSSでドット絵を描く方法は非常に簡単で、box-shadowプロパティを使って描きます。

HTMLマークアップ

例えば、HTMLを下記のようにマークアップします。

	

ドット絵を描くためのキャンバスを作り、ドット絵にする要素を配置するだけです。

2×2のドット絵

とても簡単な例を見てください。

.dotCanvas {
	width: 200px;	/* キャンバスの大きさ */
	height: 200px;	/* キャンバスの大きさ */
	background: #EEE;	/* キャンバスの背景 */
}

.dotIcon {
	width: 100px;	/* 1ドットの大きさ */
	height: 100px;	/* 1ドットの大きさ */
	background: red;	/* 座標(0,0)の色 */
	box-shadow: 100px 100px #000;	/* 座標(1,1)の位置に黒のドットを描画 */
}

ドット絵の大きさは、.dotCanvaswidthheightで指定します。 キャンバスの領域を分かりやすくするために、background: #EEE;で背景色を指定していますが、本来は必要ありません。

.dotIconwidthheightでは1ドットの大きさを指定します。 今回の例では、分かりやすいように1ドット=100ピクセルにし、背景を赤色にしています。 この赤色の部分をキャンバスの左上の角=座標(0,0)と考えてください。

.dotIconbox-shadowプロパティで(1ドットの大きさ) (1ドットの大きさ) #000;のように値を指定すると、 座標(1,1)の位置に、黒いドットが描かれます。

ドットを打つ(複数の影を指定する)

CSSのbox-shadowプロパティは1つのボックスに複数の影を指定することができます。
複数の影を指定する時は、値をカンマで区切って記述します。

それでは、2×2のキャンバスを黒で塗りつぶしてみましょう。

.dotIcon {
	width: 100px;
	height: 100px;
	background: red;
	box-shadow:
		0px 0px #000,	/* 座標(0,0) */
		0px 100px #000,	/* 座標(0,1) */
		100px 0px #000,	/* 座標(1,0) */
		100px 100px #000	/* 座標(1,1) */
	;
}

ドット絵を描くために必ず覚えておくべきルールが見えてきましたね。

CSSのbox-shadowプロパティは、ボックスに影を設定するために用意されているものなので、座標(0,0)の影はボックス自体に隠れてしまいます。そのため、座標(0,0)の色だけはbackgroundプロパティで設定する必要があります。

15×15のドット絵

最後に、このアイコン( )をCSSで描いてみましょう。

HTMLマークアップ

		

CSSとプレビュー

.dotIconBox {
	width: 15px;
	height: 15px;
}

.dotIcon--close1 {
	width: 1px;
	height: 1px;
	background: #333;
	box-shadow:
		/* 対角線2 */
		1px 13px #333,
		2px 12px #333,
		3px 11px #333,
		4px 10px #333,
		5px 9px #333,
		6px 8px #333,
		8px 6px #333,
		9px 5px #333,
		10px 4px #333,
		11px 3px #333,
		12px 2px #333,
		13px 1px #333,
		/* 対角線1 */
		1px 1px #333,
		2px 2px #333,
		3px 3px #333,
		4px 4px #333,
		5px 5px #333,
		6px 6px #333,
		7px 7px #333,
		8px 8px #333,
		9px 9px #333,
		10px 10px #333,
		11px 11px #333,
		12px 12px #333,
		13px 13px #333,
		/* 左の辺 */
		0 1px #333,
		0 2px #333,
		0 3px #333,
		0 4px #333,
		0 5px #333,
		0 6px #333,
		0 7px #333,
		0 8px #333,
		0 9px #333,
		0 10px #333,
		0 11px #333,
		0 12px #333,
		0 13px #333,
		/* 下の辺 */
		0 14px #333,
		1px 14px #333,
		2px 14px #333,
		3px 14px #333,
		4px 14px #333,
		5px 14px #333,
		6px 14px #333,
		7px 14px #333,
		8px 14px #333,
		9px 14px #333,
		10px 14px #333,
		11px 14px #333,
		12px 14px #333,
		13px 14px #333,
		/* 右の辺 */
		14px 1px #333,
		14px 2px #333,
		14px 3px #333,
		14px 4px #333,
		14px 5px #333,
		14px 6px #333,
		14px 7px #333,
		14px 8px #333,
		14px 9px #333,
		14px 10px #333,
		14px 11px #333,
		14px 12px #333,
		14px 13px #333,
		14px 14px #333,
		/* 上の辺 */
		1px 0 #333,
		2px 0 #333,
		3px 0 #333,
		4px 0 #333,
		5px 0 #333,
		6px 0 #333,
		7px 0 #333,
		8px 0 #333,
		9px 0 #333,
		10px 0 #333,
		11px 0 #333,
		12px 0 #333,
		13px 0 #333,
		14px 0 #333
	;
}

最後に

今回の例はいかがでしたか?

CSSのbox-shadowプロパティを使えば、ドット絵も簡単に描けますね。

今回の例では、divタグを入れ子にしていますが、:before擬似要素や:after擬似要素を使えば、HTMLマークアップはもう少しシンプルなものになります。

よろしければ、CSSでドット絵を描いてみた(はちゅねミク)も合わせてお読みください。

参考:
閉じるアイコン - フリーWEB素材サイト「DOTS DESIGN(ドッツ・デザイン)」
GridNote