- ベストアンサー
図の説明文がずれる問題の解決方法
- 文章がずれてしまいます。図の横の説明文を入れようと思いましたが、説明文が図の下段に来てしまいます。divの中にdivで出来ると思ったんですが違いますか？
- 主な記述の抜粋は次の通りです。
- topで固定すればうまく行きますが、図が３枚あるのですが、全部重なってうまくいきませんでした。
- CSS
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
siteの中にpicとexplainを内包するという考えが間違いです。 本来は<p><img></p>です。 同じように考えればexplainの中にpicを置くのが正しい。 後は他の方が言っているようにfloatとかで調整してみて下さい。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞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>
お礼
何か皆様にお礼をしている間に本格的な回答が。。。 でも、今の自分にそこまで考えている力がありません。 そもそも<p>をたくさん書くのを嫌がっている自分が そんなに渾身の力を込めた文章が書けませんorz_ せっかく長文を書いて貰って恐縮ですが 今後の参考とさせて頂きます。
- yui56544
- ベストアンサー率69% (85/123)
#１さんの補足になりますが…。 画像が３枚とのことなので、回り込み解除しないと２枚目以降の画像の配置も崩れてしまうとおもいます 間にclear:both;の要素を入れた方がよいかと思います。 おそらく、下のURLのサンプルがイメージに近いのではないでしょうか？ http://www.w-frontier.com/stylesheet/image_float.html
お礼
リンク先を見ました。そんな感じです。 でもNo3の方の考えが近いです。 自分としてはそんなに<p>を打つのが鬱陶しいので。
- maillibra9
- ベストアンサー率60% (9/15)
フロートでやっちゃえば簡単かも。 説明にあるHTML構造なら、 .site div { float: left; } もしくは、IE6/７は全滅ですが table-cell を使ってもいいかもです。 .site div { display: table-cell; }
お礼
floatはここでも必要なのですかｏｒｚ＿ 必要なくすためにdivを幾つも用意したのに。 ご回答有り難うございます。
お礼
まさか反対だとは夢にも思ってませんでしたorz_ これでmarginとか調整したらうまく行きました。 皆様のお力に感謝します。サンクス！！