画像なしドット絵

画像なしドット絵とは、画像を使わないドット絵である。

概要

本来コンピュータ上においては、PNGやJPGといった画像ファイルを配置・展開することで図像を画面上に表現するが、そうした画像ファイルを用いずに絵図を表示しようという試みが画像なしドット絵である。

例えば、ウェブであればHTMLのtableタグなどを使用してドット絵を描く。その場合、tableによる表がドット絵のキャンバスで各セルがドットというわけである。CSSではbox-shadowなどのプロパティを用いることで、HTMLタグを消費せずにドット絵を作ることもできる^[1]が、ニコニコ大百科ではbox-shadowの複数指定に対応していないため使うことができない。

これらの利点としては、画像と違ってボヤけたりせず、また後からの部分的な編集が可能である点が挙げられる。しかし、先述の理由からニコニコ大百科においては解像度が上がれば上がるほど容量が肥大化するという難点もあり、編集画面も重くなりがち。2022年2月28日時点のニコニコ大百科の記事サイズランキングでは最上位3位を画像なしドット絵の用いられた記事が占めている。

例

枠有20px

「width: 10px; height: 10px;」を指定しているが、大百科のCSSにて padding: 5px; が効いているため合計で20pxとなる。

<table style="line-height: 10px;">
<tbody>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffc07b;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #f7461c;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #9e8318;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
<td style="width: 10px; height: 10px; background-color: #ffffff;"></td>
</tr>
</tbody>
</table>

枠無1px

「width: 1px; height: 1px;」を指定し、大百科のCSSにて指定されている padding: 5px; を解除したもの。

<table style="line-height: 1px;">
<tbody>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffc07b;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #f7461c;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
<tr>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #9e8318;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
<td style="width: 1px; height: 1px; border: none; padding: 0; background-color: #ffffff;"></td>
</tr>
</tbody>
</table>

備考

以上の例では背景色 background-color: #ffffff; を逐一指定しているが、これはtableやtbodyといった要素の部分で指定してしまえば省略できる。また、widthは最上部のtd1行、heightは行ごとのtr一点で指定するだけでよい。

ニコニコ大百科で画像なしドット絵を使用している記事

• 暁月(crossbeats rev.)
• エクスデス ※過去リビジョン。現在は画像に差し替え。
• 小沢純子
• 燦(crossbeats rev.)
• レイシス(SOUND VOLTEX)

関連項目

• HTML
• ドット絵
• ネ申Excel

脚注

1. *本気でCSS芸やりたい人のためのbox-shadow講座