ブラウザのズーム機能についての問題と解決方法
- GoogleChromeとSafariのAppleWebkit系ブラウザでブラウザのズーム機能を使用すると、position: absoluteで位置指定してあるボックスの縦方向の位置がズレてしまいます。
- IEやFireFoxではこの問題は発生しません。
- この問題を回避する方法はあるのでしょうか。
- ベストアンサー
GoogleChromeとSafariのAppleWebkit系ブラウ
GoogleChromeとSafariのAppleWebkit系ブラウザでのズーム機能について 以下のソースをCromeで表示して、ブラウザのズームを使用して縮小・拡大をするとposition: absoluteで位置指定してあるボックスの縦方向の位置がズレてしまいます。IEやFireFoxでは位置がずれません。 これを回避する方法はあるのでしょうか。 <body> <div id="con" style="position: relative; padding: 10px; text-align: left;border: solid 1px #000000; width: 500px; height: 100%"> <div style="background:#000000; color:#ffffff;border: solid 1px #000000; position:absolute; width:100px; height: 50px; top: 1000px; left: 30px;">*********</div> 0<br /> 1<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> 8<br /> 9<br /> 10<br /> 11<br /> 12<br /> 13<br /> 14<br /> 15<br /> 16<br /> 17<br /> 18<br /> 19<br /> 20<br /> 21<br /> 22<br /> 23<br /> 24<br /> 25<br /> 26<br /> 27<br /> 28<br /> 29<br /> 30<br /> 31<br /> 32<br /> 33<br /> 34<br /> 35<br /> 36<br /> 37<br /> 38<br /> 39<br /> 40<br /> 41<br /> 42<br /> 43<br /> 44<br /> 45<br /> 46<br /> 47<br /> 48<br /> 49<br /> 50<br /> 51<br /> 52<br /> 53<br /> 54<br /> 55<br /> 56<br /> 57<br /> 58<br /> 59<br /> 60<br /> 61<br /> 62<br /> 63<br /> 64<br /> 65<br /> 66<br /> 67<br /> 68<br /> 69<br /> 70<br /> 71<br /> 72<br /> 73<br /> 74<br /> 75<br /> 76<br /> 77<br /> 78<br /> 79<br /> 80<br /> 81<br /> 82<br /> 83<br /> 84<br /> 85<br /> 86<br /> 87<br /> 88<br /> 89<br /> 90<br /> 91<br /> 92<br /> 93<br /> 94<br /> 95<br /> 96<br /> 97<br /> 98<br /> 99<br /> 100<br /> </div> </body>
- q_user
- お礼率75% (9/12)
- HTML
- 回答数5
- ありがとう数15
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
#1, 2, 3, 4 です。 > javascriptによってposition:relativeへ書き換え可能にするので、その際に文書構造を保つためです。 JavaScript で該当要素の位置を取得して、top, left を指定した方がよいかもしれません。 それなら、CSSでスタイルを指定するために面倒な計算をする必要はなくなりますし、何よりアクセシビリティ上の問題がなくなります。 anything from here offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法について http://hkom.blog1.fc2.com/blog-entry-503.html
その他の回答 (4)
- think49
- ベストアンサー率59% (285/482)
#1, 2, 3 です。 ol要素とは独立して #target の位置を制御するならば、全ての要素において、margin, padding, border を指定して固定化する必要があります。 デフォルトスタイルシートを信用しないでください。 ----------- <style type="text/css"><!-- html, body { margin: 0; padding: 0; } ol{ margin: 10px; padding: 0; padding-left: 30px; border: solid 1px #ccf; width: 200px; } li{ margin: 5px; padding: 5px; height: 20px; border: solid 1px #ccc; } #target{ position: absolute; top: 17px;; left: 47px;; background-color: #fee; width: 50px; height: 30px; } --></style> </head> <body> <ol> <li>test</li> <li>test</li> <li>test</li> </ol> <div id="target">target</div> ----------- 何度もいいますが、このやり方はアクセシビリティがよくなく、お勧めできません。 width値は固定化しなくても何とかなりますが、height値を固定化しないと対応できません。(更に top, left の計算も面倒です) もし、ユーザがユーザCSSの font-size, margin, padding 等を優先される設定をしており、Webサイトの指定よりも大きな値を指定していたら、Webサイトのコンテンツが正しく表示されない可能性があります。 ブラウザは height が足りないからといって、width を大きく取ってくれません。 overflow: auto; でも指定してスクロールバーを入れる事も可能ですが、視認性が良いとも思えません…。
お礼
返答が遅くなりすみません。 ありがとうございます。 これでは、一見できたようにみえますが、targetが下のほうに行けば行くほど、やはりずれますね。。
- think49
- ベストアンサー率59% (285/482)
#1, 2 です。 > 番号とブロックの位置関係（距離の割合） ああ、そういうことでしたか…。 例えば、50行目～53行目の位置にボックスがあるのにページズームすると、ボックスが表示される行数が微妙にずれる、ということですね？ (私は「外枠のborder」と「ウインドウ境界」の間にある幅を注視していました。) 以下、全角空白は半角空白に置換してください。 ------ <style type="text/css"><!-- ol { margin: 1em 0; padding: 0; padding-left: 3em; border: solid 1px #ccf; width: 40em; } li { margin: 0; padding: 0.5em; height: 2em; border: solid 1px #ccc; } .test { position: relative; } .test div { position: absolute; top: 0; left: 3em; background-color: #fee; width: 6em; height: 6em; } --></style> </head> <body> <ol> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li class="test">test<div>target</div></li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> ------ 要素をまたがって高さを合わせたい場合は、各行の height までしっかりと固定します。 最終的な目的が分からないので一口にはいえませんが、「n行の高さのボックスを生成する」という考え方はアクセシビリティ的にはよくありません。 それを実現するためには margin, padding, height を全て固定する必要があり、内容に合わせて高さを伸縮するHTMLのメリットが失われます。 可能ならば要素をまたがらないで、レイアウトが取れるように HTML, CSS を組み直した方が良いと思います。
お礼
ありがとうございます。 確かにその方法だと可能ですね！ ただ、ちょっとやりたい事と違っていて、position:absoluteのブロックはページの下部に独立して配置しないといけません。これはページの機能としてabsoluteブロックをjavascriptによってposition:relativeへ書き換え可能にするので、その際に文書構造を保つためです。 文書があって、ページ下部にコメントがあるという考え方です。 つまり頂いたソースを元にすると以下のような感じです。 こうするとやはりabsoluteブロックの縦位置がズームによってずれてしまいますね。。。 <style type="text/css"> ol{ margin: 10px; 0; padding: 0; padding-left: 30px; border: solid 1px #ccf; width: 200px; } li{ margin: 5px; padding: 5px; height: 20px; border: solid 1px #ccc; } #target{ position: absolute; top: 2000px;; left: 30px;; background-color: #fee; width: 50px; height: 50px; } </style> </head> <body> <ol> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ol> <div id="target">target</div> </body>
- think49
- ベストアンサー率59% (285/482)
#1 です。 何を持って「ずれている」と定義しているのかが今ひとつ分かりません。 > ・文書の一部分に対するコメントであるため、いかなる場合も位置がずれてはいけない。 文書の他の部分も同時にズームするのですから、コメントも同じ倍率でズームすればずれないのではないでしょうか？ むしろ、コメントだけズームしない方(IE, Firefox) がずれているように感じるのですが…。 > WEBページからズーム機能を禁止させる事も不可能ですものね。 コメントだけ、ページズームを禁止させたいのでしょうか？ だとすれば、ユーザに意図に反すると思います。 ユーザは拡大(縮小)して表示させたいという意図があるので、全てを拡大(縮小)しなければ期待通りの動作にはならないと思います。 「全てをページズームしてもずれない」が最適ではないでしょうか。
お礼
ありがとうございます。 私がずれるといっているのは、上記ソースを例に言うと、ズームを使用した場合に、番号とブロックの位置関係（距離の割合）が狂ってくるという事です。 そして、確かにIE,FFもずれておりますね。失礼致しました。 >「全てをページズームしてもずれない」が最適ではないでしょうか。 →はい、元よりこの意図で発言しております。分かりづらくすみません。 なにか解決策は無いものでしょうか。
- think49
- ベストアンサー率59% (285/482)
ページズームに関してはブラウザ依存でCSSにも規定がないので、無理だと思います。 どういった目的でページズームを制御したいのか、がわかれば代替案を掲示してもらえるかもしれません。 > position: absoluteで位置指定してあるボックスの縦方向の位置がズレてしまいます。IEやFireFoxでは位置がずれません。 IE8, Firefox3.6.6 ではabsolute指定したボックスの padding をズームせず、Google Chrome 5 ではズームするようですね。 感覚的なものでしょうけれど、私には IE, Firefox がズレているように感じます。
お礼
ありがとうございます。 ページ内の特定のテキストの側にabsoluteブロックでコメントを表示させたいと思っております。 必須なのは、 ・javascriptで要素をドラッグ可能にするため、コメントはposition:absoluteのブロック要素である事 ・文書の一部分に対するコメントであるため、いかなる場合も位置がずれてはいけない。 と言う事です。 WEBページからズーム機能を禁止させる事も不可能ですものね。 文書を画像にしてもズームなら同じ事ですしね。 何か良い方法は無いものでしょうか...!
関連するQ&A
- Divの入れ子とHeight
こんにちわ。初歩的な質問かもしれませんがお願いします。 DivのContainerの中にPosition:Absoluteの３つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。 Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか？ こちらがコードです。 HTML CODE <HTML> <HEAD> <link rel="stylesheet" href="hp.css" type="text/css" /> </HEAD> <BODY> <div class="container"> <div class="banner"> </div> <div class="menu"> </div> <div class="main"> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> </div> </div> </BODY> </HTML> CSS CODE * {margin:0;padding: 0;} div.container{border:2px solid RGB(888888); position: absolute; top:20px; left:50px; width:900px; height:auto;} div.banner { position: absolute; top:20px; left:80px; width:700px; height:150px; border:2px solid RGB(888888);} div.menu{ position: absolute; top:190px; left:30px; width:150px; height:300px; font-weight:bold; border:2px solid RGB(888888);} div.main{ position:absolute; top:190px; left:200px; width:600px; height:auto; border:2px solid RGB(888888);}
- ベストアンサー
- HTML
- firefoxでdivタグ要素が突き抜ける
お世話になります。 firefoxですとdivタグで指定した高さ・幅を要素が超えると 突き抜けて表示されます。IEだと、指定した幅・高さが大きくなってくれる。 以下のソースで子の要素が親のボックス、子のボックスを突き抜けなくできないでしょうか？ もしかしたら簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #oya { border-right:orange 1px solid; border-top:orange 1px solid; border-left:orange 1px solid; border-bottom:orange 1px solid; } #ko { border-right:green 1px solid; border-top:green 1px solid; border-left:green 1px solid; border-bottom:green 1px solid; } </style> </head> <body> <div id="oya" style="width:200px;height:200px;"> <div id="ko" style="width:100px;height:100px;">ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ</div> </div> </body> </html>
- ベストアンサー
- HTML
- floatがうまくいきません。
以下のスタイルシートに設定したのですが、 #content の幅をぴったしの値 width: 640px; にするとレイアウトが崩れてしまいます。 どこが間違っているのでしょうか。 また、参考になるページがあれば教えてください。 <body> <div id="wrapper"> <div id="header"> </div> <div id="pagebody"> <div id="navigation"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> body { margin: 0; padding: 0; } #wrapper { width: 760px; border-style: solid; border-color: red; border-width: 5px; } #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; } #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; } #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; } #content{ width: 636px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; } #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; }
- 締切済み
- CSS
- ieとfirefoxでdiv枠に２pxのズレ
宜しくお願い致します。 現在下記のHTMLを作成致しましたが、CSSにてfirefoxとchomeに合わせると ieではdiv枠が2px程左右にズレが生じてしまいます。ieに合わせると逆の現象が生じます。 何が原因なのか判りません。宜しくご教示下さい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <style type="text/css"> .clear {clear:both; } .clear hr {display:none;height:0px;font-size:0pt; } #wrap {width:810px; text-align:center; margin:0px auto;} #header{font-size:70%;color:green;margin-top:5px;text-align:center;} #menu {width:200px;height:auto; float:left;margin:0;position: relative;} #goods {width:600px;height:auto; float:right;margin:0;position: relative;} #top-title { width:200px;height:70px; float:left; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} #top-menu { width:600px;height:70px; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} /* position: relative削除したり widthの値を%にしたり色々試してみましたが??? */ .col_01_l{width:295px;height:310px;position: relative; float:left; margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_01_r{width:295px;height:310px;position: relative; float:right;margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_05 {width:200px;height:auto; float:left; margin-bottom: 8px;background-color:#ffffee; border:solid 1px #336600;} .col_06a {width:600px;height:auto; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #000000;position: relative;} </style> </head> <body> <div id="wrap"> <div id="header"> </div><!-- /header --> <div id="goods"> <div id="top-menu"> </div><!-- /top-menu --> <br style="clear:both;"> <div class="col_06a"> <br><br> </div> <br style="clear:both;"> <div class="col_01_l"> <p>ブラウザieではずれませんが、 chrome、firefoxで、この枠が 右に２pxにずれる。 どのように直せば良いか具体的にご教示下さい。</p> </div> <div class="col_01_r"> <br> </div> <br style="clear:both;"> </div><!-- /goods --> <!-- ################################################################################## --> <div id="menu"> <div id="top-title"> <br> </div> <br style="clear:both;"> <div class="col_05"> <br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br> </div><!-- /col_05 --> <br style="clear:both;"> </div><!-- /menu --> <br style="clear:both;"> <!-- ################################################################################## --> </div><!-- /wrap --> </body> </html>
- ベストアンサー
- CSS
- 文字と枠線がくっつきすぎている
たとえば、 ←枠と文字の距離を離したいのですが、どうすればいいでしょうか。 普通のテーブルでは、cellpaddingで指定しますよね。下のような場合、どうすればいいでしょうか。 <BODY bgColor=#ffffff> <DIV class=block3 style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 10px solid; WIDTH: 400px; BORDER-BOTTOM: 0px solid; HEIGHT: 30px">←↑ くっついてるのを離したい<BR>くっついてるのを離したい</DIV> </BODY> </html> よろしくお願いします。
- ベストアンサー
- HTML
- タグの修正に力をかしてください
ホットペッパーに出てくるお店のページのバナーのように、 「アクセス」「TEL」の文字を表示させたいのですがうまくいきません。 タグの修正にちからをかしていただけないでしょうか。 以下、タグです。よろしくおねがいします。 <table width="702" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="color3" colspan="3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> <tr> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> <div style="position:relative;"><img src="images/hotpot_bannar.gif" alt="バナー" width="700" height="151"></div> <div style="position:absolute; top:70px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">アクセス</div> <div style="position:absolute; top:50px; left:450px; color:#ffffff; font-size:10px;>JR環状線：「福島駅」・・・</div> <div style="position:absolute; top:70px; left:450px; color:#ffffff; font-size:10px;>JR東西線：「新福島駅」・・・</div> <div style="position:absolute; top:120px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">TEL</div> <div style="position:absolute; top:120px; left:450px; color:#ffffff; font-size:10px;>06-****-****</div> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> </table>
- ベストアンサー
- HTML
- 中枠の太さを1pxにしたい
以下の HTML を書いたのですが、外枠の太さは1pxになっていますが、中枠が2pxになってしまいます。中枠も1pxで表示するにはどう修正すればいいでしょうか？ ご教授よろしくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> </head> <body> <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table2"> <tr> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Icon</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Name</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Effect</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 111111</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 444444</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 222222</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 555555</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 333333</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 666666</div></div></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- div要素を半透明にして且つ外枠をつけたい
div要素を半透明にして且つ外枠をつけたいです。 下記のように書いたのですが、borderも一緒に半透明になってしまいます。添付画像の様にするにはどうしたらよいでしょうか？ 教えてください。 <html> <head> <style> div{ background: green; opacity:0.2; filter: alpha(opacity=20); border: 1px solid green; } #hoge{ position: absolute; top: 0; left: 50; width :50; height :50; } </style> </head> <body> あいうえお <div id='hoge' ></div> </body>
- ベストアンサー
- HTML
- div枠のレイアウトが崩れてしまいます
２×２段の枠を作るために、下のような段組にしました。 100％表示ではうまく表示するのですが、ウィンドウを縮小すると、 div要素が勝手に改行してしまい、レイアウトが崩れてしまいます。 同じような質問を参考にして、"wrap"の幅設定をしてみたり、 div要素に｛position:relative;}を追加してみたりしましたが、 どれもうまくいかず、縮小でレイアウトが崩れます。 ウィンドウを縮小してもレイアウトが崩れないようにする方法はあるでしょうか？ それと、もう１つ質問があります。 右上の枠内の画像を「枠内の右下」に表示したいのですが、よい方法はありますか？ {text-align:right;}で横位置は移動できたのですが、縦位置がうまく設定できません。 画像自体に｛potision:absolute;}{top:**}{left:**｝で指定すると、 またウィンドウの倍率変更でとんでもないところに表示されてしまいます。 【html】 <body> <div id="wrap"> <img src="image/title.gif"> <div id="left-up">あああ</div> <div id="right-up"><img src="logo.jpg"></div> <br class="clear"> <div id="left-down">いいい</div> <div id="right-down">ううう</div> </div> <!-- /wrap--> </body> 【css】 #wrap{ width: 945px; height: 700px; padding: 0px; border: 1px #202020 solid; margin: 0 auto; text-align: left; } #left-up{ width: 160px; height: 80px; border-top: 1px solid #606060; border-right: 1px solid #606060; float: left; } #right-up{ width: 780px; height: 80px; border-top: 1px solid #606060; float: left; } .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: 780px; height: 500px; border-top: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } よろしくお願いいたします。 そもそも、この枠組みの仕方が無謀であれば、何かよい方法を教えていただけないでしょうか。 重ね重ね申し訳ありません。
- ベストアンサー
- HTML
- センタリングのＨＴＭＬの挿入場所
お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Ｂａｃｋ"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6"> <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5"> <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>
- ベストアンサー
- ホームページ作成ソフト
お礼
ありがとうございます！ 返答が遅くなりすみません！ 参考にさせていただきます。 色々とありがとうございました！