ホームページ キッチントップへ
Q&Aマップ | サイトマップ
フリー素材ホームページ HTML レシピホームページの配色ホームページ作成 環境ホームページ作成 ソフト
ホームページ キッチントップへ

-- 見えないスペース(ホワイトスペース)に要注意 --

ホワイトスペースとは、行末記号(改行コード)、や水平タブなどのことをいいます。HTMLを書いているときに、改行を入れたりタブを入れると、半角スペースを入れているのと同じ扱いになります。ピッタリくっつけたい画像の間で改行を入れてしまうと、画像がくっつかない…!という原因になります。


↑image.gifを使って見てみましょう。

IMGタグを書くときの注意点
<img src="image.gif" width="92" height="20">
<img src="image.gif" width="92" height="20">
- - - - - - - - - - - -
上のようにタグの終了直後に改行をしてHTMLソースを書いてしまうと、2つの画像の間に、ホワイトスペースが含まれることになります。
ブラウザによって、ホワイトスペースを無視するか、きちんと表示をするかは違うようです。
Windows IE5.5では、上の書き方では画像はきちんとくっついて並びません。

=> ie Windows IE 5.5 view(スクリーンショットの画像)

<img src="image.gif" width="92"
height="20"><img src="image.gif" width="92"
height="20">
- - - - - - - - - - - -
そこで、タグ中で改行をさせると、画像はきちんと並びます。
<IMG>と<IMG>の間にホワイトスペースが入らないからです(^^)

=> view browser view

TABLEを書くときの注意点
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td><img src="image.gif" width="92" height="20">
</td></tr></table>
- - - - - - - - - - - -
TABLEを書く時も注意が必要です。開始タグ直後、終了タグ直前で改行をするのは避けましょう。たとえば上のように書いてしまうと…

=> ie Windows IE 5.5 view(スクリーンショットの画像)


<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td><img src="image.gif" width="92" height="20"></td></tr></table>
- - - - - - - - - - - -
改行を入れずに書くか、タグ中で改行しましょう(^^)

=> view browser view

| レシピトップへ |
| トップページへ |
-- CopyRight(C) ホームページキッチン 2006 Haruyo --