画像の配置について（table?）

2023/08/08 02:58

このQ&Aのポイント

画像を4つアップしたいですが、縦に4つ並んでしまいます。タグはどのように打てばよいでしょうか？初心者で申し訳ないですがご教授願います。
HTMLのtableタグを使用して、画像を2列2段で配置することができます。試した方法がわからず困っています。
縦に並んでしまう画像を2列2段で配置する方法を教えてください。初心者でよくわからないので、具体的な手順を教えていただけると助かります。

ベストアンサー

画像の配置について（table?）

2008/05/22 18:11

画像を4つアップしたいのですがこの状態でアップすると画像が縦に4つ並んでしまいます。（1列で4段）これを2：2の配置（2列2段）にしたいのですがタグはどのように打てばよいでしょうか？初心者で申し訳ないですがご教授願います。 tableというのを使うのですが？いくつか試したのですがいまいちわからなくて・・・。意味のわかりにくい説明ですみません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <P> <BR> <A href="http://store.shopping.yahoo.co.jp/cocolux/search.html?p=%A4%B3%A4%C0%A4%EF%A4%EA%A4%BF%A4%AF%A4%B5%A4%F3&x=32&y=12"><IMG src="/lib/cocolux/kodawari.jpg" width="305" height="150" border="1"></A><A href="http://store.shopping.yahoo.co.jp/cocolux/search.html?p=%B8%E5%C7%DA&x=72&y=8"><IMG src="/lib/cocolux/koakuma.jpg" width="305" height="150" border="1"></A><BR> </P> <P><A href="http://store.shopping.yahoo.co.jp/cocolux/search.html?p=%BF%E5%C3%E5&x=25&y=14"><IMG src="/lib/cocolux/mizugi.jpg" width="305" height="150" border="1"></A><A href="http://store.shopping.yahoo.co.jp/cocolux/search.html?p=%C2%E7%A4%AD%A4%E1%A5%B7%A5%E7%A5%EB%A5%C0%A1%BC&x=46&y=13"><IMG src="/lib/cocolux/pekkenasi.gif" width="305" height="150" border="1"></A></P> </BODY> </HTML>

yue034
お礼率51% (59/114)

その他（ITシステム運用・管理）
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

Pochi09
ベストアンサー率75% (42/56)

2008/05/23 07:52 回答No.1

今の状況では<IMG>が落ちているようなので、画像が表示できないのではないでしょうか？（投稿時に写し落としただけでしょうか？）一応、テーブルでの解決策を書いておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> …途中省略… <BODY> <TABLE> <TR> <TD> <A href="1つ目のリンク先"> <IMG SRC="/lib/cocolux/kodawari.jpg" width="305" height="150" border="1"> </A> </TD> <TD> <A href="2つ目のリンク先"> <IMG SRC="/lib/cocolux/koakuma.jpg" width="305" height="150" border="1"> </A> </TD> </TR> <TR> <TD> <A href="3つ目のリンク先"> <IMG SRC="/lib/cocolux/mizugi.jpg" width="305" height="150" border="1"> </A> </TD> <TD> <A href="4つ目のリンク先"> <IMG SRC="/lib/cocolux/pekkenasi.gif" width="305" height="150" border="1"> </A> </TD> </TR> </TABLE> </BODY> </HTML> いま指定しているのはテーブル組みする場合の必要最小限だけです。ホームページビルダーで作成されたページのようなので、そちらで修正する手もあるかもしれません。（今のご質問は、HTMLに関するものです。お仕事で微調整が必要なためエディターでなおししているのでしたら、HTMLの本を読んで全体を掴む方が良いかもしれません。）

質問者

お礼 2008/05/23 12:56

できました！丁寧な回答本当にありがとうございました。わかりにくい説明だったのにうれしいです。感謝いたします！！助かりました！！本当にありがとうございます！！

関連するQ&A

