こんにちは。
自分のホームページの背景に写真を選んだため、日記などでスクロールしていると目が回ってしまうんです。背景を固定し、文字だけをスクロールさせる事はできないのでしょうか?
御回答をよろしくお願いします。

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

A 回答 (3件)

同じような答えですが、私はスタイルシートを使います。


</HEAD>の前に
<STYLE TYPE="text/css"><!--
BODY{ background-image:url("画像の名前");
background-repeat : no-repeat ;
background-attachment : fixed;
background-position: bottom right;}
-->
</STYLE>
画像の名前というのはback.jpgとかです。
上記の場合は画面に対して右の下に指定しています。
下から3行目のbottom rightのところです。
上が良ければbottomでなくてtopとか。この行消すと
左上に自動的に配置されます。
素材屋さんなどに説明ありました。
http://www.blue-moon.jp/graphics/bg_style01/inde …

参考URL:http://www.blue-moon.jp/
    • good
    • 0
この回答へのお礼

スタイルシートかぁー。
よーし、やってみます!
ありがとうございました。

お礼日時:2002/04/16 02:12

私も普段はスタイルシートを使うのですが、ネスケだとスタイルシートが無効になることが多いので、無難に背景画像の固定をするならばBODYタグでの指定がいいと思います。



&lt;BODY background="***.gif" bgproperties="fixed">
    • good
    • 0
この回答へのお礼

なるほどなるほど。
ネスケだとみれないときがあるのかぁ。
ありがとうございました。

お礼日時:2002/04/16 02:13

たとえば、次の例のようなソースにして、


『bgproperties="fixed"』
を使う方法があると思います。

--
<BODY background="○○○" bgcolor="○○○" bgproperties="fixed">
・・・・・
</BODY>
    • good
    • 0
この回答へのお礼

ありがとうございました。
なんとかやってみようとおもいます!

お礼日時:2002/04/16 02:11

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

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

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

Qなぜ石油販売価格は生協が基本なのでしょうか?。

いつもこの時期になると生協の石油販売価格がニュースなどで流れます。
石油会社は生協の価格を基本として価格設定してるようです。
生協の石油販売量ではそれほど多いとは思えないのですが、どうして毎年生協の価格が公表されるのでしょうか?。

Aベストアンサー

生協というよりは札幌生協ですね。
「石油会社が生協の価格を基本として価格設定する」というよりは、「大手石油元売と札幌生協との交渉結果がそのシーズンの灯油価格の指標として注目される」というのが正しい表現だと思います。

そもそも石油業界にはチャンピョン交渉という考え方があり、大手供給者と大手需要家が業界を代表して、都度需給バランスや国際市況を反映した価格交渉を行い、他の供給者と需要者はその結果を自分たちの取引価格の参考とする習慣があります。
現在でも比較的機能しているのはC重油価格で、東京電力が低硫黄C重油、王子製紙が高硫黄C重油のチャンピョン交渉を行います。トラック用軽油に関しては従前は西濃運輸の価格が有名でした。この並びで灯油に関しては日本最大の灯油需要家の消費者団体である札幌生協の価格が注目されていたわけです。
が、灯油や軽油に関しては、東京工業品取引所に先物市場が創設され、従来の大手企業や消費者団体が需給情報や市況情報を握って交渉するスタイルよりも、もっと透明な(と見える)価格決定メカニズムが確立されつつありますので、かつてほど注目されなくなりました。

生協というよりは札幌生協ですね。
「石油会社が生協の価格を基本として価格設定する」というよりは、「大手石油元売と札幌生協との交渉結果がそのシーズンの灯油価格の指標として注目される」というのが正しい表現だと思います。

そもそも石油業界にはチャンピョン交渉という考え方があり、大手供給者と大手需要家が業界を代表して、都度需給バランスや国際市況を反映した価格交渉を行い、他の供給者と需要者はその結果を自分たちの取引価格の参考とする習慣があります。
現在でも比較的機能しているのはC重...続きを読む

Q背景固定、文字がスクロールするHPのタグは?

よく背景(壁紙)が固定で、文字や、画像だけスクロールバーでスクロールできるHPを見かけますが、HTMLタグをご存知でしたら、できれば初心者向けで回答お願いします。

