■

http://www.optimagraphics.org/dannna_o/blog/2011/09/17156/

ちょっと必要なのでむかし作ったチャートを再掲。HTMLで書いているから各ブロックの境界に圧縮ノイズはなく、ノイズ故に境界が見えてしまうというインチキはない

http://www.optimagraphics.org/dannna_o/blog/2011/09/17157/

<div title=”80″ style=”display:box; width:600px; height:600px; background-color:rgb(80,80,80); ” >
<table cellspacing=”0″ cellpadding=”0″ style=”border:none; font-size:12px; position:relative; top:240px; margin:auto; ” >

<tr style=”text-align:center;”>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none;”>A</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>B</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>C</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>D</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>E</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>F</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>G</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>H</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>I</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>J</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>K</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>L</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>M</td>
</tr>

<tr style=”text-align:center; “>
<td title=”255″ style=”width:30px; height:30px; background-color:rgb(255,255,255); color:rgb(10,10,10); border:none; “> </td>
<td title=”245″ style=”width:30px; height:30px; background-color:rgb(245,245,245); color:rgb(10,10,10); border:none; “> </td>
<td title=”235″ style=”width:30px; height:30px; background-color:rgb(235,235,235); color:rgb(10,10,10); border:none; “> </td>
<td title=”225″ style=”width:30px; height:30px; background-color:rgb(225,225,225); color:rgb(10,10,10); border:none; “> </td>
<td title=”215″ style=”width:30px; height:30px; background-color:rgb(215,215,215); color:rgb(10,10,10); border:none;”> </td>
<td title=”205″ style=”width:30px; height:30px; background-color:rgb(205,205,205); color:rgb(10,10,10); border:none;”> </td>
<td title=”195″ style=”width:30px; height:30px; background-color:rgb(195,195,195); color:rgb(10,10,10); border:none; “> </td>
<td title=”185″ style=”width:30px; height:30px; background-color:rgb(185,185,185); color:rgb(10,10,10); border:none; “> </td>
<td title=”175″ style=”width:30px; height:30px; background-color:rgb(175,175,175); color:rgb(10,10,10); border:none; “> </td>
<td title=”165″ style=”width:30px; height:30px; background-color:rgb(165,165,165); color:rgb(10,10,10); border:none; “> </td>
<td title=”155″ style=”width:30px; height:30px; background-color:rgb(155,155,155); color:rgb(10,10,10); border:none; “> </td>
<td title=”145″ style=”width:30px; height:30px; background-color:rgb(145,145,145); color:rgb(10,10,10); border:none; “> </td>
<td title=”135″ style=”width:30px; height:30px; background-color:rgb(135,135,135); color:rgb(10,10,10); border:none; “> </td>
</tr>
<tr style=”text-align:center; “>
<td title=”125″ style=”width:30px; height:30px; background-color:rgb(125,125,125); color:rgb(245,245,245); border:none; “> </td>
<td title=”115″ style=”width:30px; height:30px; background-color:rgb(115,115,115); color:rgb(245,245,245); border:none; “> </td>
<td title=”105″ style=”width:30px; height:30px; background-color:rgb(105,105,105); color:rgb(245,245,245); border:none; “> </td>
<td title=”95″ style=”width:30px; height:30px; background-color:rgb(95,95,95); color:rgb(245,245,245); border:none; “> </td>
<td title=”85″ style=”width:30px; height:30px; background-color:rgb(85,85,85); color:rgb(245,245,245); border:none; “> </td>
<td title=”75″ style=”width:30px; height:30px; background-color:rgb(75,75,75); color:rgb(245,245,245); border:none; “> </td>
<td title=”65″ style=”width:30px; height:30px; background-color:rgb(65,65,65); color:rgb(245,245,245); border:none; “> </td>
<td title=”55″ style=”width:30px; height:30px; background-color:rgb(55,55,55); color:rgb(245,245,245); border:none; “> </td>
<td title=”45″ style=”width:30px; height:30px; background-color:rgb(45,45,45); color:rgb(245,245,245); border:none; “> </td>
<td title=”35″ style=”width:30px; height:30px; background-color:rgb(35,35,35); color:rgb(245,245,245); border:none; “> </td>
<td title=”25″ style=”width:30px; height:30px; background-color:rgb(25,25,25); color:rgb(245,245,245); border:none; “> </td>
<td title=”15″ style=”width:30px; height:30px; background-color:rgb(15,15,15); color:rgb(245,245,245); border:none; “> </td>
<td title=”5″ style=”width:30px; height:30px; background-color:rgb(5,5,5); color:rgb(245,245,245); border:none; “> </td>
</tr>

<tr style=”text-align:center;”>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>N</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>O</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>P</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>Q</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>R</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>S</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>T</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>U</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>V</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>W</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>X</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>Y</td>
<td style=”width:30px; height:30px; color:rgb(10,10,10); border:none; “>Z</td>
</tr>

</table>
</div>