プロが教える店舗＆オフィスのセキュリティ対策術

詳しい人求む！

table で画像をピッタリとくっつけたい

解決済

  • 質問者：エビゾー
  • 質問日時：
  • 回答数：3件

tableレイアウトを組もうとしています。
画像を中に入れたいと考えているのですが、画像がぴったりとくっついてくれません。

どのようにしたらぴったりとくっついてくれますでしょうか？

何卒宜しくお願いいたします。

■HTML部分
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import url("./style.css");
</style>

</head>
<body>

<!-- ヘッダ -->

<!-- メインコンテンツ -->
<div id="wrapper">
<table border="0" cellspacing="0" class="float_left">
<tr><td rowspan="4"><img src="./img/8491010.jpg"></td><td><img src="img/btn_01.jpg"></td></tr>
<tr><td><img src="img/btn_01.jpg"></td></tr>
<tr><td><img src="img/btn_01.jpg"></td></tr>
<tr><td><img src="img/btn_01.jpg"></td></tr>
</table>
<table border="0" cellspacing="0">
<tr><td rowspan="3"><img src="./img/8491010.jpg"></td><td><img src="img/btn_02.jpg"></td></tr>
<tr><td><img src="img/btn_02.jpg"></td></tr>
<tr><td><img src="img/btn_02.jpg"></td></tr>
</table>
</div>
<!-- フッタ -->

<footer>

</footer>
</body>
</html>

■CSS部分
body {
margin: 0;
padding: 0;
font-family: "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: normal;
background-color: #8b0000;
}
#wrapper{
width: 950px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
}
#wrapper table{
display: block;
width: 316px;
}
.float_left{
float: left;
}

「table で画像をピッタリとくっつけた」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

参考程度に

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

#2です



＞tableのようなレイアウトを作成したい場合、みなさんはどうやっているのでしょうか？
私は専門家でもないし、HTMLさえ作ったりはしていないので、一般的なのかどうかもわからない上にかなりいい加減ですが・・・

文書の意味（構成）や条件も不明（画像はサイズが同じなのか/異なるのかなどなど）なため、何をよりどころにすればよいのか手掛かりが無いのですが、大小の画像を1セットのブロックと考えて、全体的に左側、上側に詰めてレイアウトするという考え方での一例です。
※ 画像その他の要素のサイズは敢えて指定していません。
※ flexによるレイアウトなので、少し古いブラウザでは対応していないものがあります。

・以下はテストしてみたサンプルです。

<style type="text/css">
#wrapper ul { list-style-type: none; }
#wrapper ul { display: flex; flex-wrap: wrap; }
#wrapper li { display: inline-flex; }
#wrapper img { display: block; }
</style>


<div id="wrapper">
<ul>
<li>
<img src="./A.jpg" alt="">
<div>
<img src="./btn1.gif" alt="">
<img src="./btn1.gif" alt="">
<img src="./btn1.gif" alt="">
<img src="./btn1.gif" alt="">
</div>
</li>
<li>
<img src="./B.jpg" alt="">
<div>
<img src="./btn2.gif" alt="">
<img src="./btn2.gif" alt="">
</div>
</li>
<li>
<img src="./A.jpg" alt="">
<div>
<img src="./btn1.gif" alt="">
<img src="./btn1.gif" alt="">
<img src="./btn1.gif" alt="">
<img src="./btn1.gif" alt="">
</div>
</li>
<li>
<img src="./B.jpg" alt="">
<div>
<img src="./btn2.gif" alt="">
<img src="./btn2.gif" alt="">
<img src="./btn2.gif" alt="">
</div>
</li>
<li>
<img src="./A.jpg" alt="">
<div>
<img src="./btn1.gif" alt="">
<img src="./btn1.gif" alt="">
<img src="./btn1.gif" alt="">
<img src="./btn1.gif" alt="">
<img src="./btn1.gif" alt="">
</div>
</li>
<li>
<img src="./B.jpg" alt="">
<div>
<img src="./btn2.gif" alt="">
<img src="./btn2.gif" alt="">
<img src="./btn2.gif" alt="">
</div>
</li>
</ul>
</div>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご丁寧に回答頂き、本当にありがとうございます！！
参考にさせて頂きます。

通報する
お礼日時：2017/11/08 09:25

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは



推奨されないレイアウト方法ということはご承知の上として・・・

添付図ではあちこちに隙間があるので、どこのことをおっしゃっているのかわかりませんが、数値指定の部分に関しては計算値が合わなければ隙間ができます。
それ以外に関しては、デフォルトのmarginやpaddingの影響があると思われますので、とりあえずCSSで
　#wrapper table * { margin:0; padding:0; }
のような1行を追加することで、レイアウトの指定によらない隙間に関しては出なくなくなるはずです。

上記の処置でも残る隙間は、計算が合っていないための隙間と考えられますので、画像のサイズやセルのサイズなどをきちんと調整しないと直らないと思われます。


リセットに関する簡単な説明が以下のサイトにありましたので、ご参考までに。
http://blog.3streamer.net/html-css-beginner/rese …
    • good
    • 0
    • 件
通報する
この回答へのお礼

tdのpaddingを０にしたら、隙間が少なくなりました！
ヒントありがとうございました！

もし、差し支えなければ教えていただきたいのですが、tableのようなレイアウトを作成したい場合、みなさんはどうやっているのでしょうか？

table以外ですることを考えたらちょっと発狂しそうです。

通報する
お礼日時：2017/11/07 15:57

No.1

  • 回答者： t_fumiaki
  • 回答日時：

左の鍋の高さ=btn_01.jpの高さ×ピッタリ4個分


右の鍋の高さ=btn_02.jpの高さ×ピッタリ3個分
として、btn画像の高さを作る。

tableやtdはコンテンツによって幅・高さがきまるので、ピッタリ画像の高さが合う様に計算して作る。
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

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

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

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

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

おすすめ情報