HTMLで画像を並列表示する方法は？

2010/08/06 13:07

このQ&Aのポイント

HTMLで画像を並列表示する方法について教えてください。
テーブルやスタイルシートを使っても画像が左詰めの縦並びになってしまいます。どうすれば横並びに表示できるでしょうか？
初心者ですが、HTMLで画像を横並びに表示する方法を教えてください。

jambia
お礼率23% (22/95)

レンタルサーバ・ASP
回答数2
ありがとう数7

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

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

ベストアンサー

MRT1452
ベストアンサー率42% (1392/3296)

2010/08/06 13:57 回答No.2

他の方も書かれていますがｐタグは段落を指すタグで、 AとBは別々の段落という扱いとなり、段落区切りの部分に暗黙的に改行が入ります。また、ウィンドウのサイズに関係なく改行されないようにするには、テーブルタグを用いて、その中に画像を配し、自動的に折り返さないようにnorap属性を着ければ、ウィンドウのサイズに影響されることなく横並びで配することが出来ます。 (単に<p>タグをはずしただけでは、ウィンドウサイズの影響を受けます。) <table> <tr> <td norap> <img src="Ａ" width="640" height="180"><img src="Ｂ" width="140" height="180"> </td> </tr> </table>

質問者

お礼 2010/09/21 22:16

とてもべんりですね！さっそく使いましたありがとうございます

全文を見る

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

nine999
ベストアンサー率44% (512/1140)

2010/08/06 13:19 回答No.1

まずは<p>が２つあるので、段落分けになっています。これを１つにすると画像は横に並びます。 <p><img src="Ａ" width="640" height="180"> <img src="Ｂ" width="140" height="180"> </p>

質問者

お礼 2010/08/06 15:17

早い回答ありがとうございます！

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

