ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

ぴったりくっつけたい!-画像編

画像と画像がぴったりくっつかない!という疑問を解決。くっつかない理由もしっかりご紹介。原因を知れば2度と問題は起こらないでしょう。実はソースの書き方1点だけが問題なのです…

この記事の担当ガイド

Web作成が楽しくなるお手伝い。分かりやすい解説を探求するWeb職人

  • このエントリーをはてなブックマークに追加

画像と画像をぴったりくっつけたい!

HTMLを編集していると、「なぜ、ぴったりくっつかないのか?」と疑問に感じる場面がたまにあります。例えば、画像と画像がくっつかなかったり、フォームと文字がくっつかなかったり……。
今回は、画像と画像をぴったりくっつける方法について、くっつかない理由とともにご紹介いたします。

画像が横にぴったりくっつかない!

2つの画像を横に並べたとき、ちょっとだけ隙間が空いてしまうことがあります。 これはなぜでしょうか? また、どうすれば、ぴったりくっついてくれるのでしょうか?
まずは、下記の2つの例を見てみて下さい。

ぴったりくっつかない例
All About Japan LOGO

ぴったりくっつく例
All About JapanLOGO

両者とも、何も特殊な作り方はしていません。HTMLソース中で、2つのimg要素(=<IMG>タグ)を並べて書いているだけです。
では、なぜ両者で表示のされ方が異なるのでしょうか?
それは、タグの並べ方が異なるのです。以下に両者のソースを示します。

■原因

ぴったりくっつかない場合のソース:

<IMG SRC="img1.jpg" WIDTH="150" HEIGHT="150">
<IMG SRC="img2.jpg" WIDTH="150" HEIGHT="150">

ぴったりくっつく場合のソース:

<IMG SRC="img1.jpg" WIDTH="150" HEIGHT="150"><IMG SRC="img2.jpg" WIDTH="150" HEIGHT="150">

何が異なるのかお分かりでしょうか?
記述している文字は全く同一です。ただ、2つのタグの間に改行が入っているかいないかだけが異なるのです。
なぜ、改行1つで見え方が異なってしまうのでしょうか?

■理由

HTMLでは、『「改行・タブ・(半角)スペース」の文字は無視される』と考えていないでしょうか? それは、少し誤っています。
実際には、HTMLでは「改行・タブ・(半角)スペース」の文字は、「いくつ連続していても1つのスペース」として解釈されます。

ですから、先ほどの例のように「ソース中に改行がある」と、それは「1つの半角スペース」として解釈されます。その結果、画像と画像の間に「半角スペース1つ分の空間」ができてしまうわけです。
それを防ぐには、後者の例のように、タグとタグの間に改行を入れない(=改行しない)ようにすることです。

画像が縦にぴったりくっつかない!

さて、画像を横にぴったりくっつける問題は解決しましたね。では、縦にくっつけたい場合はどうでしょうか?

次のページへ続きます →

更新日:2002年02月28日

あわせて読みたい

    この記事を読んで良かったですか?

    良かった

    2

    この記事を共有する