図の説明文がずれる問題の解決方法

前へ 次へ
このQ&Aのポイント
  • 文章がずれてしまいます。図の横の説明文を入れようと思いましたが、説明文が図の下段に来てしまいます。divの中にdivで出来ると思ったんですが違いますか？
  • 主な記述の抜粋は次の通りです。
  • topで固定すればうまく行きますが、図が３枚あるのですが、全部重なってうまくいきませんでした。
回答を見る
  • ベストアンサー

文章がずれてしまいます

図の横の説明文を入れようと思いました。 図　説明 の関係になってくれればいいのですが、 説明文が図の下段に来てしまいます。 図 　　説明 div の中に div で出来ると思ったんですが違いますか？ 主な記述の抜粋は次の通りです。 なお、topで固定すればうまく行きますが、 図が３枚あるのですが、全部重なってうまくいきませんでした。 div { position : relative ; color : white ; } 　　.site { border : 0 ; } 　　.pic { left : 50 px ; width : 400 px ; height : 400 px ; } 　　.explain { left : 500 px ; } <div class="site" > 　　<div class="pic" > 　　　　<IMG src="pic1_1.jpg"> 　　</div> 　　<div class="explain"> 　　　　説明文 　　</div> </div>

noname#147836
noname#147836
  • CSS
  • 回答数4
  • ありがとう数5

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

  • ベストアンサー
  • flyingbee
  • ベストアンサー率26% (49/182)
回答No.3

siteの中にpicとexplainを内包するという考えが間違いです。 本来は<p><img></p>です。 同じように考えればexplainの中にpicを置くのが正しい。 後は他の方が言っているようにfloatとかで調整してみて下さい。

noname#147836
質問者

お礼

まさか反対だとは夢にも思ってませんでしたorz_ これでmarginとか調整したらうまく行きました。 皆様のお力に感謝します。サンクス！！

その他の回答 (3)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