Aベストアンサー

<BODY BGPROPERTIES=FIXED>でできると思います。

このような場合、メニューで表示-ソースからソースコードを見てみると良いですよ。

Q生協の仕組みがいまいち理解できません(×_×)

生協を利用されている方、多いと思います。
私も第2子の出産を機に、外に出るのが大変になってしまったので、利用を検討していました。

私の住む地域で生協を検索し、資料を請求したら、「資料を持って説明に伺います」と言われ、
担当の方が来ました。正直、営業に来たのだと思いました。資料だけでいいのにと。
が、どうせ加入するつもりだったので、その場で加入しました。
私に生協を勧めてくれた友達と話しているうちにわかったのですが、私の加入した生協は、
友達が利用している生協と、グループが違う??ようです。
(ちなみに私は東海、友達は関西です。)
生協ってたくさんあるのでしょうか。1つの会社と支部のようなイメージだったのですが。
調べてみると、私の住む地域で、生協が2つあることに気付きました。
片方はネットに情報が多く、いろんな活動をしていることがわかりました。
その生協は、友達が加入しているところと、同じグループのようです。
私の加入した生協を検索しても、情報が少なく、何だか不安になってきました。
出資金も違いました。近所でよく見かける生協のトラックは、私が加入したところの生協ではありません(泣)
そちらの生協の資料も請求してみました。大差ない感じもしますが、よく見ると、
商品のco-opのロゴが同じ!?です。あれ?という感じです。

ちなみに、引っ越して間もないので、近所に知り合いはいません。

生協は全部ロゴ(co-op)が同じなのでしょうか?
何箇所も生協がある意味は・・・?サンクスの近くにローソンがあって、
どちらも、じゃがりこを売ってる、というのと同じですか?←例えがおかしくてすみません。
どなたかわかりやすく教えて頂けないでしょうか・・・。

生協を利用されている方、多いと思います。
私も第2子の出産を機に、外に出るのが大変になってしまったので、利用を検討していました。

私の住む地域で生協を検索し、資料を請求したら、「資料を持って説明に伺います」と言われ、
担当の方が来ました。正直、営業に来たのだと思いました。資料だけでいいのにと。
が、どうせ加入するつもりだったので、その場で加入しました。
私に生協を勧めてくれた友達と話しているうちにわかったのですが、私の加入した生協は、
友達が利用している生協と、グループ...続きを読む

Aベストアンサー

生協は、法律により県をまたがることができないので、県ごとに存在します。
また、県内に複数あります。

県をまたげないので、グループを組んでいることもあります。
事業連合といった言い方をします。

生協はそれぞれに特色があり、それ故に県内に複数あるものです。
本来でしたら、それを比較して自分が利用したい生協を選ぶことになります。

もちろん複数加入することも可能ですし、その結果比較検討して脱退することも可能です。
(出資金は、入会金ではありません。生協への出資です。よって、脱退の際は返金されます)

ごく一般的な話ですべての県にあてはまるわけではありませんが、
規模が県内1位の生協は、規模を活かして価格が安めで買いやすく、お店も持っているところが多いです。
2位以降は、それぞれの特色(商品へのこだわりなど・・価格高め・個人宅配に注力など)を持っています。

首都圏の場合ですが、
規模1位のグループが、"コープネット事業連合"です。
コープとうきょう・さいたまコープなどが加盟しています。
http://www.coopnet.or.jp/
規模2位のグループが、"パルシステム生活協同組合連合会(旧首都圏コープ事業連合)"です。
http://www.pal.or.jp/

例えば愛知県でしたら、東海コープ事業連合(めいきん生協など)があります。

近接県とは同じグループの可能性はありますが、地域が違うとグループそのものも違います。

生協は、法律により県をまたがることができないので、県ごとに存在します。
また、県内に複数あります。

県をまたげないので、グループを組んでいることもあります。
事業連合といった言い方をします。

生協はそれぞれに特色があり、それ故に県内に複数あるものです。
本来でしたら、それを比較して自分が利用したい生協を選ぶことになります。

