- ベストアンサー
拡大時右端の内容が真ん中にずれることについて
html 4.01で記述していますが、 125%までは下にスクロールバーが表示され画像がずれることがないのですが、 130%を超えると左端の画像が真ん中にずれるこみます。 なぜですか？ ちなみに幅は全部で800pxに留めています。 それとabsoluteは入れてません。 参考コード body { overflow-y:auto overflow-x:auto }
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.1です。 もちろんabsoluteで配置するのが最善です。 しかし、この場合はディスプレイ幅に依存させないためにも、あなたのようにabsoluteでなくfloatのほうが良いかもしれません。 すなわち、故意にウィンドウ幅が狭いときは下に回す・・のです。 ＞ちなみに幅は全部で800pxに留めています。 今のように様々なディスプレイ幅がある時代、これはしないほうが良いです。狭いディスプレイだと横スクロールが必要になります。 ディスプレイ幅が小さいときは下に回せばよいです。 そうして置けば、スマホも幅広ウィンドウでも利用できる。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より しかし、それ以前にHTMLにたくさんの誤りがあります。文法的にはエラーにはならない(文法チェッカーは文法しかチェックしないので制約がある)ものもあります。 ブラウザは、ブロックを追加するなど、何とか表示しようとしますが、それに期待したらブラウザ間で誤差が出る原因になります。 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator )』 文書構造がよく分からないので、想像を含みますが・・ ディスプレイ幅が小さかったりユーザーのフォントが大きいときは下に回りこみます。 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済み ★タブは＿に置換してあるので戻す。 ※いちいちclass名はつけないように!付けるのなら文書構造を示す物にする。後からのメンテナンスもスタイルシートも絶対にそのほうが楽です。 <!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>Question</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"> <!-- /* のちほど・・・*/ --> </style> </head> <body> ＿<div class="header"> ＿＿<h1>八百屋</h1> ＿</div> ＿<div class="section"> ＿＿<h2>検索</h2> ＿＿<div class="section" id="syoku"> ＿＿＿<h3>野菜から探す</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="/tomato">トマト</a></li> ＿＿＿＿<li><a href="/lettuce">レタス</a></li> ＿＿＿＿<li><a href="/cabbage">キャベツ</a></li> ＿＿＿＿<li><a href="/carrot">にんじん</a></li> ＿＿＿＿<li><a href="/greenPepper">ピーマン</a></li> ＿＿＿＿<li><a href="/cucumber">きゅうり</a></li> ＿＿＿＿<li><a href="/parsley">パセリ</a></li> ＿＿＿＿<li><a href="/celery">セロリ</a></li> ＿＿＿＿<li><a href="/other">その他</a></li> ＿＿＿</ol> ＿＿＿<p class="calender"> ＿＿＿＿<img src ="calender.jpg" width="190" height="190" alt="カレンダー"> ＿＿＿</p> ＿＿</div> ＿＿<div class="section" id="otherSearch"> ＿＿＿<form action="./"> ＿＿＿＿<div class="section" id="priceSearch"> ＿＿＿＿＿<h3>価格から探す</h3> ＿＿＿＿＿<p> ＿＿＿＿＿＿<input type="text" name="kakaku2" value="" size="10" maxlength="5"> ＿＿＿＿＿＿～<input type="text" name="kakaku3" value="" size="10" maxlength="5">円 ＿＿＿＿＿＿<input type="submit" name="searchbyprice" value="検索"> ＿＿＿＿＿</p> ＿＿＿＿</div> ＿＿＿＿<div class="section" id="areaSearch"> ＿＿＿＿＿<h3>生産地から探す</h3> ＿＿＿＿＿<p> ＿＿＿＿＿＿<img src ="Japanmap2.jpg" width="400" height="300" alt="tizu"> ＿＿＿＿＿</p> ＿＿＿＿</div> ＿＿＿＿<div class="section" id="keywordSearch"> ＿＿＿＿＿<h3>キーワードから探す</h3> ＿＿＿＿＿<p> ＿＿＿＿＿＿<input type="text" name="searchbykeyword" value="キーワードなどを入力してください。" size="20" maxlength="20"> ＿＿＿＿＿＿<input type="submit" name="searchbykeyword2" value="検索"> ＿＿＿＿＿</p> ＿＿＿＿</div> ＿＿＿</form> ＿＿</div> ＿＿<div class="aside" id="userRegist"> ＿＿＿<form action="../cgi/"> ＿＿＿＿<h3>ユーザー登録</h3> ＿＿＿＿<p> ＿＿＿＿＿<input type="submit" name="registering" value="ボタン1" style="width:150px; height:50px;"> ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿<input type="submit" name="login" value="ボタン2" style="width:150px; height:50px;"> ＿＿＿＿</p> ＿＿＿</form> ＿＿</div> ＿＿<div class="aside" id="news1"> ＿＿＿<h3>農家だより</h3> ＿＿＿<p><img src ="piman.JPG" width="120" height="100" alt="ピーマン"></p> ＿＿＿<p>10月01日更新!!</p> ＿＿</div> ＿＿<div class="aside" id="news2"> ＿＿＿<h3>農家ニュース</h3> ＿＿＿<p><img src ="farm.jpg" width="120" height="100" alt="ニュース"></p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシート部分です。 <style type="text/css"> <!-- html,body{margin:0;padding:0;} div.header,div.section,div.footer{ width:80%;min-width:640px;max-width:900px; margin:0 auto; } h2{display:none;} div.section{text-align:center;} div.section div.section, div.section div.aside{ float:left; width:auto;min-width:0; border-radius:5px; margin:3px; } div.section div.aside{ width:150px; border:1px solid gray; } div.section div.section div.section{float:none;} #syoku{width:200px;} #syoku ol{ list-style-type:none; display:block; margin:0;padding:0; text-align:center; border:outset 2px gray; line-height:2em; } #syoku ol li{ display:inline-block; margin:0;padding:0; border:inset 2px gray; width:45%; } #otherSearch input{margin:0 1em;} #otherSearch div.section{border:green solid 1px;} #news2:before{ content:""; display:block; clear:left; } /* 色分け */ #syoku{background-color:#339933;} #syoku li{background-color:lime;} #areaSearch{background-color:lime;} #keywordSearch{background-color:silver;} #priceSearch{background-color:yellow;} #userRegist{background-color:#D2691E;} #news1{background-color:#FF33CC;} #news2{background-color:#FF00CC;} --> </style>
お礼
長文のコード有難うございます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML(大文字です)4.01strictで製作して、DOCTYPEを <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> として文法チェックをすること ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) そのうえで、解決しなければ、その前後のHTMLと関連するスタイルシートを示してください。 body { overflow-y:auto overflow-x:auto } は書かなくても現行のブラウザはautoと動作するはずです。
お礼
そのサイトでチェックした所、細かいエラーはあるようですが、レイアウトには関係ないと思われるので、このまま補足させてください。 HTML側 <!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"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="～"> <title>Question</title> <link rel="stylesheet" href="Questionkakudai.css" type="text/css"> </head> <body> <h2><p><a class= "recruit">八百屋</a></p></h2> <div id="syoku"> <table border="7"> <tr class="" TD style="font-size : 30px;">野菜から探す</td></tr> <tr class=""><TD style="font-size : 20px;"><a class= "a3" href="">トマト</a></td><TD style="font-size : 20px;"><a class= "a3" href="">レタス</a></td></tr> <tr class=""><TD style="font-size : 20px;"><a class= "a3" href="">キャベツ</a></td><TD style="font-size : 20px;"><a class= "a3" href="">にんじん</a></td></tr> <tr class=""><TD style="font-size : 20px;"><a class= "a3" href="">ピーマン</a></td><TD style="font-size : 20px;"><a class= "a3" href="">きゅうり</a></td></tr> <tr class=""><TD style="font-size : 20px;"><a class= "a3" href="">パセリ</a></td><TD style="font-size : 20px;"><a class= "a3" href="">セロリ</a></td></tr> <tr class=""><TD style="font-size : 20px;"><a class= "a3" href="">その他</a></td></tr> <tr class=""><td> <td></tr> <tr class=""><td> <td></tr> <tr class=""><td> <td></tr> <tr class=""><td> <td></tr> <tr class=""><td> <td></tr> <tr class=""><td><img src ="calender.jpg"></td></tr> </table> </div> <div id="center"> 価格から探す <input type="text" name="kakaku2" value="" size="10" maxlength="5"> ～ <input type="text" name="kakaku3" value="" size="10" maxlength="5"> 円 <input type="submit" name="searchbyprice" value="検索"><br> <br> 生産地から探す <img src ="Japanmap2.jpg" width="400" height="300" alt="tizu"><br> <div id="jobkeyword">キーワードから探す</div> <div id="jobkeywordentry"><input type="text" name="searchbykeyword" value="キーワードなどを入力してください。" size="20" maxlength="20"></div> <input type="submit" name="searchbykeyword2" value="検索"> </div> <!-- ここから右側 --> <div id="right"> <div class="register" > <form> <div id="touroku"> <input type="submit" name="registering" value="ボタン1" style="width:150px; height:50px;"> </div> <p> </p> <p> </p> <div id="login"> <input type="submit" name="login" value="ボタン2" style="width:150px; height:50px;"> </div> </form> </div> </div> <div id="noukaletter">農家だより</div> <p>10月01日更新!!</p> <img src ="piman.JPG"> <div id="noukanews">農家ニュース</div> <img src =""> </div> <!-- ここまで右側 --> </body> </html> css側 @charset "Shift_Jis"; body { background-attachment: scroll; } h2{ list-style-type:none; float:left; } #syoku{ clear:left; float:left; padding-right:100px; background-color:#339933; height:650px; } .calender{ height:200px; width:200px; } /*ここから真ん中*/ #center{ float:left; background-color:#33CC00; width:390px; height:60px; } .register{ height:200px; float:left; padding-right:20px; background-color:#99CCCC; } #login{ width:100px; background-color:#66FF99; } #right{ float:left; width:150px; background-color:#D2691E; } #noukaletter{ background-color:#FF33CC; width:140px; height:30%; } #noukanews{ background-color:#FF00CC; width:100px; height:40%; } /*ここまで右側*/
補足
すみません、チェックしてみます。その前にお聞きしたいのは absoluteで設定していないんですが、これは大きく関係しますか？
お礼
ORUKA1951さん長文による親切な回答有難うございます。正直圧倒されました。absoluteとかrelativeでちょこちょこっとやればいいんじゃないのという考えでいました。