- ベストアンサー
画像のセンターリングについて
真ん中にはなるのですが、IEで見るとwidth900pxにしているのに940pxになったり、firefoxで見るとスクロールすると上下に背景ではなくて画像が動いてしまいます。どうやって治したらいいでしょうか？ html <div id="content"><img src="img/bacttrast.png" alt="aa" /></div> css #content{ padding: 40px; width: 900px; height:790px; margin: 0 auto; }
- wknuuy
- お礼率0% (0/38)
- ホームページ作成ソフト
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
fireworksのスライス保存は、さすがに使いませんが・・ 典型的な ・テキストを画像に置き換えて表現する。 ・余白制御のために画像を用いる。 ・・・【中略】・・・ ・HTMLでページを作らずにプログラムに頼る。 の問題点そのものの結果になりますから。 →14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) きちんと画像を作成したほうが効率的です。 画像を透過して背景が見えているかどうかは、bodyの背景に白黒の市松模様でも指定すれば判断できるでしょう。もし透けて見えるならpngで保存するときに、透過を指定しているので、透過無にすればよいです。 その画像が、背景ではなくそのページの重要なデータであるか、単なる背景であるかによってHTMLはまったく異なるものになります。 しかし、話の流れからは、背景のようですが背景でしたらbackgroundプロパティを使うべきです。 abc.pngとefg.jpgは用意してください。 ★リキッドデザインにしてあります。 <!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"> <!-- html,body{margin:0;padding:0;} body{ ＿background:gray url(img/bacttrast.png) 50% no-repeat fixed; ＿color:white; ＿line-height:1.8em; } div.header,div.section,div.footer{ ＿width:70%; ＿margin:0 auto; } p,dd{text-indent:1em;margin:0 1em;color:white;} div.section{ ＿background:blue url(img/abc.png) 50% no-repeat fixed; ＿background-size:cover; ＿color:yellow; } div.section div.figure{text-align:center;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>真ん中にはなるのですが、IEで見るとwidth900pxにしているのに940pxになったり、firefoxで見るとスクロールすると上下に背景ではなくて画像が動いてしまいます。どうやって治したらいいでしょうか？</p> ＿＿<p>下の画像は中央配置です。</p> ＿＿<div class="figure"> ＿＿＿<p><img src="./img/efg.jpg" width="200" height="200" alt="掃除機"></p> ＿＿＿<p>掃除機</p> ＿＿</div> ＿＿<p>真ん中にはなるのですが、IEで見るとwidth900pxにしているのに940pxになったり、firefoxで見るとスクロールすると上下に背景ではなくて画像が動いてしまいます。どうやって治したらいいでしょうか？</p> ＿</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)
ですから、 DOCTYPEとHTMLを正しく書いて、IEが標準モードで動作するようにしてください。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ それをしないと、必ずずれます。 古いIEは、ウエブ標準ではなく、独自仕様で動作していました。その後IEは、標準モードに対処しましたが、過去のIEに基づいて作成されたページのために、互換モードと言う動作をします。ウェブ標準で動作させるためには、DOCTYPEをきちんと書いておかなければならないのです。 あなたが、どのHTMLの仕様で書かれたかわからないので、それ以上の回答は不可能なのです。 画像のサイズより、ページが大きければ----画像を本文がはみ出せば、---下の文章を読むためにはスクロールしたら画像が上にずれないと見えません。これは正常な動作です。 もちろんウィンドウが画像より大きいときのみ中央配置です。 記事を長くして、ウィンドウを小さくしてみるとIEもスクロールされるはずです。 なぜなら、背景ではなく画像ですから・・ 下記はHTML4.01strict（ウェブ標準)です。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.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"> ＿<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"> <!-- p.image{text-align:center;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p class="image"><img src="img/bacttrast.png" width="900" height="790" alt="[画像]"></p> ＿</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>
補足
ありがとうございます。ですが変わってません。それのほうがチェックでは点数が高いです。 HTMLのドキュメントタイプxtml1,0 transitinalはもう古いんですかね。そちらのほうがいいのでしたら今後もそれを使います。あと、画像ですが、fireworksでpng保存して画像をつけると、背景が透過するのか画像が薄くなってしまいます。fireworksでスライス保存したときの画像にはできないんでしょうか？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
必ず、HTMLはウェブ標準で・・ DOCTYPEスイッチ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )参照。 IEの互換モードはpaddingの外をサイズとして認識します。本来はpaddingの内側 ＞スクロールすると上下に背景ではなくて画像が動いてしまいます。 それが正常です。そうでなきゃおかしいでしょう。 HTMLはHTML4.01strictがベストでしょう。XHTMLを使うときはXHTMK1.0strictないし、XHTML1.1で作成しましょう。 →HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 ) とても大事なところです。この前後を何度も読んで正確に理解すること。--1999年勧告なのにいまだにtransitinalはないでしょう。 次期、HTML5はHTML4.01strictの改訂版です。
補足
すいませんが、聞きたいことと違うのですが・・・・・・・・・width900pxにしているのに940pxになったり、firefoxで見るとスクロールすると上下に背景ではなくて画像が動いてしまいます これのIEでの画像の横幅を900にする方法、firefoxで画像を固定する方法について聞きたいんですが・・・。
補足
回答ありがとうございます。真ん中にはできました。最後にひとつだけ質問させてください。 <div id="section"><p class="image"><span class="header"><img src="img/booktranet.png" width="900" height="800" alt="星の縁の画像"> </span></p></div> <div id="header"><img src="header/sign.png" width="437" height="294" alt="ヘッダー画像"></div> バックグラウンドがあって(body）その真ん中に画像を配置することはできたんですが、真ん中が星で囲まれた縁の画像で、その中にヘッダーなどの画像をいれていきたいんですが、いれていきたいんですが、縁の中に画像でpositionで配置したんですが、ブラウザで見るとウインドウを広げたら星で囲まれた縁の画像が動いてしまいます。いじっていたら、反対にヘッダー画像が動いてしまうこともあります。どうしたら直せますか？ 一番後ろのバックグラウンドはbackground-image:url(../img/.water.png); background-attachment: fixed; }してるので同時には動かないです。。