もちろん複数加入することも可能ですし、その結果比較検討して脱退することも可能です。
(出資金は、入会金ではありません。生協への出資です。よって、...続きを読む

Q背景がスクロールせずコンテンツのみスクロールするページについて

Dreamweaver4を使ってHPを創っています。半年くらいで3.4つのHPを創った程度のものです。
最近、背景はスクロールせず、コンテンツだけがスクロールするページを見るのですが、そのようなページを創りたいと思っていますが、Dreamweaver4でできるのかどうか、どうすれば出来るのか、またほとんどのブラウザーで確認できるのか、などどんなことでも教えてください。よろしくお願いします。

Aベストアンサー

CSSで指定できます。
私が使っているDREAMWEAVERは3なのですが、たぶん4でも同じだと思うので、手順を書きますね。

1.画面上で右クリック、[CSSスタイル][スタイルシートの編集]を表示
2.[新規作成]押下
3.[HTMLタグの再定義]を選択し、下のプルダウンから[body]を選択
4.[カテゴリ][背景]を選択
5.[背景イメージ]にセットしたい画像を指定し、
 [リピート]=「リピートなし」
 [添付]=「固定」
 を指定
以上で実現できるはずです。

CSSに対応しているブラウザは、再現できたはずです。
詳細バージョンは忘れてしまいました。(^^;;
たぶん、ネスケ、IEともに4以上ならOKのはずです。

Q生協の使い勝手

今生協の勧誘を受けてるんですが、今までで生協と関わった事が無いので、良いモノなのか、悪いモノなのかも判りません。
生協経験者、もしくは元生協経験者の方にお聞きしたいのですが、生協の良い点、悪い点教えてください。
元経験者の方はなぜ辞められたのかも、差し支えなければ教えてください。

Aベストアンサー

 ウチでは近所にあったスーパーが倒産してこのかた生協に注文することが多くなっています。

 注文する品目としては惣菜やお肉など冷凍食品や要冷蔵のもの、お菓子類やバター、ソースなど、さらにティッシュ、トイレットペーパー、それにネコのキャットフードまで......とにかくなんでもかんでも状態です。

 別段品質が悪いといった感想もなく、賞味期限も問題なく、価格的にもさほど不満もなく、まして届けてくれる便利さもあるし、一度など包装が崩れていたクレームにもただちに対応してくれました。

 そんなわけで、なにかと利用度はかなり高いのですが、週一回の配達という点と、ちょっと高級品、ちょっとコダワリの商品などといったものでは満足度が低いので、駅前の大型スーパーやデパートまでクルマを走らせるということも適当に兼ね合わせています。

Q背景を固定した時の表の背景

こんにちは。HPを制作し始めたばかりの初心者です。

質問です。
背景をこんな感じて固定した時
<STYLE type="text/css">
<!--
BODY{
background-image : url(○○.jpg);
background-repeat : no-repeat;
background-attachment : fixed;
background-position : 90% 50%;
}
-->
作ってる表の背景画像が無効になっちゃいます。
なんか間違ってるんでしょうか???
お答えを頂けると有り難いのですが。

Aベストアンサー

理屈からいくとBODYの背景が1番後ろで、TABLEの背景が2番目に後ろで、最前面がテキストとなるわけなので、ページ全体の背景画像とテーブル内の背景画像は表示されるハズなのですよね。

で、試しに
<style type="text/css"><!--
body {
background : #fffff0 url("○○.gif") 0% 0% no-repeat fixed ;}

th {
background : #3b3b3b url("○○.jpg") repeat ;}
td {
background : #6699cc url("○○.gif") 50% 50% repeat-x scroll}
--></style>
<body>
<table align="left" height="10%" width="100%" border="2" cellspacing="0" cellpadding="2">
<th rowspan="11">test</th>
<td>td-test</td></table></body>

というのを作ってみました。これを改造して作ってみてください。
もしかして、CSSでTD要素に背景画像を固定させて、今度はTD要素の属性で背景画像を並べる、ということでしたらレンダリングされないです。そもそもその使い方はかなりおかしいですし。

あと、Netscape社のブラウザではBODY要素以外の背景画像以外はレンダリングがおかしくなることが多いです。

理屈からいくとBODYの背景が1番後ろで、TABLEの背景が2番目に後ろで、最前面がテキストとなるわけなので、ページ全体の背景画像とテーブル内の背景画像は表示されるハズなのですよね。

で、試しに
<style type="text/css"><!--
body {
background : #fffff0 url("○○.gif") 0% 0% no-repeat fixed ;}

th {
background : #3b3b3b url("○○.jpg") repeat ;}
td {
background : #6699cc url("○○.gif") 50% 50% repeat-x scroll}
--></style>
<body>
<table align="left" height="10%" width="100%" bor...続きを読む

Q学生でなくても大学生協で申し込めば、予備校講座を生協価格で申し込めるのか?

いつもお世話になっております。
表題のままの質問です。

予備校講座は、予備校窓口や書店窓口で申し込むより、生協で申し込んだ方が数千円程安くなるのですが、すでに卒業してしまった後でも、(母校の)生協で申し込めば生協価格で申し込むことができるのでしょうか?
生協で申し込む際、学生証の提示など求めらますか?

御存知の方、教えてください。

Aベストアンサー

申し込める所も有れば、申し込めない所もある。です。

学校によって違いますので、母校で聞いてください。

Q★★★フッター最下部固定/スクロール時も常に最下部に固定させる方法

【OS】Windws XP HomeEdition
【ブラウザ】InternetExplorer7
【参照URL】http://nowtester.web.fc2.com/tester.html

ご覧頂きまして誠に有難う御座います。
皆様のお知恵を貸して頂ければ幸いです。

現在、下記URLの様なHTMLでHPを制作しております。
http://nowtester.web.fc2.com/tester.html
当方の意向として、フッターに該当するコピーライト表記を、
どのサイズのモニターから閲覧しても、
画面最下部に固定表示したいと考えております。
(スクロールが発生した際に見える位置の最下部に常に固定させたい)

現在のページも、一見、開いた際には最下部に固定表示されますが、
画面のリサイズを実施した場合、最下部に固定されていたフッターは、
最初に開いた画面の最下部として表示された位置で固定されており、
スクロール時ズルズルと画面と一緒にズリ上がってしまいます。

別サイト様の過去投稿に参考になりそうなモノが有りましたが、
現在私が書いているHTMLへの実装が上手く行きませんでした。
http://gac.kir.jp/21/13599(りゅう様の最後の投稿)

意図としては↑の様なモノを現在のHTMLに実装出来ればベストですが、
私の挿入位置が悪いのか上手く行きません。
具体的にどの様に書き足せば意図するモノが完成するか、
ソースの組み方を教えて頂けますと幸いです。

因みに、↑投稿のりゅう様が書かれているHTMLだけだと成功しますが、
あくまでも私が現在書いているHTMLに書き足す場合の方法を教えて下さい。
以上、何卒よろしくお願い致します。

【OS】Windws XP HomeEdition
【ブラウザ】InternetExplorer7
【参照URL】http://nowtester.web.fc2.com/tester.html

ご覧頂きまして誠に有難う御座います。
皆様のお知恵を貸して頂ければ幸いです。

現在、下記URLの様なHTMLでHPを制作しております。
http://nowtester.web.fc2.com/tester.html
当方の意向として、フッターに該当するコピーライト表記を、
どのサイズのモニターから閲覧しても、
画面最下部に固定表示したいと考えております。
(スクロールが発生した際に見える位置の最下部に常に...続きを読む

Aベストアンサー

「要素の下に表示」ということでは違うみたいですね。

「常に画面の下」に表示させるのは「position:fixed;」を使用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>テスト中</title>
<style type="text/css">
<!--

*{
margin:0;
padding:0;
}

html,body{
height:100%;
background-color: #000000;
color: #FFFFFF;
}
html{
overflow-y:scroll;
}
div#maincontents{
background-image: url(image/back.jpg);
}
.img1{
text-align:cenetr;
}
.img2{
position:absolute; top:-84px;
text-align:cenetr;
}
.img2 img{
border:none;
}
div#footer{
position:fixed;
bottom:0;
left:0;
text-align:center;
width:100%;
filter:dropshadow(color=#999999,offX=1,offY=1);
}

/* * * IE6 * * * */
* html,
* html body{
overflow-y:hidden;
}
* html div#maincontents{
height:100%;
overflow-y:scroll;
}
* html div#footer{
position:absolute;
bottom: expression(this.parentNode.clientHeight % 2 == 0 ? 0 : -1);
}

-->
</style>

</head>

<body>

<div id="maincontents">
<div class="img1"><img src="back.jpg" /></div>

<div class="img2">
<img src="back-trans.png" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="16,25,245,208" href="★★★" target="_blank" />
</map>
</div>
</div>
<div id="footer">
コピーライト表記@フッター固定
</div>

</body>
</html>

これでどうでしょうか?

「要素の下に表示」ということでは違うみたいですね。

「常に画面の下」に表示させるのは「position:fixed;」を使用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>テスト中</title>
<style type="text/css">
<!--

*{
margin:0;
padding:0;
}

html,...続きを読む

Q生協のマーケティング

生協の宅配事業は、多くの主婦から支持を得ていますよね。そして、生協の宅配を利用する理由に、重いものを家まで届けてくれるから、安全だから、というのに並んで、冷凍で届けれられる半調理品が便利だから、ということがよく言われます(私もそのひとり)。

そこで不思議なのですが、生協はこういった独特のマーケティングをいかにして成功させてきたのでしょうか。スーパーの冷凍半調理品ってここまでの支持を得ていませんよね(気のせいでしょうか)。しかも、地域の生協が連合して、生協共通の商品を開発していたりもして。

生協が本来の役割からはずれ普通の小売化しているという批判もありますが、その是非は別として、売らんかなという側面が昨今強く出ているからかと思えます。

店舗では大手スーパーに負けているようですが、個配は伸びているだし。

どなたか生協のマーケティングについて、何か教えてくださいませんか。よろしくお願いします。

Aベストアンサー

info2005ですが、お礼ありがとうございます。
補足に対する補足ですが、

※やはりネーミングによる相乗効果というものが、うまくマッチしているのではないかと考えます。
これは発足依頼、偶然こうなったのか、既に予見
していたことかはわかりませんが。

1、特に生産者を巻き込むことができるのも、
  消費者の声をダイレクトに吸い上げるのも

  生活共同組合COOPという公共感が
  安心感や信頼性を一言で表現している。

  生産者の顔を見せるセールスプロモは最近
  一般の通販業者でも流行ってきております
  が、おそらく生協さんは多分ですよ、
  発足当時からリーセルバリューを抑えなけれ
  ばならなかったことから、直接
  農業産業に従事している方々をお客さんであり
  株主であり、取引先でありという土台を構築せざ  るを得なかったと考えます。これにて、マーケテ  ィング調査に必要な入り口と出口が同時に構築
  できてしまうと言う訳です。しかし、これが、
  当初から何とかホールディングスとか、何とか
  カンパニーとか言う昨今流行の名前だったら、
  固い庶民層で誰がスーッと信用してくれるのか?

  また、継続的な商品開発のもとになるマーケティ  ングは、やはり情報通信だけでなく、情報交換
  による現在のマーケティング手法と同じでは
  ないかと思います。もちろん、商品開発部も
  常にメディアやトレンドの研究も必死になって
  していると思う。住宅、保険分野もやっておりま  すが、その辺からの顧客庶民層のデータ交換も
  されているはず。つまり、ゆりかご~墓場まで
  すべて自分のターゲット層は把握しているから
  に他ならないと思います。

info2005ですが、お礼ありがとうございます。
補足に対する補足ですが、

※やはりネーミングによる相乗効果というものが、うまくマッチしているのではないかと考えます。
これは発足依頼、偶然こうなったのか、既に予見
していたことかはわかりませんが。

1、特に生産者を巻き込むことができるのも、
  消費者の声をダイレクトに吸い上げるのも

  生活共同組合COOPという公共感が
  安心感や信頼性を一言で表現している。

  生産者の顔を見せるセールスプロモは最近
  一般の通販...続きを読む

Q背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法

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


【やりたい事】
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-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;
}
#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_bk.gif);
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>

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

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


【やりたい事】
1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。
2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。
3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツ...続きを読む

Aベストアンサー

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;
}

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

ANo.2です。

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

その他の補足と、上記サイトを見て、イメージが掴めました。
上記サイトの画像は、"position: absolute;"...続きを読む


人気Q&Aランキング