FireFoxでのレイアウト表示崩れについて
現在ホームページを作成しています。 CSSでのレイアウトに挑戦しており、ページ上部に横型のメニューを設置しました。 IEではうまく表示が出来たのですが、FireFoxで表示した際、横にメニューが並ばずに縦に並んでしまいます。google等で検索し調べたのですがうまくいきません。よろしくお願いします。以下ソース ◇HTML部分◇ <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <u class="hnavi"> <li><img src="img/top-menu-1.gif" alt="会社概要" width="149" height="60"</li> <li><img src="img/top-menu-2.gif" alt="業務内容" width="150" height="60"</li> <li><img src="img/top-menu-3.gif" alt="実績" width="151" height="60"</li> <li><img src="img/top-menu-4.gif" alt="店舗案内" width="149" height="60"</li> <li><img src="img/top-menu-5.gif" alt="採用情報" width="150" height="60"</li> <li><img src="img/top-menu-6.gif" alt="お問合せ" width="151" height="60"</li> </u> </div> </div> <div class = "topwrap"> topimg </div> <div id = "inner"> <div = "mainwrap"> mainwrap </div> <div = "sidewrap"> sidewrap </div> <div class = "clear"><hr /></div> </div> <div id = "footer"> footer </div> </div> </body> ◇CSS部分◇ body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } .hnavi { margin: 0; padding: 0; } .hnavi li { display: inline; list-style:none; float: left; margin: 0; padding: 0; } 以上です。宜しくお願いします。
- ベストアンサー
- HTML
CSSでイメージを縦並びに表示する際にブロック要素にする必要はあるのでしょうか？
ＣＳＳ初心者です。サイト制作中に疑問に思ったのですが、イメージを縦並びに３つ並べて中央に配置する時、あるページに「イメージをブロック要素にする」と書かれてたのですが、それは正しいのでしょうか？初心者の為、悩んでしまいました。 (html上） <img src="○○"　width="200" height="200" alt="○○" /> <img src="○○"　width="200" height="200" alt="○○" /> <img src="○○"　width="200" height="200" alt="○○" /> （CSS上） img { display: block;←ここでブロック要素にする必要がわかりません。 margin: 0 auto 10px; text-align: center; } 後、違う質問で凄く初歩的なことなのですが、この「イメージを中央にする」時は「領域で中央に」という考え方は間違いなのでしょうか？例えば先程のイメージの場所を、そのボックス内全てのものを中央にすると考えた場合、 (html上） <div id="center"> <img src="○○"　width="200" height="200" alt="○○" /> <img src="○○"　width="200" height="200" alt="○○" /> <img src="○○"　width="200" height="200" alt="○○" /> </div> （CSS上） div#center { margin: 0 auto; text-align: center; } div#center img { margin-bottom: 10px; } と<div>でセンターにしても文法的にはおかしくないんでしょうか？？初心者過ぎてすいません。教えて下さい。宜しくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
CSSで画面を構成しています。
CSSで画面を構成しています。左ブロック、右ブロック共に角丸の四角にしたいので、**_head.gifというようなフタとソコになるような画像を使っています。このままだと左右ブロックの高さが当然そろわないのですが、何か良い方法はないでしょうか？テーブルレイアウト以外であれば、多少イレギュラーな方法でもかまいません。 *css********** div#body{width:800px; margin:10px auto; text-align:center; padding:0; } div#header{padding:0; margin:0 0 10px 0; background-image:url(**.gif); width:800px; height:50px; text-align:left; } div#main{ width:800px; text-align:left; } div#submenu{padding:0; margin:0 10px 10px 0; width:200px; text-align:left; float:left; } div#contents{padding:0; margin:0 0 10px 210px; width:590px; text-align:left; } div#footer{padding:0; margin:0 0 5px 0; clear:both; width:800px; height:30px; text-align:left; } *html**** <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> <div id="submenu"> <img src="img/common/sub_head.gif" width="200" height="10" /> 　<div>左ブロック</div> <img src="img/common/sub_foot.gif" width="200" height="10" /> </div> <div id="contents"> <img src="img/common/main_head.gif" width="590" height="10" /> 　<div>右ブロック</div> <img src="img/common/main_foot.gif" width="590" height="10" /> </div> </div> <div id="footer"> フッター </div> </div>
- ベストアンサー
- HTML
CSSで、画像を左寄せにして全体を中央にする方法
画像5点を左寄せで配置しています。添付画像のようにブラウザの幅によって段数を変更できるようにしていますが、どうしても、画像部分がセンタリングされません。他のサイト等を丸2日かけて調べましたが、どうもうまい事できません。どなたかご教授くださいませ。よろしくお願いいたします。以下、現状のHTMLとCSSです。 ■HTML <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="css/style2.css" media="all"> <title>タイトル</title> </head> <body> <header> <p>ヘッダー</p> </header> <div id="contents"> <a href="http://○○○○○○○/001.html"><img src="images/001s.jpg" > <a href="http://○○○○○○○/002.html"><img src="images/002s.jpg" > <a href="http://○○○○○○○/003.html"><img src="images/003s.jpg" > <a href="http://○○○○○○○/004.html"><img src="images/n004s.jpg" > <a href="http://○○○○○○○/005.html"><img src="images/005s.jpg" > </div> <footer> <p>フッター</p> </footer> </body> </html> ■CSS @charset "UTF-8"; *{ margin: 0;padding: 0} a { text-decoration : none} ul, ol { list-style : none} img { vertical-align : top} html { font-family : verdana, sans-serif; font-size : 120%; line-height : 150%; margin : 0; width : 100%; text-align:center; } body { width:100%; text-align:center; } header { width:100%; margin-bottom: 0px; color: #fff; font-size: 20px; height:30px; background : url(../images/back.jpg) } #contents { width:100%; padding : 30px 0 10px; text-align:left; } #contents img { margin-bottom : 24px; } footer { color: #fff; width:100%; font-size: 10px; height:30px; background : url(../images/back.jpg) }
- 締切済み
- CSS
【jQuery】サムネイル
3つのサムネイル画像(.thumb)があります。クリックした.thumbはopacityを1に、その他は0.5に切り替わるする方法を教えてください。始めは1番目.thumbのopacityは1でお願いします。 ■html <div id="ph-wrap"> <div id="photo"> <p><img src="./img/photo1.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo2.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo3.png" width="480" height="320" alt="" /></p> </div> <div id="thumb-wrap"> <p class="thumb"><img src="./img/photo1.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo2.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo3.png" width="120" height="80" alt="" /></p> </div> </div> ■CSS(一部抜粋) #thumb-wrap{ float:left; margin:0 0 0 10px; padding:0; width:120px; } #thumb-wrap img{ width:120px; height:80px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; /* Firefox */ filter: alpha(opacity=50); /* IE */ } .opc{ opacity:1.0; -moz-opacity:1; /* Firefox */ filter: alpha(opacity=100); /* IE */ } ■jQuery $(function () { var photoImg = "#photo img" var thumbWrapImg = "#thumb-wrap img" $("#photo p:gt(0)").hide(); $(thumbWrapImg).eq(0).css({"opacity":1}); $(thumbWrapImg).click(function () { $(this).animate({"opacity":1},100); $(photoImg).attr("src",$(this).attr("src")); }); });
- ベストアンサー
- JavaScript
IE6とその他のブラウザでセンターの位置が【微妙】にずれる・・・
XHTML+CSSで作ったのですが、ブラウザのチェックをしたところIE６だけ一部右寄りになってしまいます。一部というのは、上から「head」「nav」「main」「wrap」としているのですが「nav」と「wrap」部分だけが微妙に右寄り、もしくはその他が微妙に左より？になってしまいます。センター寄せには基本的に「0px auto」を使用しているので、色々調べたところ、それが原因？と思い、「textalign center」にしてもなぜか少しずれてしまいます。ためしに、headとnavだけのスリムな状態にしても同じでした。。。解決方法に心当たりのある方はお願いします。【CSS】 @charset "shift_jis"; * { line-height: 150%; font-size: 12px; letter-spacing: 1px; } body{ margin:0px; padding:0px; text-align:center; background-repeat: no-repeat; } img { border: none; vertical-align: bottom; } h1 { font-weight: normal; margin: 15px 0 0 50px; } #head{ width:900px; height:69px; background-image: url(img/bg-head.jpg); margin: 0px auto; text-align: left; } #nav { width: 100%; background-image: url(img/bg-nav.jpg); } #nav ul { margin: 0px auto; width: 900px; padding: 0px; list-style: none; height: 31px; } #nav li { float: left; } #main { width: 100%; height: 284px; text-align: center; background-image: url(img/bg-main.jpg); } #wrap{ width:880px; margin:0px auto; text-align:left; padding: 0 10px 0 30px; background-image: url(img/bg-wrap.jpg); background-repeat: repeat-y; } #left{ width:645px; float:left; } #right{ width:220px; float:right; text-align: right; padding: 0px; height: 1200px; background-image: url(img/bg-right.gif); } #foot{ position:relative; width:100%; height:35px; clear:both; background-image: url(img/bg-foot.gif); margin: 0 0 50px 0; } 【html】 <body>  <div id="head"> <h1>\\\\\\\\\\\\\\\\\\</h1> </div>  <div id="nav"> <ul> <li><img src="img/nav_01.jpg" /></li> <li><img src="img/nav_02.jpg" /></li> <li><img src="img/nav_03.jpg" /></li> <li><img src="img/nav_04.jpg" /></li> <li><img src="img/nav_05.jpg" /></li> <li><img src="img/nav_06.jpg" /></li> <li><img src="img/nav_07.jpg" /></li> </ul> </div>  <div id="main"><img src="img/main.jpg" /></div> <div id="wrap">  <div id="left"> </div>  <div id="right"> </div> <br style="clear:both" /> </div>  <div id="foot"> </div> </body>
- ベストアンサー
- HTML
CSSでのマウスオーバーの画像切り替えについて
現在横型のメニューをCSSで作成しています。配置はうまく出来たのですが、ロールオーバーがうまくいきません。マウスオーバーしても画像が切り替わりません。 CSSの記述をどのようにすればいいでしょうか？以下ソース ◇HTML <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <ul id="hnavi"> <li id="hnavili1"><a href="#"><img src="img/top-menu-1.gif" width="149" height="60"></a></li> <li id="hnavili2"><img src="img/top-menu-2.gif" width="150" height="60"></li> <li id="hnavili3"><img src="img/top-menu-3.gif" width="151" height="60"></li> <li id="hnavili4"><img src="img/top-menu-4.gif" width="149" height="60"></li> <li id="hnavili5"><img src="img/top-menu-5.gif" width="150" height="60"></li> <li id="hnavili6"><img src="img/top-menu-6.gif" width="151" height="60"></li> </ul> </div> </div> <div class = "topwrap"> topimg </div> <div id = "inner"> <div = "mainwrap"> mainwrap </div> <div = "sidewrap"> sidewrap </div> <div class = "clear"><hr /></div> </div> <div id = "footer"> footer </div> </div> </body> ◇CSS body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } #hnavi { margin: 0; padding: 0; } #hnavili1 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili1 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili2 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili2 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili3 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili3 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili4 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili4 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili5 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili5 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili6 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili6 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } 宜しくお願いします。
- 締切済み
- HTML
cssについて質問です。
cssについて質問です。 IE8で思ったように表示されるものが、Firefoxだとレイアウトが崩れてしまいます。 imgの高さや横幅がFirefoxで反映されず文字が上部に表示されるのですがいろいろやっても改善出来ずに途方に暮れています。ヘッダーやフッターなどもありますが、関係のありそうな部分を抜き出してみました。添付画像のように画像を３つならべて表示したいのですが、一番無駄無くdivで組む方法もありましたらご教授下さい。よろしくお願いします。 ■HTML■ <div class="subcontentsbox"> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> </div> ■css■ .subcontentsbox { font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Osaka,"ＭＳＰゴシック",sans-serif; font-size: 100%; width: 100%; margin: 20px 0px; padding: 0; text-align: justify; -ms-text-justify: inter-ideograph; overflow: hidden; display: block; } .imgbox { background-color: #987654; height: 250px; width: 33.33333%; text-align: center; float: left; } .imgbox a{ text-decoration: none; border: 0; height: 180px; width: 180px; } .imgbox img{ border: 0; height: 180px; width: 180px; }
- ベストアンサー
- 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=utf-8" /> <title>○○</title> <style type="text/css">  </style></head> <body> <p> </p> <table style="filter:Alpha(opacity=50); background-color:#ffffff;"> <tr> <td width="281"><p align="center"> <img src="about.png" width="144" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="schedule.png" width="225" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="event.png" width="139" height="28" /></p> </td> </tr> <tr> <td><p align="center"><img src="blog.png" width="112" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="access.png" width="173" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="link.png" width="94" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="mail.png" width="96" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="toppage.png" width="200" height="27" /></p> </td> </tr> <tr> <td height="15"> </td> </tr> </table> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div> </div>
- ベストアンサー
- CSS

HTMLで画像を並列表示する方法は？

htmlについて質問です