歯ブラシ選びの大事なポイントとは?

今ホームページをつくっていて
幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。
全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。
ソースは
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="img/title.jpg" width="600" border="0">
</td>
</tr>

<tr>
<td>
<img src="img/1.jpg" width="280"height="35" border="0">
</td>
<td>
<img src="img/2.jpg" width="80" height="35" border="0">
</td>
<td>
<img src="img/3.jpg" width="80" height="35" border="0">
</td>
<td>
<img src="img/4.jpg" width="80" height="35" border="0">
</td>
<td>
<img src="img/5.jpg" width="80" height="35" border="0">
</td>
</tr>
</table>

http://web-channel.com/index.html
このホームページのようにしたいんですがどこを直したらいいんでしょうか?
環境は、WinMEでエディタにタグ打ち込んで作ってます。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

<td>の一行の改行をなくし一列に書き直し


保存してみてください。隙間がなくなるはずです。

<td>
<img src="img/5.jpg" width="80" height="35" border="0">
</td>

<td><img src="img/5.jpg" width="80" height="35" border="0"></td>
という具合にするだけで大丈夫だと思います。
余計な半角スペースなどに注意してみてください。
    • good
    • 0

下記の様にロゴのカラムのtdタグとimgタグの間に何も(改行や空白も)入れないようにすれば隙間が詰まると思います。



----------------------------------
<td colspan="5"><img src="img/title.jpg" width="600" border="0"></td>
----------------------------------
    • good
    • 0
この回答へのお礼

ありがとうございました。あっさり直りました。

お礼日時:2004/01/11 19:14

<html>


<head>
</head>
<body>


<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img src="img/title.jpg" width="600" border="0"></td>
</tr>
<tr>
<td><img src="img/1.jpg" width="280"height="35" border="0"></td>
<td><img src="img/2.jpg" width="80" height="35" border="0"></td>
<td><img src="img/3.jpg" width="80" height="35" border="0"></td>
<td><img src="img/4.jpg" width="80" height="35" border="0"></td>
<td><img src="img/5.jpg" width="80" height="35" border="0"></td>
</tr>
</table>



</body>
</html>
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qホームページで画像を横に並べるには?

ホームページ作成超初心者です。
初歩的な質問で恐縮です。

ホームページに画像を横に並べて(左→右)表示させたいと思っています。

<img src="画像ファイルのURL">
というHTMLで画像を表示できるところまでわかったのですが、続けて入れると画像が縦に並んでしまいます。

ド素人で申し訳ないですが、どなたか方法を教えて頂けませんか?
よろしくお願いいたします。

Aベストアンサー

<img src="画像ファイルのURL"><img src="画像ファイルのURL"><img src="画像ファイルのURL">・・・


とした場合、横に並びますよ
ただし、画像のサイズとブラウザサイズにもよりますが・・・

ブラウザサイズを無視して横に並べたいのであればTableを組んでしまうのも手です

<table>
<tr>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
</tr>
</table>

これで、横に並べれます


あと、アドバイス
<img src="画像ファイルのURL"> → <img src="画像ファイルのURL" width="横寸法" height="縦寸法" alt="画像の名前">
のように、width、height、altは指定しましょう

Qテーブルの横に画像を

テーブルのすぐ隣に画像を表示させるには、どうしたら良いでしょうか?

教えてください。

よろしくお願いします。

□…テーブル ★…画像

□★

こんな感じです。

Aベストアンサー

<img src="***.png" alt="**" style="float:right">
<table>
<tr><td>***</td></tr>
</table>

<table style="float:left">
<tr><td>***</td></tr>
</table>
<img src="***.png" alt="**">

こんな風にすると良いかも。

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Qテーブルのセルに画像をピッタリ表示するには

よろしくお願いします。

テーブルの以下のタグ並びで、
<img src=>の部分の画像jpgを、枠にピッタリ表示したいのです。
以前作った他のhtmlファイルでは、画像のサイズに変化があっても、自動的に枠にピッタリ表示でき、
同じ通りタグを書いたはずなのですが、
なぜか?今回は、この画像が、
一行二列目の枠(これが大きくなってしまう)
のその左端寄りに、幅よりも小さく浮いたように表示されてしまいます。(枠の右側に不要な余白ができてしまう)
枠や画像のサイズを固定しても同じです。
この画像の枠以外は、画像ではなくテキストです。
うまくいかないのはなぜなのでしょう?
どこに間違いがあるのでしょうか、教えてください、お願いいたします。

<table width="85%"border="1" cellpadding="5" cellspacing="5" align="center">

<tr><td>一行一列目
    </td>
<td rowspan="3">1行二列目~ココの部分~<img src="" width="" height="" align="center" valign="top" alt="">
</td></tr>
<tr><td>2行一列
</td></tr>
<tr><td>3行一列
</td></tr>
<tr><td>4行一列目
</td>
<td>4行二列目
</td></tr>
<tr><td colspan="2">5行一列
          </td></tr>