＞div の中に div で出来ると思ったんですが違いますか？ 　いえ、レイアウトのためにHTMLを書こうとすると失敗します。HTMLはあくまで、文書の(意味的)な構造をマークアップするためのものです、divも、 「DIV要素・略・は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) 画像とその説明がいくつか並んでいるようですから、マークアップは <ol class="process"> 　<li><img src="[URL]" width="[サイズ]" heught="[サイズ]" alt="画像の言葉での説明"> 　　　<ul> 　　　　<li>説明文</li> 　　　</ul> 　</li> 　<li><img src="[URL]" width="[サイズ]" heught="[サイズ]" alt="画像の言葉での説明"> 　　　<ul> 　　　　<li>説明文</li> 　　　</ul> 　</li> </ol> 　とか、 <dl class="process"> 　<dt><img src="[URL]" width="[サイズ]" heught="[サイズ]" alt="画像の言葉での説明"</dt> 　<dd>説明文</dd> 　<dt><img src="[URL]" width="[サイズ]" heught="[サイズ]" alt="画像の言葉での説明"</dt> 　<dd>説明文</dd> </dl> 　あるいは <div class="section"> 　<h3><img src="[URL]" width="[サイズ]" heught="[サイズ]" alt="画像の言葉での説明"></h3> 　<p>説明文</p> 　<h3><img src="[URL]" width="[サイズ]" heught="[サイズ]" alt="画像の言葉での説明"></h3> 　<p>説明文</p> </div> でもよいです。 　文章の意味的構造にしたがってマークアップします。それをスタイルシートを使ってレイアウトを指定していきます。 　以下のサンプルは簡単なHTMLとCSSです(３種類のマークアップとそれに対応するために複雑になっています)が、どれも見栄えは同じです。(HTMLさえ正しければ、どのようにもレイアウトできます。) ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) ★googleお勧めのLynx( http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=jp#2 )【添付図】 でもチェックしてあります。 ※なお、タブは＿に置換してありますから、元に戻してください。 ※画像のURLやサイズや説明は適当なものに変更してください。 ※あえて詳細は説明しません。自分で調べてください。そのほうが身につくでしょう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- *.process,div.section{ ＿width:80%;min-width:800px;margin:0 auto;display:block; } *.process li,*.process ul,*.process dt,*.process dd{ ＿list-style:none; ＿padding:0;margin:0; ＿margin-left:0; } div.section p,*.process li ul li,*.process dd{ ＿margin:0 0 0 420px; ＿line-height:1.6em; ＿text-indent:1em; } h2, *.process li, *.process dt, div.section h3{ ＿clear:left; } *.process ul li{ ＿clear:none; } *.process li img,*.process dt img,div.section img{ ＿width:410px; ＿float:left; } --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<h2>順リストでマークアップする。</h2> ＿<ol class="process"> ＿＿<li><img src="./images/RemovedKeyBoard.png" width="400" height="300" alt="まず、キーボードを外す"> ＿＿＿＿<ul> ＿＿＿＿＿<li>キーボードの上にあるカバーの左にあるキャップをめくってビスを外し、カバーを持ち上げるようにして右にずらすとカバーが外れます。</li> ＿＿＿＿＿<li>キーボードを固定しているビスが頭を出すので。そのビスを緩めてキーボードを持ち上げるとキーボードが外れます。</li> ＿＿＿＿</ul> ＿＿</li> ＿＿<li><img src="./images/RemoveKeyBoard.png" width="400" height="300" alt="キーボードを外したら"> ＿＿＿＿<ul> ＿＿＿＿＿<li>キーボードを外すとメモリーが見えます。</li> ＿＿＿＿＿<li>そのメモリーの両サイドのレバーを広げるとメモリーが起き上がりますから、そのまま引き抜きます。</li> ＿＿＿＿</ul> ＿＿</li> ＿</ol> ＿<h2>定義リストでマークアップする</h2> ＿<dl class="process"> ＿＿<dt><img src="./images/RemovedKeyBoard.png" width="400" height="300" alt="まず、キーボードを外す"></dt> ＿＿<dd>キーボードの上にあるカバーの左にあるキャップをめくってビスを外し、カバーを持ち上げるようにして右にずらすとカバーが外れます。</dd> ＿＿<dd>キーボードを固定しているビスが頭を出すので。そのビスを緩めてキーボードを持ち上げるとキーボードが外れます。</dd> ＿＿<dt><img src="./images/RemoveKeyBoard.png" width="400" height="300" alt="キーボードを外したら"></dt> ＿＿<dd>キーボードを外すとメモリーが見えます。</dd> ＿＿<dd>そのメモリーの両サイドのレバーを広げるとメモリーが起き上がりますから、そのまま引き抜きます。</dd> ＿</dl> ＿<h2>セクションでマークアップ</h2> ＿<div class="section"> ＿＿<h3><img src="./images/RemovedKeyBoard.png" width="400" height="300" alt="まず、キーボードを外す"></h3> ＿＿<p>キーボードの上にあるカバーの左にあるキャップをめくってビスを外し、カバーを持ち上げるようにして右にずらすとカバーが外れます。</p> ＿＿<p>キーボードを固定しているビスが頭を出すので。そのビスを緩めてキーボードを持ち上げるとキーボードが外れます。</p> ＿＿<h3><img src="./images/RemoveKeyBoard.png" width="400" height="300" alt="キーボードを外したら"></h3> ＿＿<p>キーボードを外すとメモリーが見えます。</p> ＿＿<p>そのメモリーの両サイドのレバーを広げるとメモリーが起き上がりますから、そのまま引き抜きます。</p> ＿</div> </body> </html>

画像を拡大する
noname#147836
質問者

お礼

何か皆様にお礼をしている間に本格的な回答が。。。 でも、今の自分にそこまで考えている力がありません。 そもそも<p>をたくさん書くのを嫌がっている自分が そんなに渾身の力を込めた文章が書けませんorz_ せっかく長文を書いて貰って恐縮ですが 今後の参考とさせて頂きます。

  • yui56544
  • ベストアンサー率69% (85/123)
回答No.2

#１さんの補足になりますが…。 画像が３枚とのことなので、回り込み解除しないと２枚目以降の画像の配置も崩れてしまうとおもいます 間にclear:both;の要素を入れた方がよいかと思います。 おそらく、下のURLのサンプルがイメージに近いのではないでしょうか？ http://www.w-frontier.com/stylesheet/image_float.html

noname#147836
質問者

お礼

リンク先を見ました。そんな感じです。 でもNo3の方の考えが近いです。 自分としてはそんなに<p>を打つのが鬱陶しいので。

回答No.1

フロートでやっちゃえば簡単かも。 説明にあるHTML構造なら、 .site div { float: left; } もしくは、IE6/７は全滅ですが table-cell　を使ってもいいかもです。 .site div { display: table-cell; }

noname#147836
質問者

お礼

floatはここでも必要なのですかｏｒｚ＿ 必要なくすためにdivを幾つも用意したのに。 ご回答有り難うございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSSで表示が、、、

    写真を並べているページなのですが、 firefox と IE での縦のスペースの空き具合が異なってしまいます。 IEで見ると、firefoxよりも大きく立て幅が空いてしまい 揃ってくれません。 回避策をググって色々試してみたのですが 上手くいきませんorz ひょっとしたらコード的にどこかおかしいのかも しれないのですが、、、どなたか助言をお願いしますm(_ _)m -- html-- <div class="navi" > <div class="pic2"><a href="01.html"><img src="pic/1mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="02.html"><img src="pic/2mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="03.html"><img src="pic/3mini.jpg" width="200" height="147" border="0" /></a></div> <div class="pic2"><a href="04.html"><img src="pic/4mini.jpg" width="200" height="151" border="0" /></a></div> </div><!--navi--> -- 外部CSS -- .pic2 { float: left; margin-left:30px; margin-top:20px; } .navi { clear:both; margin-top:40px; }

    • ベストアンサー
    • CSS
  • CSS　左右違う大きさのボックスでheightを合わせたい

    外部CSSでHPを作成しています。 基本的なことかと思いますが、調べてもどうしてもうまくいかないので 皆さまのお力をお貸しください。 左右にボックス（で良いのでしょうか？）を置き、その中にテキストを入れています。 それぞれ文字数が違うためheightのサイズがばらばらのため、現在指定していません。 固定すれば解決しそうですが、縦には数十個のボックスを並べているのでできません。 どのようにしたら文字数の少ないボックスを、文字数の多いボックスに合わせられるのでしょうか？ また、テキストを何も入れていない状態で、左右のheightがずれているのはなぜなのでしょうか？ どうぞご教授ください。 よろしくお願い致します。 /*CSSファイルの記述*/ .waku1{ border : solid 1px #999999; border-bottom: none; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku2{ border : solid 1px #999999; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .waku3{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku4{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .clear{ clear : left; } /*HTMLファイルの記述*/ <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku3"></div> <div class="waku4"></div> <div class="clear"></div>

    • ベストアンサー
    • HTML
  • ボーダースタイルがうまく表示できない

    #content { width:525px; } div.box { width:525px; margin-top: 20px; border-bottom:dotted 1px #ccc; } div.left { width:140px; float: left; font-weight: bold; margin-left: 5px; } div.right { width:380px; float: left; line-height: 20px; height: 20px; } <div　id="content"> <div class="box"> <div class="left">Address</div> <div class="right">住所<br>東京都</div> </div> </div> クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ？によりボーダーがトップになっているように見えてしまいます。 どこが間違っておりますか？ アドバイスを宜しくお願いします。

    • ベストアンサー
    • HTML
  • JS 正三角形から正六角形にするには

    JavScript で正三角形から正六角形にするには？ 赤い円と一辺が１００ｐｘの正三角形を描きました。 青い正三角形は、頂点が円の中心にあり、２点が円周上にあります。 この時、ボタンを押したら６色の正六角形を描画します。（添付図参照） それには、どのようなコードになりますか？ 正三角形の色 (反時計回り) blue -> red ->violet ->green -> orange -> lightgrey <style> .wrap3 { margin: 0 auto; position: relative; width: 200px; height: 200px; border: solid 1px red; border-radius: 50%; } .triangle3 { position: absolute; left: 50px; top: 100px; width: 0; height: 0; border-style: solid; border-right: 50px solid transparent; border-left: 50px solid transparent; border-bottom: 87px solid blue; border-top: 0; } </style> <button id="btn3">正六角形にする</button> <div class="wrap3"> <div class="triangle3"></div> </div> <script> function draw() { // ？ }; btn３.onclick = draw; </script>

  • CSSで「overflow:scroll」をしてい

    CSSで「overflow:scroll」をしているボックス内で表示している 特定のボックスを最前面に表示させることは 可能なのでしょうか。 文字では説明しにくいので 例として ------------- <STYLE type="text/css"> .box1{ overflow: scroll; width: 200px; height: 100px; } .box2{ width: 200px; height: 40px; background-color: yellow; position: relative } .box3{ width: 200px; height: 40px; background-color: pink; position: relative; left: 100px; top: -10px } </STYLE> <div class="box1"> <div class="box2">Box No.2</div> <div class="box3">Box No.3</div> </div> ------------- だとして、 <div class="box3">Box No.3</div>を <div class="box1">よりも前面に表示させたいのですが スタイルシートで実現可能なのでしょうか。 いろいろ調べながらやってみましたが 解決できなかったので知恵をお貸し頂ければと思い 投稿させて頂きました。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • left (right) プロパティについて

    次のように、ベース画像の上に別の画像をのせて表示させています。 <style> <!-- .box { position:relative; left:50%; } .baseimage { position:relative; z-index:1; left:-225px; } .image1 { position:relative; z-index:2; left:-100px; top:-200px; } .image2 { position:relative; z-index:2; left:-100px; top:-300px; } --> </style> <div class="box"> <img src="baseimage.jpg" class="baseimage"> <img src="image1.jpg" width="30" height="30" class="image1"> <img src="image2.jpg" width="30" height="30" class="image2"> </div> このとき、image1 と image2 の左端からの距離が一致せず、ずれてしまいます。 それは何故なのでしょうか？ コーディングに問題があるのでしょうか？ お教えいただけると幸いです。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • css

    <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="a.gif" width="100" height="100" border="0" /></td> <td > <div class="ab">left</div> <p>説明文 </p> </td> </tr> </table> </td> <td width="20"></td> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="b.gif" width="100" height="100" border="0" /></td> <td> <div class="ab">right</div> <p>説明文 説明文 </p> </td> </tr> </table> </td> </tr> </table> .ab { border-bottom:1px solid #E3E3E3; padding-left:5px; margin: 0px 0px 10px 0px; テーブル内の文字数が変わると片方が上から下に下がってきます。両方上に揃えるには どうすればいいんでしょうか。よろしくお願いします。

    • ベストアンサー
    • CSS
  • floatとclearを使ったレイアウト作成について

    http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。

    • ベストアンサー
    • HTML
  • お世話になっております。fc2でblogを運営しているものです。

    お世話になっております。fc2でblogを運営しているものです。 テンプレートをいじってロールオーバーボタンを作ってみたいのですがどうしてもできません。 以下ソースになります。 HTML： <!--navi--> <div id="navi"> <div class="navi01"> <a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　トップ" border="0" width="120" height="30" /></a> </div> <div class="navi02"> <a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　イラスト" border="0" width="120" height="30" /></a> </div> <div class="navi03"> <a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　マンガ" border="0" width="120" height="30" /></a> </div> <div class="navi04"> <a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　その他" border="0" width="120" height="30" /></a> </div> <div class="navi05"> <a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　掲示板" border="0" width="120" height="30" /></a> </div> <div class="navi06"> <a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　メール" border="0" width="120" height="30" /></a> </div> </div> <!--navi--> CSS： #navi { margin : 0 auto; margin-top : 5px; width : 800px; } .navi01 { float : left; margin-left: 15px; } .navi02 { float : left; margin-left: 10px; } .navi03 { float : left; margin-left: 10px; } .navi04 { float : left; margin-left: 10px; } .navi05 { float : left; margin-left: 10px; } .navi06 { float : left; margin-left: 10px; } です。navi01～navi06までがボタン。それをnaviでグループ化しているイメージです。 ○○○○○○には当然ソースが書いてあります。各ボタンのロールオーバー用ボタンは用意してあります。 どのようなHTML、CSSを書けばよろしいでしょうか。よろしくお願いいたします。

  • Firefox15.0におけるborderの挙動

    Firefox15.0環境でのborderの挙動についての質問です。 divをfloatで並べてレイアウトし、borderで境界線を描画しております。 その際、border-widthを1pxで設定しているのですが、Firefox15.0環境だとborderが若干太くなってしまい、レイアウトが崩れるケースがあります。 Firebugにて確認した所、1pxの指定が実際には1.1167pxという半端な値が設定されていました。 ところが、問題のレイアウト箇所のみ別HTMLに抜き出して確認した所、border-widthは1pxのままでレイアウトは崩れませんでした。 この状況から、他のCSS設定や親要素からの継承が影響しているのだろうと考え、調べたのですが、Firebug上ではレイアウトが崩れる場合（完全版）と、レイアウトが崩れない環境（抜粋版）との間にCSSの設定の相違はありませんでした。 ちなみに、他に試したブラウザです IE6 IE9 Firefox12 では上記問題は起こらず、正常に表示されました。 書くまでもないぐらいのざっくりした感じですがソースは以下のようなイメージです。 //css div.main{ width:500px; height:500px; } div.a{ width:30px; height:30px; border:1px solid black; float:left; } div.main{ width:60px; height:30px; border:1px solid black; float:left; } //html <div class="main"> <div> <div class="a"></div><div class="a"></div><div class="a"></div><div class="a"></div> </div> <div> <div class="b"></div><div class="b"></div> </div> </div> これだけの情報では解決策を頂けないのは重々承知しているので、何かヒントや直接的には繋がりがなくとも、border-widthのおかしい挙動について何かご存知の方が居ましたら教えて頂けないでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する