- ベストアンサー
div枠のレイアウトが崩れてしまいます
- div要素がウィンドウの縮小によって勝手に改行してしまい、レイアウトが崩れる問題が発生しています。
- wrapの幅設定やdiv要素にposition:relative;を追加するなどの試みがうまくいかず、レイアウトの崩れが解消されません。
- また、右上の枠内の画像を枠内の右下に表示したいが、縦位置の設定がうまくできず、画像が予期せぬ位置に表示される問題が発生しています。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
HTMLがちゃんと文書構造を示すよう正しくマークアップされていれば困ることではありません。 デザインのためにHTMLを書いたのじゃ、スタイルシートを導入した意味がない！！！ 文脈やスタイルシートから読み解くとHTMLは以下のようにマークアップされているはずですよね。HTMLは文書構造をマークアップするためのもので、CSSはプレゼンテーションを指定するもの。・・・きちんと書かれていれば上だろうが下だろうが、リキッドスタイルだろうが固定デザインだろうが、３分割だろうが、自由になるはずです。 もちろん検索エンジンも理解してくれるし、携帯電話でも幅の広いディスプレイでも・・ <body> ＿<h1><img src="./image/logo.gif" width="48" height="36" alt="logo"><span>何とかのサイト</span></h1> ＿<div class="section"> ＿＿<h2>本文見出し</h2> ＿＿<p>本文の文章・・・</p> ＿＿<p>本文の文章・・・</p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="index.html">トップ</a></li> ＿＿＿＿<li><a href="contents.html">目次</a></li> ＿＿＿＿<li><a href="contactUs.html">コンタクト</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>脚注</h3> ＿＿＿<p>文章</p> ＿＿</div> ＿</div> </body> ★サンプル(HTML4.01strict)タブが＿に置換してあるので戻すこと。 <!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"> <!-- div.section,h1,div.section,div.aside{border:solid gray 1px;} h1 span{visibility:hidden;} h1{background:url(./image/title.gif) 160px 0px aqua no-repeat;max-width:940px;margin:0;position:relative;} h1 img{position:absolute;bottom:0;left:60px;} div.section{margin:0 0 0 160px;max-width:780px;width:auto;position:relative;min-height:500px;background-color:yellow;} div.section div.aside{width:160px;height:100%;position:absolute;top:0;left:-160px;background-color:silver;} --> </style> </head> <body> ＿<h1><img src="./image/logo.gif" width="48" height="36" alt="logo"><span>何とかのサイト</span></h1> ＿<div class="section"> ＿＿<h2>本文見出し</h2> ＿＿<p>本文の文章・・・</p> ＿＿<p>本文の文章・・・</p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="index.html">トップ</a></li> ＿＿＿＿<li><a href="contents.html">目次</a></li> ＿＿＿＿<li><a href="contactUs.html">コンタクト</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>脚注</h3> ＿＿＿<p>文章</p> ＿＿</div> ＿</div> </body> </html>
その他の回答 (1)
- hinananana
- ベストアンサー率69% (16/23)
少し崩れていたので修正 /*--HTML--*/ <div id="wrap"> <div id="left-up"> あああ </div> <div class="top_right"> <div class="top_title"> <img src="image/title.gif" width="100" height="50"> </div> <div id="right-up"> <img src="logo.jpg" width="100" height="50"> </div> </div> <br class="clear"> <div id="left-down"> いいい </div> <div id="right-down"> ううう </div> </div><!-- /wrap--> /*--CSS--*/ #wrap{ width: 945px; height: 700px; padding: 0px; border: 1px #202020 solid; margin: 0 auto; text-align: left; } #left-up{ width: 160px; float: left; } .top_right{ float: left; border-left: 1px solid #606060; width: 784px; } .top_title{ padding:5px; } #right-up{ height: 80px; border-top: 1px solid #606060; text-align:right; } .clear{ clear: left; } #left-down{ width: 160px; height: 500px; border-top: 1px solid #606060; border-right: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } #right-down{ width: 784px; height: 500px; border-top: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } 簡単に説明しますと 主に上の「あああ」のdivとtitle.gifとlogo.gifのdivの修正なんですけど 書き方はまずleft-upをfloat:leftし title.gifとright-upの周りにtop_rightとdivで囲み1つにします で、top_rightにfloat-leftを指定してあげれば良い！ えと、left-upの右にborder-rightは書かず、right-upにborder-leftを書いたほうがいいと思います。 right-upが下にどんどん伸びたりするとleft-upのborderが切れちゃいますからね。 あと、画像にはwidthとheightを書くといいですよ <img src="title.gif" width="100" height="100" /> ＞ウィンドウを縮小すると、div要素が勝手に改行してしまい、レイアウトが崩れてしまいます。 div要素が勝手に改行・・・ もしかしてtableで書いていたりしません・・・よね。 ＞右上の枠内の画像を「枠内の右下」に表示したいのですが、よい方法はありますか？ うーん・・・勉強不足なのでしょうか・・・わかりませんｗ 質問の解決に全然役立てませんでしたが書き方の参考にどうぞ^^;
お礼
ありがとうございます。 少しだけ意中の体裁と形がかわってしまったようです…（汗）。 borderの設定の仕方は勉強になります！
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
いつもありがとうございます。 >HTMLがちゃんと文書構造を示すよう正しくマークアップされていれば困ることではありません。 >デザインのためにHTMLを書いたのじゃ、スタイルシートを導入した意味がない！！！ 目からうろこです。 本当にそのとおりです。お恥ずかしい限りです（赤） 頂いたアドバイスを参考にしてもう一度勉強しなおします。 うまくできそうな気がします！