OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

写真を綺麗に2つ並べたいのに,間があいてしまうのです,何が原因?

  • 困ってます
  • 質問No.155567
  • 閲覧数78
  • ありがとう数5
  • 気になる数0
  • 回答数5
  • コメント数0

お礼率 66% (100/150)

こんにちは。
テーブルを使って,写真をレイアウトしているのですが,
1段目には横広の写真(650くらい)
2段目は小さな写真(165くらい)を2枚左に寄せて,
3段目は2段目と同じくらいの大きさの写真を2枚
それは右端によせて、というレイアウトをしたいのですが
どーしても中途半端なところに空間が空いたり,
思いっきり端っこによってしまったり(1段目の橋からはみ出るほど)
綺麗に出来ません。

ここで色々テーブルにつての質問を読んで,
試してみたのですが,上手く行かないのです。

良い方法がありましたら教えて下さい。
よろしくお願いします。
通報する
  • 回答数5
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.4

 こんばんは。

 1枚目の写真の左右幅が650、2段目と3段目の写真の左右幅はすべて165という前提ですが、こんな感じでどうでしょう。2段目の右側の写真と3段目の左側の写真が少し重なる感じになります。

<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="1段目の写真.jpg" alt="1段目の写真" width="650"></td>
</tr>
<tr>
<td>
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr><td width="165"><img src="2段目の左側の写真.jpg" alt="2段目の左側の写真.jpg" width="165" height="175"></td>
<td width="485"><img src="2段目の右側の写真.jpg" alt="2段目の右側の写真.jpg" width="165"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="485" align="right"><img src="3段目の左側の写真.jpg" alt="3段目の左側の写真.jpg" width="165"></td>
<td width="165" align="right"><img src="3段目の右側の写真.jpg" alt="3段目の右側の写真.jpg" width="165"></td>
</tr>
</table>
</td>
</tr>
</table>

 1段目の写真の左右幅>2段目と3段目の写真の左右幅の合計――の場合は、また変わって来ますが。
お礼コメント
narummi

お礼率 66% (100/150)

tenmayさんと、shiba1さんのタグと説明を参考にして
なんとか思っていたものに近い物が出来ました!
ありがとうございます!
お二人の説明の中に私が「?」って思っていたことの説明も
あったりして、大変に為になりました。
タグまで打っていただいて、ありがとうございます。

どちらの方にもマスターポイントを差し上げたいところですが,
そうもいかないので,速かった方の方にマスターポイントを
出させていただきます。
投稿日時 - 2001-10-23 11:26:56
-PR-
-PR-

その他の回答 (全4件)

  • 回答No.1
レベル11

ベストアンサー率 42% (103/245)

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=650> としてテーブルの幅と間隔を固定してみてはどうでしょう。 全ての段にHEIGHT(高さ)を指定するのも良いと思いますよ。 ...続きを読む
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=650>
としてテーブルの幅と間隔を固定してみてはどうでしょう。
全ての段にHEIGHT(高さ)を指定するのも良いと思いますよ。
お礼コメント
narummi

お礼率 66% (100/150)

これはやってみたんですけど,上手くいかなったんですよ。
すぐ,回答を頂いていたんですね,ありがとうございます。
投稿日時 - 2001-10-23 09:49:56
  • 回答No.2

そういう変則的なレイアウトをしたいのであれば、テーブルの入れ子をするしかないのでは? 文章で書くのは難しいのですが、 1.1列×3段のテーブルを作成 2.1段目のTDタグの中に、1列×1段のテーブルを作り、写真を中央に配置。 3.2段目のTDタグの中に、2列×1段のテーブルを作り、写真を左に配置。 4.3段目のTDタグの中に、2列×1段のテーブルを作り、写真を右に配置。 という風に。 ...続きを読む
そういう変則的なレイアウトをしたいのであれば、テーブルの入れ子をするしかないのでは?
文章で書くのは難しいのですが、

1.1列×3段のテーブルを作成
2.1段目のTDタグの中に、1列×1段のテーブルを作り、写真を中央に配置。
3.2段目のTDタグの中に、2列×1段のテーブルを作り、写真を左に配置。
4.3段目のTDタグの中に、2列×1段のテーブルを作り、写真を右に配置。

