画像タグについて

質問

画像タグについて

テキストエディタにHTML（タグ）を入力してホームページの作成を目指して勉強しています。

ボタンの画像を横一列で4つ並べる場合のでタグの入力の仕方なんですが、
使用しているテキストでは改行せずに横に並べてタグを入力していきましょう。
となっています。

正解→<img src="A" ><img src="B" ><img src="C" ><img src="D" >
不正解↓
<img src="A" >
<img src="B" >
<img src="C" >
<img src="D" >

理由としてはブラウザできれいに表示されるからだそうです。
実際にやってみると確かに不正解パターンより正解パターンの方がブラウザで隙間なくきれいに表示されています。

疑問なのですが、同じタグを縦で入力するか横に入力するかで
なぜ、ブラウザの表示に違いで出るのでしょうか？
また、<img src="" >タグ以外でも,改行しないで横に入力するタグはあるのでしょうか？
それはどうやって見分けるのでしょうか？
よろしくお願いいたします。

回答No.4

metametamu · ベストアンサー

例えばこの記述を例にとると

<img src="A" >
<img src="B" >
<img src="C" >
<img src="D" >

img要素はインライン要素なので、隣接する文字には実は見えない匿名インラインボックスというものが生成されます。
この匿名インラインボックスを視覚化してみると・・・

<img src="A" >【匿名インラインボックス】改行【/匿名インラインボックス】<img src="B" >【匿名インラインボックス】改行【/匿名インラインボックス】<img src="C" >【匿名インラインボックス】改行【/匿名インラインボックス】<img src="D" >

こんな感じになります。
そしてこの匿名インラインボックス内では連続した複数の改行やスペースは一つの半角スペースに置き換えられてしまいます。これが余白の原因です。
改行しないで記述する場合だとこの匿名インラインボックスが発生しないために余白が表示されず、結果として表示結果が変わってくるということです。

例えば見やすく改行したい場合には・・・

<img src="A"
><img src="B"
><img src="C"
><img src="D" >

こんな感じにタグの途中で改行して書いたり、

<img src="A" ><!--
--><img src="B" ><!--
--><img src="C" ><!--
--><img src="D" >

コメントアウトで隙間を埋めたりして書いたりすることができます。

補足

ご回答ありがとうございます。追記で「匿名インラインボックス」について質問させてください。

＞img要素はインライン要素なので、隣接する文字には実は見えない匿名インラインボックスというものが生成されます。
＞そしてこの匿名インラインボックス内では連続した複数の改行やスペースは一つの半角スペースに置き換えられてしまいます。これが余白の原因です。

Q匿名インラインボックスとはインライン要素タグを入力した後、「改行・半角スペースを入力することで」発生するものなのでしょうか？それとも、インライン要素のタグを入力したと「同時に」発生するものでしょうか？

ネットで匿名インラインボックスについて検索してみたのですが、なかなか理解できるページが見つからず、
苦戦しております。
お返事頂けましたら、幸いです。

回答No.7

toast5

ひとつのHTMLページを、ひとつの団地だと思ってください。
団地は「フロア」をタテに積むことでできています。
「部屋」は各フロア内にヨコに並んでいます。
「フロア」なしにいきなり「部屋」を置くことはできません。
「部屋」は必ず「フロア」内にあります。

フロアが「ブロックレベル要素」。
部屋が「インライン要素」。

＞それはどうやって見分けるのでしょうか？

こういう疑問もそうですが、
無理に理解しなくても、やってれば自然に理解できます。

お礼

>こういう疑問もそうですが、
無理に理解しなくても、やってれば自然に理解できます。
そういうものなのですね…

＞フロアが「ブロックレベル要素」。
部屋が「インライン要素」。
簡単にご説明頂きましたおかげで楽な気持になりました！

ご回答ありがとうございました！

回答No.6

metametamu

＞匿名インラインボックスとはインライン要素タグを入力した後、「改行・半角スペースを入力することで」発生するものなのでしょうか？

はい。
厳密に言えば普通の文字列でも発生します。

例外として、以下のような時にはp要素内の最初と最後には匿名インラインボックスは生成されません。
これは要素内の始まりと終わりの連続した改行・空白文字は無視されるためです。

<p>
<img src="A" >
<img src="B" >
<img src="C" >
<img src="D" >
</p>

表示結果は

