はじめに
囲碁を実装した際に、CSSを実装する必要がありました。今回はCSSについて書きます。
Canvasを画像に変えたいで、碁石や碁盤の画像が用意できました。この画像を適当に並べれば、碁盤を表現できると期待したのですが、適当に画像を並べただけでは、画像と画像の間にすきまができてしまいます。
このすきまをなくすCSSについて書きます。
すきまをなくす
まず、ここでは次のようなHTMLを想定します。
GO.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/board.css" media="all">
</head>
<body>
<title>GO</title>
<table id="board">
<tr>
<td><img src="images/upper-left.png"></td>
<td><img src="images/upper.png"></td>
<td><img src="images/upper.png"></td>
<td><img src="images/upper.png"></td>
<td><img src="images/upper-right.png"></td>
</tr>
<tr>
<td><img src="images/left.png"></td>
<td><img src="images/cross.png"></td>
<td><img src="images/cross.png"></td>
<td><img src="images/cross.png"></td>
<td><img src="images/right.png"></td>
</tr>
<tr>
<td><img src="images/left.png"></td>
<td><img src="images/cross.png"></td>
<td><img src="images/cross.png"></td>
<td><img src="images/cross.png"></td>
<td><img src="images/right.png"></td>
</tr>
<tr>
<td><img src="images/left.png"></td>
<td><img src="images/cross.png"></td>
<td><img src="images/cross.png"></td>
<td><img src="images/cross.png"></td>
<td><img src="images/right.png"></td>
</tr>
<tr>
<td><img src="images/left.png"></td>
<td><img src="images/cross.png"></td>
<td><img src="images/cross.png"></td>
<td><img src="images/cross.png"></td>
<td><img src="images/right.png"></td>
</tr>
<tr>
<td><img src="images/under-left.png"></td>
<td><img src="images/under.png"></td>
<td><img src="images/under.png"></td>
<td><img src="images/under.png"></td>
<td><img src="images/under-right.png"></td>
</tr>
</table>
</body>
</html>
このHTMLに対して次のようなCSSを用意します。
board.css
table {
border-collapse: collapse;
}
td {
padding: 0px;
}
img {
vertical-align: bottom;
}
このようにCSSを実装すると画像と画像の間のすきまをなくすことができました。ソースコードはgoにありますので、興味のあるかたはダウンロードしてお試しいただければと思います。オフラインで動きます。
実は
実は、この問題を自力で解決することはむずかしそうだったので、@conscellさんに相談しました。そのときに知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つを紹介していただきました。