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;
}
No.3ベストアンサー
- 回答日時:
#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>
No.2
- 回答日時:
こんにちは
推奨されないレイアウト方法ということはご承知の上として・・・
添付図ではあちこちに隙間があるので、どこのことをおっしゃっているのかわかりませんが、数値指定の部分に関しては計算値が合わなければ隙間ができます。
それ以外に関しては、デフォルトのmarginやpaddingの影響があると思われますので、とりあえずCSSで
#wrapper table * { margin:0; padding:0; }
のような1行を追加することで、レイアウトの指定によらない隙間に関しては出なくなくなるはずです。
上記の処置でも残る隙間は、計算が合っていないための隙間と考えられますので、画像のサイズやセルのサイズなどをきちんと調整しないと直らないと思われます。
リセットに関する簡単な説明が以下のサイトにありましたので、ご参考までに。
http://blog.3streamer.net/html-css-beginner/rese …
tdのpaddingを0にしたら、隙間が少なくなりました!
ヒントありがとうございました!
もし、差し支えなければ教えていただきたいのですが、tableのようなレイアウトを作成したい場合、みなさんはどうやっているのでしょうか?
table以外ですることを考えたらちょっと発狂しそうです。
No.1
- 回答日時:
左の鍋の高さ=btn_01.jpの高さ×ピッタリ4個分
右の鍋の高さ=btn_02.jpの高さ×ピッタリ3個分
として、btn画像の高さを作る。
tableやtdはコンテンツによって幅・高さがきまるので、ピッタリ画像の高さが合う様に計算して作る。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンク画像のマウスオーバー時...
-
ボタンをセル内一杯に表示させ...
-
HTMLのIMAGEに。。
-
【HTML/CSS】ボタンの枠が伸び...
-
htmlの文字が縦書きになる
-
HTML ul li で横並びにナビゲー...
-
<div id="container">の使いか...
-
html <ul></ul>の並びで一行空...
-
css 横並びのナビゲーションバ...
-
リストマーカーをボックス内に...
-
ワードにコピペ、画像が表示さ...
-
CSSで改行後の行間調整
-
divを横に並べる方法
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
2個のFormを横並びにしたい
-
ボタンを横に並べて表示させる方法
-
訪問済のリンク色を変えない方法
-
マージソートの計算量について-...
-
印刷曜CSSがどこかおかしい・・...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
XML画像データををHTMLで簡単に...
-
【HTML/CSS】ボタンの枠が伸び...
-
UDP通信を使うチャットプログラ...
-
リンクを選択したときの青い枠...
-
favicon.ico はもういらない?
-
table で画像をピッタリとくっ...
-
CSSの左横に隙間ができてしまい...
-
HTMLのIMAGEに。。
-
ホームページで画像を横に並べ...
-
画像とテーブルの隙間をなくす。
-
リンクをつけた画像をクリック...
-
HTMLは、シングルクォートかダ...
-
縦長広告をウェブページの右側...
-
c言語を用いて画像の透明度をあ...
-
ホームページタグ打ち。サイズ...
おすすめ情報