htmlの画像表記を教えて下さい
画像を一列に表記したいと思って下記の様にしましたが、一番左は画像が出ますが、他はHTMLの文字が表記されます。正しい方法を教えてください。 <TABLE border="0" width="800"> <TBODY> <TR><TD><IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-3.jpg" width="150" height="103"></TD> <td>IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-4.jpg" width="150" height="103"</td> <td>IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-6.jpg" width="150" height="103"</td> <td>IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-2.jpg" width="150" height="103"</td> <td>IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-5.jpg" width="150" height="103"</td> </tr> </TBODY></TABLE>
- ベストアンサー
- その他(Windows)
ページ上部にスペースが空いてしまう・・・
今ショッピングモールに出店するために素人ながらページを作っているんですが、ヘッダーの部分の上にスペースがどうしても空いてしまっていていて、修復できません・・・・。モールの方に聞いてみたところ「閉じるタグが抜けている・・」等の答えが返ってきたのですが、それ以上は教えてくれませんでした。。いろいろ調べてみたのですが、どうしても分かりません。。どうかよろしくお願いいたします。 ↓まだ作成途中なので変な箇所があるかもしれません・・。 <table class="head" bouder> <tr> <td class="head"> <img src="gazou" width=600 height=130 alt=""> <tr> <tr align="right"valign="middle"><br> <tr> <td width="713" height="35"> <table width="0" border="0" cellpadding="0"> <tr><td width="32%"><img src="gazou" width="200" height="8"></td> <td width="0%"><a href="～.html"><img src="gazou" width="108" height="25"border="0"></td> <td width="16%"><a href="～html"><img src="gazou" width="107" height="27"border="0"></td> <td width="16%"><a href="～html"><img src="/lib/shidagoromo/puraa" width="108" height="27"border="0"></td> <td width="16%"><a href="～.html"><img src="gazou" width="107" height="27" border="0"></td> <td width="20%"><img src="gazou" width="107" height="28"border="0"></td> </tr> </table> </td> </tr> よろしくお願いします。
- ベストアンサー
- HTML
1つの画像オンマウスで3つの画像を切り替えたい！
現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。改善方法はありませんでしょうか？助けてください！
- ベストアンサー
- JavaScript
ＣＳＳレイアウトの配置ずれについて
本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li>  <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li>  <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }
- 締切済み
- その他([技術者向] コンピューター)
画像の様なテーブルレイアウトにするには？
画像の様なテーブルレイアウトにするにはどうすればいいのでしょうか IE9なら正しく表示されます。何処を修正したかも教えて下さい＊＊＊＊＊＊＊＊＊＊＊＊＊＊index.html＊＊＊＊＊＊＊＊＊＊＊ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/base.css" > </head> <body> <div id="page"> <div id="header"> <p>header</p> </div> <div id="contents">  <div id="main"> <ul id="products-list">  <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li>   <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li>   <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li>   <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li>   <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li>  </ul> </div>  <div id="sub"> <p>sub</p> </div> </div> <div id="footer"> <p>footer</p> </div> </div> </body> </html> ＊＊＊＊＊＊＊＊＊＊＊＊＊base.css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ /* CSS Document */ body{ text-align:center; } #page{ width:860px; height:600px; margin:0 auto; background:#690; text-align:left; } #header{ width:860px; height:100px; background:#D1D1DE } #contents{ width:840px; height:380px; margin:10px; padding-left:0; background:#690; } #main{ float:right; width:570px; height:380px; background:#fff; } #sub{ float:left; width:260px; height:380px; background:#fff; } #footer{ width:860px; height:100px; clear:both; background:#fff; background:#D1D1DE } .products{ list-style-type:none; float:left; width:130px; margin:10px 0px 0px 10px; padding:0px; height:170px; background:#F3F59C } .product-img{ margin:0px; padding:0px; width:50px; height:50px; text-align:center; border:none; } #products-list{ margin:0px; padding:0px; }
- 締切済み
- CSS
テーブルで画像を並べるときに・・
今ホームページをつくっていて幅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でエディタにタグ打ち込んで作ってます。
- ベストアンサー
- HTML
ulの画像をcssのfloatで横並び、IEでの印刷が変（ソース記述のため長文です）
ulを使い、スタイルで画像を横並びにしたのですが、個々の画像サイズで印刷が正しくされる場合とされない場合があります。具体的ソースは下部に記述します。印刷すると、最初のulの方は画像が１つ折り返されてしまいます。 FFやNNは大丈夫でしたが、IEだけが印刷プレビューの段階から折り返されました。参考に、自分の環境も記載します。なぜなのか気になっておりまして…。どこか書き方がおかしいのでしょうか？おわかりになりましたら、よろしくお願いします。 ※長文すみません。 ★システム XP　 professional Version 2002 service Pack 2 ブラウザ　IE6.0.29 以下がソースです------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <style type="text/css" media="all">  </style> </head> <body> <div style="width:765px"> ■折り返される <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="217" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="139" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="216" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> <br> ■折り返されない <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="207" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="159" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="206" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> </div> </body> </html>
- 締切済み
- HTML
cssヘッダー画像の下に配置したい画像が重なります
css勉強し始めた初心者なので、説明やソースなどめちゃくちゃだと思いますが、教えてください。固定ヘッダー（常に画面の上にヘッダーがあるように）を作成し、その下に画像を配置したのですが、ヘッダーの下にその画像が入り込んでしまいました。ヘッダーの下に重ならず配置するにはどうすればよいでしょうか？よろしく御願いいたします。 body内に <div id="header"> <h1><a href="/" title="website"></a></h1> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../ao/img/b01-.gif" onmouseout="this.src='../ao/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../ao/img/b02-.gif'" onmouseout="this.src='../ao/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../ao/img/b03-.gif'" onmouseout="this.src='../ao/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../ao/img/b04-.gif'" onmouseout="this.src='../ao/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../ao/img/b05-.gif'" onmouseout="this.src='../ao/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../ao/img/b06-.gif'" onmouseout="this.src='../ao/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../ao/img/b07-.gif'" onmouseout="this.src='../ao/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../ao/img/b08-.gif'" onmouseout="this.src='../ao/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../ao/img/b09-.gif'" onmouseout="this.src='../ao/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../ao/img/b10-.gif'" onmouseout="this.src='../ao/img/b10.gif'"> </div> <h2><img src="img/panichi.gif" alt="TOP" width="700" height="450" class="centering" /></h2>
- ベストアンサー
- HTML
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。）現在、Kompozerをつかってホームページを作成しています。添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。ご指導いただければうれしいです。よろしくお願いします。＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
ウインドウを狭めてもレイアウトが崩れない方法
ウインドウを狭めてもレイアウトが崩れない方法を教えて下さい。内容は、一番上にタイトルとしての画像を表示させて、その下に画像を３列で何列ものせる。ウインドウを大きく広げたときは、それらの画像を中央に表示させてレイアウトを崩さないようにする。下のような感じでは、ウインドウを狭めると画像が勝手に移動してしまいます。全てを固定にしたいです。お手本を教えて頂きたいです。よろしくお願いいたします。添付画像が理想です。ウインドウを狭めても画像が固定されている瞬間をイメージ化したものです。 <img src="" border="0" width="300" height="60" /> <br> <br> <br>         <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br>         <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br>         <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>
- ベストアンサー
- HTML