出産前後の痔にはご注意!

背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。
そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。


【やりたい事】
1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。
2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。
3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。
4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。


【現状】
1,2,4は出来ています。
ただ、3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一にする方法が分からず、画面中央に表示されてしまいます。


【ソースコード】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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;
}
#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;
}
#top_img_wrapper {
background-image:url(http://cdn.oshiete.goo.ne.jp/images/top/search_b …);
background-repeat:no-repeat;
background-position: center;
}
-->
</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>

どうかよろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

ANo.2です。



> ここは「ブロック内でセンタリング」ではなく、「ブラウザの横ウィンドウ幅でセンタリング」となります。
> 下記のサイトに記載されているように、ブラウザの横ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているようにしたいです(ブラウザの縦ウィンドウ幅は本件には関係ありません)。
> http://www.lucky-bag.com/appendix/centering-elem …

その他の補足と、上記サイトを見て、イメージが掴めました。
上記サイトの画像は、"position: absolute;"でtopとleftの位置を50%とする事でウィンドウ(画面)に対して常に上下左右の中央に配置される様にしてあります。これと同様の事をやりたいだけなら簡単ですが、お望みの表示結果に関していくつか確認させて頂きたい事があります。
まずは下記のサンプルを試してみて下さい。
----------------------------------------------------------------------
【修正版サンプル(2)】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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_b …) 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;
}

…という感じですが。いかがでしょうか。

この回答への補足

ありがとうございます。
正式にウェブサイトに適用してみた所、正常に動作しました。

補足日時:2009/03/22 22:50
    • good
    • 0
この回答へのお礼

ありがとうございます。
【修正版サンプル(2)】で意図した動作になっていると思います。

なお確認事項の件ですが、ヘッダー・コンテンツ・フッターと画像Xが重なると困る為、(1)の対応を実施させていただきました。
また(2)の通り、#top_img_wrapperには背景画像しかありません。
そのため、heightを指定させていただきました。

一通り見た感じでは今回ご教示いただいたソースで私のやりたい事は出来ると思いますので、正式にウェブサイトに適用してみようと思います。
組み込みが終わり次第、正式なご回答を差し上げたいと思います。
大変申し訳ございませんが、2週間位後になりそうです。
その際、「良回答20pt」を付加させていただきたいと思います。

以上、宜しくお願いします。

お礼日時:2009/03/04 18:34

今ひとつ、質問者様が望まれているレイアウトのイメージが掴めないのですが。



> 背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたい

この「固定」「中央」というのはどこを基点にしていますか?
ソースを見ると、主立ったコンテナブロック(<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-transitio …
<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_b …) 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(表)が担う役目ではありませんので。
    • good
    • 0
この回答へのお礼

ありがとうございます。

補足要求の件ですが、下記となります。

(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-elem …

ただし、上記のような動作をしたいのはあくまで<img>タグの画像のみとなります。

【修正版サンプル】をためさせて頂いたところ、ブラウザのウィンドウ幅が1000px以上の際はこの動作で良いのですが、1000px未満になった際は希望の動作となっておりませんでした。
【修正版サンプル】を表示した状態でブラウザの横ウィンドウ幅を小さくしてみると、imgタグの画像が画面右側に表示されると思います。
上記リンク先の「要素を常に画面の中央に配置」では常にブラウザの中央に表示されると思います。
imgタグは上記リンク先のような状態で、imgタグの後ろの背景画像は【修正版サンプル】のような動作をしてほしいと思います。

上記で意図は伝わりましたでしょうか?

以上、よろしくお願いします。

お礼日時:2009/03/04 00:48

これってもしかしてIBMホームページビルダーの”どこでも配置モード”っていうのでしょうか?


ご質問とソースを見て思ったのですが、
標準モードでやれば、画面サイズには関係なく、いともたやすいことだと思うのですが?

つまり、
背景画像の固定は、スタイルシートで
<STYLE type="text/css">
<!--
BODY{
background-image : url(haikei.gif);
background-repeat : no-repeat;
background-attachment : fixed;
background-position : center;}
-->
これはいいとして。
ちなみに、HTMLの<BODY>タグでの背景の固定の方法もありますが、
スクロールするとパソコン環境によっては引きずられるようになる場合がありますので、
スタイルシートでの固定の方がいいかと思います。

画像の中央固定とか、テキストは左側基準とかは、画面の大きさに関係なく、
表<TABLE>などを使えば超簡単というか、ページ作りの初歩の初歩の話です。
あまりに簡単なことなのであえて書かないほうがよいかと思います。

つまり、余計なお世話かもしれないですが、このようにソースから研究されている人ですから、”どこでも配置モード”でのページ作りは即刻やめられて、ホームページビルダーでも何でもOKですので、標準モードでソースを見ながらHTMLタグを習得をしながらページ作りに入られたほうが絶対に将来のためです。正直、こんなことしているのは時間のムダだと思います。

そんなことを感じましたので失礼かと思いましたが回答させてもらいました。
私は標準モードでソース編集と併用してやっています。是非そうしてください。

この回答への補足

「この回答へのお礼」のソースに一部意図しない変換がされていました。
そのため、質問欄のソースを元にしていただければと思います。

以上、宜しくお願いします。

補足日時:2009/03/02 20:37
    • good
    • 0
この回答へのお礼

ありがとうございます。
使用しているツールはDreamweaverとなります。

教えていただいたソースを適用しましたが、やりたい事の3は満たせませんでした。

教えていただいたソースを移植したものは下記となりますが、どこが間違っているかご教示いただきたいと思います。

【ソースコード】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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_b …);
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>

以上、宜しくお願いします。

お礼日時:2009/03/02 20:34

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q

CSSの質問です。

<ul>と<li>でリストマークを消すために
list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか?

どちらに設定してもリストマーク消えますけど。
どちらに設定したら規格上違反とかありますか?

Aベストアンサー

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Generated content, automatic numbering, and lists( http://www.w3.org/TR/CSS2/generate.html#propdef-list-style )]より

 OLとUL要素からLI要素に "のlist-style 'の値を転送し継承します。これは、リストのスタイル情報を指定するための推奨方法です

 このことから、ulないし、olに指定すると、その子孫のliに引き継がれるようですし、それが推奨されていて、どのブラウザもそれに従うようです。実際、最初にも書きましたようにブラウザのデフォルトの捨て要るシートもulに対して指定しているようです。

 listのスタイルシートは他にも問題があって、liを字下げして表示するブラウザが多いのですが、その字下げをmarginを使うか、paddingを使うか、それをul,olに対してか、liに対してかもブラウザによって差があります。
 そこで、私は、
div.nav ul,div.nav ul,div.nav li{display:block;list-style:none;margin:0;padding:0;}
といったんリセットしてから、様々な指定を付け加えていくことにしています。

 文法的にも正しいし、かつブラウザ間の実装の差も吸収できますから・・

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values fr...続きを読む


人気Q&Aランキング