【半角スペース】画像【半角スペース】画像【半角スペース】画像【半角スペース】画像【半角スペース】

とならずに

画像【半角スペース】画像【半角スペース】画像【半角スペース】画像

となります。

＞同じように半角スペースが表示されているのにブラウザでレイアウトが崩れるタグ（今回のようなimgタグ）と崩れないタグがあるんでしょうか？

リファレンスを調べるとだいたいインライン要素かブロック要素と書いてあると思います。
改行すると隙間が空くのはインライン要素です。
http://w3g.jp/xhtml/dic/img

お礼

だいたい理解できました。後は実践あるのみですね。
何度もご回答頂きましてありがとうございました！

回答No.5

JaneDue

HTMLでは、「改行(および半角スペースは、いくつ連続しても)半角スペース 1個分で表示」されます。したがって、img タグの後ろで改行した場合、当然半角スペースが入ります。

可読性で言えば改行した方が見やすいですよね。これは正解|不正解というよりも、スペースを空けたくないところでは改行しない、ということでよいのでは?

(念のため確認したところ IE , FireFox , Safari にて同じく改行はスペースされます)

お礼

＞HTMLでは、「改行(および半角スペースは、いくつ連続しても)半角スペース 1個分で表示」されます。したがって、img タグの後ろで改行した場合、当然半角スペースが入ります。

だとすると、imgタグ以外でも改行した場合半角スペースが表示されているということでしょうか？
そうした場合、同じように半角スペースが表示されているのにブラウザでレイアウトが崩れるタグ（今回のようなimgタグ）と崩れないタグがあるんでしょうか？つかめません…。
奥深いですね。勉強になりました。
ご回答ありがとうございました。

回答No.3

fujillin

どうしても改行をいれたければ

<img src="A" alt=""
><img src="B" alt=""
><img src="C" alt=""
><img src="D" alt="">

とか？

お礼

ご回答ありがとうございました☆
隙間を作らない記述方法があったんですね。
勉強になりました！

回答No.2

mori1115

一番有名なのはモダンコーディング(xhtml)で書いた場合のliタグでしょうか。
IEの場合に隙間が生じます。
---------例-------------------
HTML
<ul>
<li><img src="A" ></li>
<li><img src="B" ></li>
<li><img src="C" ></li>
</ul>

CSS
li {
display:inline;
}
------------------------------

今回の場合、文脈から勝手に判断して誠に失礼なのですがhtmlで書かれていると思われますので説明は割愛させて頂きます。詳細に知りたい場合は、”html li 隙間”で調べればたくさん出てくると思います。

隙間が生じるのはブラウザ（IE)のバグなんです。縦に並べるのが不正解パターンと書かれてますが、不正解ではありません。正しいコーディングです。
ただ、ブラウザ（IE）のバグで隙間ができるだけです。

どのタグがとか覚える必要はないですよ。
覚えておかなければならないのは、

○正しいコーディングをしているのに予期しない隙間ができた。その場合は改行をなくすとなおった○

ということでしょう。このような経験があったことを記憶しておくことが大切です。
そうすれば仮に別のタグで起こった場合も対応できるはずです。
がんばってください。

お礼

ご回答ありがとうございました。

＞どのタグがとか覚える必要はないですよ。
覚えておかなければならないのは、
○正しいコーディングをしているのに予期しない隙間ができた。その場合は改行をなくすとなおった○
ということでしょう。このような経験があったことを記憶しておくことが大切です。
そうすれば仮に別のタグで起こった場合も対応できるはずです

「html li 隙間」で検索してみるとたくさんの検索結果が出ました。
「ぶち当たったら調べる」なるほど！
インライン要素について全然つかめていませんが、前に進めそうです。
ありがとうございました。

回答No.1

torayoshi

画像を横に並べた場合、img要素をスペースで改行を入れると、
画像の周り(右と下)に余白が生じるからだと思います。
これは他の要素などと併用したりすると、意図したレイアウトにならないなどの弊害を生んだりします。

>> また、<img src="">タグ以外で～
インライン要素のほとんどそうではないですか？

お礼

「インライン要素」という言葉を初めて聞きました！
ネットで検索してみたのですが、なかなかつかめません。
インライン要素というのは結構たくさんあるんですね…
少しずつ勉強したいと思います。
ご回答ありがとうございました☆