1byteの隙間を埋める HTML の書き方（※書きかけ）

HTML を書くときに、テキストや画像の間に予期しない隙間が発生した、なんて経験はありませんか？

「予期しない隙間」だけでは分かりにくいでしょうから、ちょっとだけ例を出してみましょう。（※閲覧例に IE 6 のスクリーンショットを出しているのは、シェアの大きさと見た目のわかりやすさを優先させた結果です。Firefox や Opera、Safari などでも、大筋で似たような結果が得られます。）

サンプル事例 1: スクリーンショット

閲覧例: 6

• ［上］HTML ソース中に改行文字やタブ文字（インデント）が入ってるテキストを IE 6 で見た時の状態。
• ［下］HTML ソースに細工を施した後で IE 6 で見た状態。

（テキストに "■" を使っているのは隙間が空いてるのを見やすくするため。なお、Firefox では "■" だと禁則処理が効いてしまって上のケースでは改行位置が不揃いに、下のケースでは横一行に表示されます。IE 6 でスクリーンショットを撮ったのはこのためです。(^_^;ゞ ）

サンプル事例 2: スクリーンショット

閲覧例: 6

• ［上］HTML ソース中に改行文字やタブ文字（インデント）が入ってる並列画像を IE 6 で見た時の状態。（※開いてる隙間がわかりやすいように、background-color を赤にしてあります。）
• ［下］HTML ソースに細工を施した後で IE 6 で見た状態。

今日はこの隙間の原因と解決策についての覚え書きです。

サンプル事例 1a: 現物 Webページ（修正前）

■■■■■ ■■■■■■ ■■■ ■■■■■ ■■ ■■■■ ■■■■■ ■■■ ■■■■■■■ ■■■■ ■■■■■ ■■■ ■■■■■ ■■■■■■ ■■■■■ ■■ ■■■■■■■ ■■■

サンプル事例 1a: HTML ソース（修正前）

<blockquote>

<p>■■■■■
■■■■■■
■■■
■■■■■
■■
■■■■
■■■■■
■■■
■■■■■■■
■■■■
■■■■■
■■■
■■■■■
■■■■■■
■■■■■
■■
■■■■■■■
■■■</p>

</blockquote>

↓

サンプル事例 1a: 現物 Webページ（修正案）

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

サンプル事例 1a: HTML ソース（修正案）

<blockquote>

<p>■■■■■<!--
-->■■■■■■<!--
-->■■■<!--
-->■■■■■<!--
-->■■<!--
-->■■■■<!--
-->■■■■■<!--
-->■■■<!--
-->■■■■■■■<!--
-->■■■■<!--
-->■■■■■<!--
-->■■■<!--
-->■■■■■<!--
-->■■■■■■<!--
-->■■■■■<!--
-->■■<!--
-->■■■■■■■<!--
-->■■■</p>

</blockquote>

サンプル事例 1b: 現物 Webページ（修正前）

いろはにほへとちりぬるをわかよたれそにつ ねならむうゐのおくやまけふこえてあさきゆ めみしゑひもせす○いろはにほへとちりぬる をわかよたれそにつねならむうゐのおくやま けふこえてあさきゆめみしゑひもせす○いろ はにほへとちりぬるをわかよたれそにつねな らむうゐのおくやまけふこえてあさきゆめみ しゑひもせす○いろはにほへとちりぬるをわ かよたれそにつねならむうゐのおくやまけふ こえてあさきゆめみしゑひもせす○

↓

サンプル事例 1b: HTML ソース（修正後）

いろはにほへとちりぬるをわかよたれそにつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす○いろはにほへとちりぬるをわかよたれそにつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす○いろはにほへとちりぬるをわかよたれそにつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす○いろはにほへとちりぬるをわかよたれそにつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす○

サンプル事例 2: 現物 Webページ（修正前）

サンプル事例 2: HTML ソース（修正前）

<table>

<tbody>

<tr>

<td>

<img src="http://my-chunqiu.cocolog-nifty.com/images/map01.png" alt="map01.png（左上）" />
<img src="http://my-chunqiu.cocolog-nifty.com/images/map02.png" alt="map02.png（右上）" />

</td>

</tr> <tr>

<td>

<img src="http://my-chunqiu.cocolog-nifty.com/images/map03.png" alt="map03.png（左下）"/>
<img src="http://my-chunqiu.cocolog-nifty.com/images/map04.png" alt="map04.png（右下）"/>

</td>

</tr>

</tbody>

</table>

サンプル事例 2: 現物 Webページ（修正後）

サンプル事例 2: HTML ソース（修正案 1）

<table><tbody><tr><td><img src="http://my-chunqiu.cocolog-nifty.com/images/map01.png" alt="map01.png（左上）" /><img src="http://my-chunqiu.cocolog-nifty.com/images/map02.png" alt="map02.png（右上）" /></td></tr><tr><td><img src="http://my-chunqiu.cocolog-nifty.com/images/map03.png" alt="map03.png（左下）" /><img src="http://my-chunqiu.cocolog-nifty.com/images/map04.png" alt="map04.png（右下）" /></td></tr></tbody></table>

サンプル事例 2: HTML ソース（修正案 2）

<table

><tbody

><tr

><td

><img src="http://my-chunqiu.cocolog-nifty.com/images/map01.png" alt="map01.png（左上）"
/><img src="http://my-chunqiu.cocolog-nifty.com/images/map02.png" alt="map02.png（右上）"

/></td

></tr ><tr

><td

><img src="http://my-chunqiu.cocolog-nifty.com/images/map03.png" alt="map03.png（左下）" /
><img src="http://my-chunqiu.cocolog-nifty.com/images/map04.png" alt="map04.png（右下）" /

></td

></tr

></tbody>

</table>