という風に。
その際、1.のテーブルタグで高さと幅を指定してやると、うまく行くと思います。

ただ、テーブルタグは数が多くなるとページの読み込みが遅くなります。
写真が重いと余計に遅くなりますので、その点は配慮が必要かと。

文章だとわかりづらいですね~。
ごめんなさい・・・。(^^;;
お礼コメント
narummi

お礼率 66% (100/150)

入れ子にしようかなと思ったんですが,
やっぱり重たくなるのが難点かなあって思ってて。
でも,どーしても出来なかったら,やっぱり最後は
このやり方でやってみようと思います。
ありがとうございました。
投稿日時 - 2001-10-23 09:52:24
  • 回答No.3
レベル9

ベストアンサー率 29% (22/74)

テーブルの属性以外でも、改行などでも変にスペースが空くことがありますよ。 ...続きを読む
テーブルの属性以外でも、改行などでも変にスペースが空くことがありますよ。
お礼コメント
narummi

お礼率 66% (100/150)

え、それはどうしても空いちゃうものなんですか?
投稿日時 - 2001-10-23 09:53:29
  • 回答No.5
レベル7

ベストアンサー率 41% (10/24)

どうも初めまして。全く見当違いな気がしますが。。補足です。 >1段目の端からはみ出るほど ↑コレが気になります。もしかしたら、<td>の数がそれぞれの<tr>の中で まちまち、になっているのでは?と感じました。 例えば、1段目が<td></td>1つ。2,3段目が<td></td>2つ。とか。。 <td>&l ...続きを読む
どうも初めまして。全く見当違いな気がしますが。。補足です。
>1段目の端からはみ出るほど
↑コレが気になります。もしかしたら、<td>の数がそれぞれの<tr>の中で
まちまち、になっているのでは?と感じました。

例えば、1段目が<td></td>1つ。2,3段目が<td></td>2つ。とか。。
<td></td>の数が揃っていないと、変な風に表示されます。
<td>を横にぶち抜きで、使いたいときは、
<td colspan="つなげたい数">(2つだったら「colspan="2"」とか。)
のように書き、本来あるはずの<td></td>は、書きません。
縦の場合は、colspanの代わりにrowspanを使います。
でも、narummiさんの場合、右寄せ、左寄せをテーブル全体に使いたいのですから

記入例:

<table cellspacing="0" cellpaddind="0" border="0">
<tr><td>
<img src="photo1.jpg" alt="1" width="650" height="200" border="0">
</td></tr>
<tr><td>
<img src="photo2a.jpg" alt="2a" width="165" height="100" border="0">
<img src="photo2b.jpg" alt="2b" width="165" height="100" border="0">
</td></tr>
<tr><td align="right">
<img src="photo3a.jpg" alt="3a" width="165" height="100" border="0">
<img src="photo3b.jpg" alt="3b" width="165" height="100" border="0">
</td></tr>
</table>

こんな感じではどうでしょうか?<table>を使ってレイアウトするときは、
border="1"とかにしておいて、後で、border="0"に変えるなどすれば、
分かり易いと思います。

それぞれの写真の間の空白の調節は、皆さんが書かれているように、
cellspacing : <table>の外枠と各<td>の距離。
cellpadding : <td>から中身までの距離。
で調節するのがイイでしょう。

ちなみに、<img src=~~ hspace="10" vspace="10">
など、hspaceで左右のスペース。vspaceで上下のスペース調整ができますよ。
では、頑張って下さいね。
お礼コメント
narummi

お礼率 66% (100/150)

shiba1さんとtenmayさんとのタグと説明を参考にして
なんとか思っていたものに近い物が出来ました!
ありがとうございます!
お二人の説明の中に私が「?」って思っていたことの説明も
あったりして、大変に為になりました。
タグまで打っていただいて、ありがとうございます。

どちらの方にもマスターポイントを差し上げたいところですが,
そうもいかないので,速かった方の方にマスターポイントを
出させていただきます。
投稿日時 - 2001-10-23 11:28:40
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