メモ帳でWEBデザインの勉強をしてるのですが・・・

Question

（画像）～.gifを入れて3×3枚のパズルのように並べて　熊の絵になったのですが　繋ぎ目が若干の隙間があり線が引かさってるように見えます。
CELLSPACING="0"CELLPADDING="0"とか入力してもうまくいかず　
どうしたらいいかわかりません。
何か　この属性を使うためには決まりごとがあるのであれば　教えてほしいです。
ほかに　何か良い方法があるなら教えてほしいです。

ORUKA1951 · Accepted Answer

補足です。
　tableは、ブラウザのでファルトは分離ボーダーモデルとセル内に余白を置くのがデフォルトですから、tableで画像を配置するとセル間に隙間が開きます。HTMLでいうとcellspacingです。cellpaddingのいずれも0にして、隙間が開く理由は、改行やタブの影響ではないかと思います。

No.2の回答のtableの属性で、cellpadding="0" cellspace="0"を指定すればスタイルシートで指定しなくても隙間はなくなるはずです。vertical-alignは関係ありません。
　また、cellpadding="1" cellspace="1"を指定していても、スタイルシートでの指定が優先されますから、スタイルシートで上書きできます。
　⇒カスケード処理の順序（Cascading order） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascading-order )

ORUKA1951 · Answer

＞CELLSPACING="0"CELLPADDING="0"とか入力してもうまくいかず　

　ひょっとして、TABLEを使用しているのでは？
　テキストエディタで練習されていることは、とてもよいことですが、折角基本から学ばれるなら、最低限
・テキストを画像に置き換えて表現する。
・余白制御のために画像を用いる。
・ページレイアウトの目的で表を用いる。
　スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )より
　は避けてください。特にtableをデザインのために使用するのは避けるように。

　画像の間に隙間が開く理由は
『HTMLでは、次に挙げる文字だけが空白類文字であると定義される。
・ASCIIスペース ( )
・水平タブ (	)
・書式送り ()
・ゼロ幅スペース ()
　行区切り類もまた、空白類文字である。
・・・【中略】・・・
　特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。』( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　によるものです。要素と要素(この場合IMG要素や<td>要素)の間に、改行やタブがあるとそれらはひとつの空白として処理されるからです。
　これは次のような英文を考えるとわかると思います。
This is
a pen.
　という文章を書いてもウィンドウの幅が広いと、[This is a pen.]と表示しなければなりませんよね。isとa の間の改行が空白文字だからです。

　画像と画像の間に空白をあけたくなかったとしたら、
<td><img src=""></td>
<td><img ・・・
と、<td></td>間に一切の【空白文字(上記)】をおかずに一列に書くか、<td><img><img><img></td>とするかです。

★しかし、画像(何かのデータだと思いますが)それをテキストの代わりに使用したり
　TABLEでデザインするのは、基本的には間違いですが
<table summary="picture Of Kuma" bordeer="0" class="sample1">
　<tbody>
　　<tr>
　　　<td><img src="" width="" height="" alt=""><td>
　　　<td><img src="" width="" height="" alt=""><td>
　　　<td><img src="" width="" height="" alt=""><td>
　　</tr>
　<tbody>
</table>
として、スタイルシートは
table.sample1{
border-collapse:collapse;/* セルの隙間を空けない */
border:1px solid red;/* 外枠の指定 */
}
table.sample1 td{
padding:0; /* セル内のpaddingを0 */
}
とborder-collapse:とpaddingの指定が必須です。

★繰り返しますが、データを画像で表現したりTABLEでデザインすることは？？？です。

として、スタイルシートは table.sample1{ border-collapse:collapse;/* セルの隙間を空けない */ border:1px solid red;/* 外枠の指定 */ } table.sample1 td{ padding:0; /* セル内のpaddingを0 */ } とborder-collapse:とpaddingの指定が必須です。 ★繰り返しますが、データを画像で表現したりTABLEでデザインすることは？？？です。

outbrave · Answer

スタイルシートで、img { vertical-align: bottom; } を入れればいいと思います。

メモ帳でWEBデザインの勉強をしてるのですが・・・

補足です。

＞CELLSPACING="0"CELLPADDING="0"とか入力してもうまくいかず

スタイルシートで、img { vertical-align: bottom; } を入れればいいと思います。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

＞CELLSPACING="0"CELLPADDING="0"とか入力してもうまくいかず　