ベストアンサー

大きな画像をつかったHPをどのブラウザでも中央に

2012/09/18 15:40

ヘッダー画像を１９００ピクセルボディーに９５０ピクセルの画像を並べたホームページを作りました。大きなブラウザ（画面）で見るときれいに中央に見えるですが小さなブラウザで見ると画像がおおきいので右側が見えず右にスクロールさせたないとなりません。どうすれば、どのブラウザでも全体が中央にして見ることができるでしょうか？どなたかお教えくださいましたら大変助かります。すいません。

sibako
お礼率88% (128/144)

ホームページ作成ソフト
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/09/19 19:43 回答No.3

恐縮される必要はありません。クライアントの様々な要望を聞いて、それがなにを意味するかを判断して極力対応し、希望が理不尽な場合は説得する。　が仕事ですから(^^)。その良い練習場所と心得ています。　まず、されたいことがさっぱりわからないのです。＞ヘッダー画像を１９００ピクセル＞その下のボディーに９５０ピクセルの画像＞を並べたウェブページを作りました。　　　　　　^^^^^^ 　なのですが、これだと、 ■■■■ W=1900 　 □□　 W=950 と判断せざるを得なかったのです。　もし、＞ヘッダー画像を１９００ピクセルを、＞ボディーには９５０ピクセルの画像＞を横に並べたでしたら ■■■■　W=1900 □□□□　W=950×2 と解釈するかも　No.2のお礼で、ますます訳がわからなくなりました。 HTMLの<body>要素内は、基本的に下記のいずれかの構造であるべきです。HTML5で書くととてもわかりやすいのでHTML5で説明します。 <body> 　<header> 　　ヘッダー　</header> 　<section> 　　本文　</section> 　<footer> 　　フッタ　</footer> </body> 　HTML4.01でしたら、それぞれが<div class="header">/<div class="section">となります。　ここで質問の内容を読み替えると『ヘッダーの下に本文を並べ、ヘッダーに1900pxの背景画像、本文の背景950pxの画像を使用する。背景はブラウザの幅に関わらずすべて表示する。』 ★通常はこんなおばかなことはしません。1900px幅の画像なんてそのままのサイズで見れる人は極めてわずかです。そんな画像を見るためにサイトを訪問する人はいないでしょう。　通常は、せいぜい900px程度で収めます。よく見るデザインはヘッダー部分を最小780px程度、最大を1028px程度で画面幅いっぱいに表示する。その下の本文は、幅をウィンドウ幅の50%(この場合最大で510px程度)として、左右には目次や、本文と直接関係ない記事を配置して、目玉を左右に振らなくても読めるようにする。　多くの新聞社などが採用しているデザインです。　その場合の指定方法がNo.2の回答で示した方法です。

質問者

お礼 2012/09/21 14:56

何回もご親切にありがとうございました。再チャレンジしてみます。本当に、本当にありがとうございます。！！！！！！

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/09/18 20:17 回答No.2

画像サイズをウィンドウ幅に合わせて伸縮させてください。その場合、画像は置換インライン要素ですから一旦ブロック要素にして親コンテナブロックの幅を参照できるようにしたのち、widthを親コンテナブロックの幅に対して指定し、heightの値はautoにしてください。　ただ、その画像は背景(多分背景だと思う)でしたら、背景で指定して位置を50%,50%にすることになるでしょう。--そうすべきです。その場合CSS3対応のブラウザに対して、background-sizeを指定するときれいに収まるでしょう。

質問者

お礼 2012/09/19 18:09

ご丁寧にお教え下さりありがとうございます。実は背面にしてみたのですが下の画像の真ん中と背面にした絵の真ん中があいませんでした、ずれるそれと、背面で入れたい画像がもう一枚あって２つ背面画像を入れる方法が分からなかったので、背面にしませんでした（涙）すいません。お忙しいところお教えくださって大きな画像を中央だけ切って、下の画像と同じ大きさにして背面に作りかえた絵をいれようかとも思ったのですが・・・お忙しいのに、本当に、本当にすいませんでした。

weakweak
ベストアンサー率34% (350/1003)

2012/09/18 19:36 回答No.1

cssで画像の横幅をパーセントで指定して上げるといいです。画像がウィンドウ幅か親要素に対しての比率で表示されるようになります。その際縦のサイズを指定してしまうとキレイに拡大縮小されませんので注意してください。あとは画像の最大サイズも指定しておくともっといいかもしれません(1900pxもあれば一般的なPCから見る前提ならどんなに拡大されても問題ないと思いますが)。 img { width: 80%; max-width: 1900px; }

質問者