<tr><td colspan="2">6行一列
          </td></tr></table>

よろしくお願いします。

テーブルの以下のタグ並びで、
<img src=>の部分の画像jpgを、枠にピッタリ表示したいのです。
以前作った他のhtmlファイルでは、画像のサイズに変化があっても、自動的に枠にピッタリ表示でき、
同じ通りタグを書いたはずなのですが、
なぜか?今回は、この画像が、
一行二列目の枠(これが大きくなってしまう)
のその左端寄りに、幅よりも小さく浮いたように表示されてしまいます。(枠の右側に不要な余白ができてしまう)
枠や画像のサイズを固定しても同じです。
この画像...続きを読む

Aベストアンサー

私の場合これで反映されていますのでもうお力になれないと思いますが一つだけ。

私もたまにタグでやってておかしくなるときがあります。
そのときは、一部を修正して直る場合もありますがそうでない場合もあります。
そういう場合一度その部分だけを、別のページで一からすべて作り直してみると直るときがあります。
別のページでも一からすべてを記入するのではなく、徐々にタグを増やしていってどこが悪いのかを探してみるのも一つの手です。

Q画像とテーブルの隙間をなくす。

トップページ一番上に画像を配置し、その下に表を載せ、その表の中にコンテンツを掲載しようと思っています。
ソースはこんな感じです。

<IMG src="images/obj_top_main.jpg" width="860" height="210" border="0">
<TABLE border="0" width="860" height="100%" cellpadding="0" cellspacing="0">
<TR>
<TD bgcolor="#ffffff">ここにコンテンツ</TD>
</TR>
</TABLE>


この、「画像と表の間」を0にして付けたいのですが、方法がわかりません。
CSSで出来そうな気がするのですが…
方法があれば教えてください。

Aベストアンサー

テーブルにクラスをつけて、

.クラス名{margin-top:0px;}

とするとどうでしょうか。

若しくは、画像とテーブルの幅が同じなので、画像をテーブルの中に入れてしまうという手もあると思います。

Q画像を縦に並べたら隙間ができることについて

画像を縦に並べたところ隙間ができてしまいます。

隙間無くくっつけたいのですがどうすればいいのでしょうか。



以下htmlです。

<img src="img/nakama_img01.gif" width="687" height="227" alt="画像1" /><br />
<img src="img/nakama_img02.gif" width="687" height="197" alt="画像2" /><br />
<img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" />

<br />で改行せずくっつけてタグを並べても同じ結果でした。

よろしくお願いします。

Aベストアンサー

スタイルシートで次の1行を入れてください。

img { vertical-align: bottom; }

Qテーブル内に画像を表示したい。

テーブル内に画像を1枚表示したいです。

下記のようにIMGタグを用いると、画像が表示されますが、
横幅が100%の時の大きさで枠が表示
されます。横に余白があります。

この余白を無くして、テーブルの枠線が画像をピッタリ
囲む様にしたいです。

どなたか、ご教授願います。初心者なので詳しくお願い
します。

----------------------------------------------

<table border=1>
 <tr>
   <td >
<img src='./test_size/image2.jpg' width='50%' >
   </td>
 </tr>
</table>

Aベストアンサー

画像のサイズが「幅50%」とありますが、
これは画像を半分の幅で表示したいと言うことでしょうか。
そういうことでないのでしたら、下記のようにセル幅(td width)を画像サイズに合わせれば大丈夫ですよ。

<table border=1>
 <tr>
   <td width="画像の幅(ピクセル数)">
<img src="../test_size/image2.jpg" width="画像の幅(ピクセル数)" height="画像の高さ(ピクセル数">
   </td>
 </tr>
</table>

補足ですが、画像を表示する際、imgタグには画像サイズも明記するとブラウザ側での読み込みが速くなります。

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qtableタグとformタグの組み合わせ

tableタグとformタグの組み合わせでどのように記述すれば、構文上正しいのでしょうか?
私は下のパターンで書いておりますが、間違いでしたら早めに改めたいので
お聞きしました。

<table>
<form>
<input type="hidden" name="a" value="1">
<tr>
<td>
<input type="text" name="b" value="">
</td>
</tr>
<tr>
<td>
<input type="submit" value="OK" value="">
</td>
</tr>
</fomr>
</table>

Aベストアンサー

恐らく、<form>タグを入れると1行分の隙間ができるのでそのように記述しているのでしょう。私も4年ほど前に何かの雑誌でそのように記述しましょう、を確かに見ました。W3Cの理論を無視すれば別に表示するのだから構わないとも思います。
しかし、私の場合、今は、前者様の回答のように<table>の外に記述します。そして、スタイルシートで
<form style="margin:0px;">
とすれば、隙間が無くなります。

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml


人気Q&Aランキング