- ベストアンサー
背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法
- ブラウザの横幅が1024の際、背景画像と上に表示されている画像を画面中央に表示する方法について教えてください。
- ブラウザの横幅が1000以下の際、背景画像と上に表示されている画像を左側を基準に表示する方法について教えてください。
- 現在、背景画像と上に表示されている画像の表示方法で問題が発生しています。改善策を教えてください。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ANo.2です。 > ここは「ブロック内でセンタリング」ではなく、「ブラウザの横ウィンドウ幅でセンタリング」となります。 > 下記のサイトに記載されているように、ブラウザの横ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているようにしたいです(ブラウザの縦ウィンドウ幅は本件には関係ありません)。 > http://www.lucky-bag.com/appendix/centering-elements/centering.html その他の補足と、上記サイトを見て、イメージが掴めました。 上記サイトの画像は、"position: absolute;"でtopとleftの位置を50%とする事でウィンドウ（画面）に対して常に上下左右の中央に配置される様にしてあります。これと同様の事をやりたいだけなら簡単ですが、お望みの表示結果に関していくつか確認させて頂きたい事があります。 まずは下記のサンプルを試してみて下さい。 ---------------------------------------------------------------------- 【修正版サンプル(2)】 ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { text-align: center; margin:0; padding:0; } #top_img_wrapper, #wrapper_index_up, #wrapper_index_bottom { width: 1000px; margin: 0 auto; text-align: left; } #header { background-color: red; } #top_img_wrapper { background: url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif) center center no-repeat; } #top_img { position:absolute; width: 139px; height: 92px; top: 0; left: 50%; margin-left: -70px; } --> </style> </head> <body> <div id="wrapper_index_up"> （wrapper_index_upの領域 ここから） <div id="header">ヘッダー</div> （wrapper_index_upの領域 ここまで） </div> <div id="top_img_wrapper"> （top_img_wrapperの領域 ここから） <div id="top_img"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="中央固定表示させる画像X" width="139" height="92" /></div> <p class="hoge">top_img_wrapper内で画像Xの下に表示する最初の子要素（テキストなど）</p> （top_img_wrapperの領域 ここまで） </div> <div id="wrapper_index_bottom"> （wrapper_index_bottomの領域 ここから） <div id="contents">コンテンツ</div> <div id="footer">フッター</div> （wrapper_index_bottomの領域 ここまで） </div> </body> </html> ---------------------------------------------------------------------- 前回のサンプルからの修正点は以下のみです。 【1】背景画像を指定する#top_img_wrapperとは別個に、中央固定表示画像を挿入する為だけのブロック#top_imgを追加。 【2】#top_img内で、画像Xをbodyに対しての絶対配置として指定。（ここの手法については参考サイトにポイントの解説が載っているので各プロパティの設定の理屈は省略します） これで#top_img_wrapperの位置や幅とは関係なく、#top_imgは常に画面の左上を基点とした絶対配置になる為、水平方向はウィンドウ幅に対して常にセンタリングされる事になります。ただし、質問者様の場合は参考サイトと違って、画像Xの上下にヘッダー・コンテンツ・フッターというブロックが存在していますから、それらと、画像Xが（参考サイトの様に制限なく）重なってしまっては困るのでは？現に、上記サンプルでは、垂直方向に対する絶対位置を0にしてしまっているので、画面の上端にくっついてしまい、ヘッダーの上に画像Xが重なってしまう状態になっています。 これらを回避する為には、更にいくつかの条件を明確にして頂く必要があります。 (1)#top_imgの描画開始位置は、上からどれだけの位置にあればよいのか？例えば、ヘッダーを収める#wrapper_index_upの高さが50pxと決まっており、画像Xはそのすぐ下に、という事であれば、topプロパティの位置を指定する。 #wrapper_index_up { height: 50px; } #top_img { top: 50px;←修正 } (2)#top_img_wrapperに表示させたい要素は、実は背景画像しかないのか？そうであれば、背景画像の全体像が必ず描画される様に、#top_img_wrapperに背景画像と同じ高さを指定しておく必要がある。例えば質問文中のソースの実寸通りであれば、下記の様に。 #top_img_wrapper { height: 92px;←追加 } (3)(2)と違い、#top_img_wrapperにはテキストなどの子要素があり、画像Xの下から表示させたい、というのであれば、#top_img_wrapperの高さの確保を最低92px以上に変更した上で、#top_img_wrapperの中で画像Xの下に配置する要素にはmargin-topなどで画像X分の余白を上方向に取ってから描画を開始する様にする。 #top_img_wrapper { min-height: 92px;←追加 _height: 92px;←min-heightが無効なIE6用ハック } #top_img_wrapper p.hoge { margin: 92px 0 0 0; } …という感じですが。いかがでしょうか。
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
今ひとつ、質問者様が望まれているレイアウトのイメージが掴めないのですが。 > 背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたい この「固定」「中央」というのはどこを基点にしていますか？ ソースを見ると、主立ったコンテナブロック（<div id="○○○">～</div>）に対して1000pxという幅を決め打ちしていますので、 (1)コンテンツ全体の幅は1000pxで固定。 (2)コンテンツの描画枠(1)自体は、ウィンドウサイズ（横幅）に対して常にセンタリング（ウインドウの左右両端から均等に余白がある）の状態。 (3)(2)の中に入るテキストなどは(2)の中で左寄せ。 (4)ただし、<div id="top_img_wrapper">～</div>に対しては背景画像をリピートさせずに水平・垂直両方向からセンタリングさせ、子要素のimg自体はセンタリング。 …という事でしょうか？ > 背景画像も常に中央に表示されてしまいます。 現在の指定では、#top_img_wrapperの背景画像に対して"background-posiiton: center;"としていますから当然ですね。 ちなみに、ANo.2の方がアドバイスされた"background-attachment: fixed;"を使うと、文字通り背景画像が”固定”されますので、どんなにスクロールが発生しても背景画像はウィンドウサイズそのものに対して上下左右からの中央にがんと張り付いたままの状態になり、その他のコンテンツだけが上滑りしていく様な状態になりますが。 > 1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。 > 2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。 1024px”以上”という事ではなく？また、1001px～1023pxの間の挙動は？ > 3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。 ここの主語が抜けてますが、「何の要素A」を「何の要素B」の”左側を基準”にするのでしょうか？ > 4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。 これは2と同じなわけですから、<div id="top_img_wrapper">～</div>内の画像は、ブラウザの横幅に関係なくそのブロック内でセンタリングという事ですよね？ 「【現状】」が「1,2,4は出来て」おり且つ「3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一」にできていない、という状態であるならば、単純に下記の様な状態にしたいだけなのでしょうか？ ---------------------------------------------------------------------- 【修正版サンプル】 ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { text-align: center; margin:0; padding:0; } #top_img_wrapper, #wrapper_index_up, #wrapper_index_bottom { width: 1000px; margin: 0 auto; text-align: left; } #header { background-color: red; } #top_img_wrapper { background: url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif) center center no-repeat; } #top_img_wrapper img { display: block; margin: 0 auto; } --> </style> </head> <body> <div id="wrapper_index_up"> （wrapper_index_upの領域 ここから） <div id="header">ヘッダー</div> （wrapper_index_upの領域 ここまで） </div> <div id="top_img_wrapper"> （top_img_wrapperの領域 ここから） <img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" /> <p>ここに入る文言を、上下の「ヘッダー」「フッター」という文言と同様に左揃えで表示したいという事ですか？</p> （top_img_wrapperの領域 ここまで） </div> <div id="wrapper_index_bottom"> （wrapper_index_bottomの領域 ここから） <div id="contents">コンテンツ</div> <div id="footer">フッター</div> （wrapper_index_bottomの領域 ここまで） </div> </body> </html> ---------------------------------------------------------------------- …こういう事ではなく？ コンテンツ全体の幅が1000pxなわけですから、ウィンドウサイズが1000px以下であれば左右に余白が生じないのでウィンドウの左端にくっついた状態になりますし、1000pxより大きければその分左右に均等に余白ができますから、ウィンドウに対してセンタリングされている状態に見えます。 ご希望と解釈が異なる様でしたら、具体的に補足をして下さい。 これは蛇足ですが、せっかく質問者様は既にCSSでのレイアウトに取り組んでおられるのですから、今更table要素でレイアウトをするという本来の用途から大きく逸脱した方法を採用する必要は全くありません。”中央固定”とか”左側基準”とかの位置決めは、table（表）が担う役目ではありませんので。
お礼
ありがとうございます。 補足要求の件ですが、下記となります。 (1)その通りです。 (2)その通りです。 (3)その通りです。 (4)その通りです。 > 1024px”以上”という事ではなく？また、1001px～1023pxの間の挙動は？ 正確には1000px以上という表現が適切だったと思います。 申し訳ございません。 > ここの主語が抜けてますが、「何の要素A」を「何の要素B」の”左側を基準”にするのでしょうか？ 「top_img_wrapperの背景画像の左余白」を「wrapper_index_up」の左側を基準としたいです。 ブラウザの横ウィンドウ幅を縮めても、ヘッダの赤い背景色の左端とtop_img_wrapperの背景画像の左端とのX軸の間隔を同一に保ちたいです。 > これは2と同じなわけですから、<div id="top_img_wrapper">～</div>内の画像は、ブラウザの横幅に関係なくそのブロック内でセンタリングという事ですよね？ ここは「ブロック内でセンタリング」ではなく、「ブラウザの横ウィンドウ幅でセンタリング」となります。 下記のサイトに記載されているように、ブラウザの横ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているようにしたいです(ブラウザの縦ウィンドウ幅は本件には関係ありません)。 http://www.lucky-bag.com/appendix/centering-elements/centering.html ただし、上記のような動作をしたいのはあくまで<img>タグの画像のみとなります。 【修正版サンプル】をためさせて頂いたところ、ブラウザのウィンドウ幅が1000px以上の際はこの動作で良いのですが、1000px未満になった際は希望の動作となっておりませんでした。 【修正版サンプル】を表示した状態でブラウザの横ウィンドウ幅を小さくしてみると、imgタグの画像が画面右側に表示されると思います。 上記リンク先の「要素を常に画面の中央に配置」では常にブラウザの中央に表示されると思います。 imgタグは上記リンク先のような状態で、imgタグの後ろの背景画像は【修正版サンプル】のような動作をしてほしいと思います。 上記で意図は伝わりましたでしょうか？ 以上、よろしくお願いします。
- lemon530
- ベストアンサー率35% (13/37)
これってもしかしてＩＢＭホームページビルダーの”どこでも配置モード”っていうのでしょうか？ ご質問とソースを見て思ったのですが、 標準モードでやれば、画面サイズには関係なく、いともたやすいことだと思うのですが？ つまり、 背景画像の固定は、スタイルシートで <STYLE type="text/css"> <!-- BODY{ background-image : url(haikei.gif); background-repeat : no-repeat; background-attachment : fixed; background-position : center;} --> これはいいとして。 ちなみに、ＨＴＭＬの<BODY>タグでの背景の固定の方法もありますが、 スクロールするとパソコン環境によっては引きずられるようになる場合がありますので、 スタイルシートでの固定の方がいいかと思います。 画像の中央固定とか、テキストは左側基準とかは、画面の大きさに関係なく、 表<TABLE>などを使えば超簡単というか、ページ作りの初歩の初歩の話です。 あまりに簡単なことなのであえて書かないほうがよいかと思います。 つまり、余計なお世話かもしれないですが、このようにソースから研究されている人ですから、”どこでも配置モード”でのページ作りは即刻やめられて、ホームページビルダーでも何でもＯＫですので、標準モードでソースを見ながらＨＴＭＬタグを習得をしながらページ作りに入られたほうが絶対に将来のためです。正直、こんなことしているのは時間のムダだと思います。 そんなことを感じましたので失礼かと思いましたが回答させてもらいました。 私は標準モードでソース編集と併用してやっています。是非そうしてください。
お礼
ありがとうございます。 使用しているツールはDreamweaverとなります。 教えていただいたソースを適用しましたが、やりたい事の3は満たせませんでした。 教えていただいたソースを移植したものは下記となりますが、どこが間違っているかご教示いただきたいと思います。 【ソースコード】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { text-align: center; margin:0; padding:0; background-image : url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif); background-repeat : no-repeat; background-attachment : fixed; background-position : center; } #wrapper_index_up, #wrapper_index_bottom { margin: 0 auto; text-align: left; } #wrapper_index_up, #wrapper_index_bottom, #header, #contents, #footer { width: 1000px; } #header { background-color:red; } --> </style> </head> <body> <div id="wrapper_index_up"> <div id="header">ヘッダー</div> </div> <div id="top_img_wrapper"> <img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" /> </div> <div id="wrapper_index_bottom"> <div id="contents">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html> 以上、宜しくお願いします。
補足
「この回答へのお礼」のソースに一部意図しない変換がされていました。 そのため、質問欄のソースを元にしていただければと思います。 以上、宜しくお願いします。
お礼
ありがとうございます。 【修正版サンプル(2)】で意図した動作になっていると思います。 なお確認事項の件ですが、ヘッダー・コンテンツ・フッターと画像Xが重なると困る為、(1)の対応を実施させていただきました。 また(2)の通り、#top_img_wrapperには背景画像しかありません。 そのため、heightを指定させていただきました。 一通り見た感じでは今回ご教示いただいたソースで私のやりたい事は出来ると思いますので、正式にウェブサイトに適用してみようと思います。 組み込みが終わり次第、正式なご回答を差し上げたいと思います。 大変申し訳ございませんが、2週間位後になりそうです。 その際、「良回答20pt」を付加させていただきたいと思います。 以上、宜しくお願いします。
補足
ありがとうございます。 正式にウェブサイトに適用してみた所、正常に動作しました。