- ベストアンサー
CSSで擬似フレームについて
- CSS初心者の方へ、divタグを画面中央寄せにする方法について教えてください。
- 質問の回答として、HTMLとCSSのコードを提示しています。
- 全体の要約として、divタグを中央寄せにする方法についてのアドバイスをお願いします。
- malibu65wg
- お礼率62% (5/8)
- HTML
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
#1のお礼を見てですが、他のブラウザでの表示を見るべきです。今のままでは、ほとんどの人が未だIE6を使っているわけなのですが、そのIE6に対応していません。対応策は私が#1で書いておいたのですが・・。 IE7は若干の改善が行われているので、IE6までにあったCSSのバグの一部が治っているわけです。そのため、IE7だけで確認する方法は現状では意味がないです。また、OperaやFirefoxでも最低限見てみるべきです。 IEに関しては、IE3～7まで、全て単独でインストールできる方法があるので、IE7はそのまま残しておいて、IE5、IE5.5、IE6を単独でインストールするといいと思います。（IE3とIE4はそもそもCSSの対応が悪すぎるので、潔く捨てるほうがいいかと） http://tredosoft.com/Multiple_IE （英語ページです） ↑このページの「Download Multiple IE installer (10.3MB) 」を押してダウンロードし、IE5、IE5.5、IE6にのみチェックをいれてインストールすると良いです。 これで後はOperaとFirefoxをいれれば、とりあえずの表示確認環境が作れます。 CSSについてですが、スクロールをわざわざ入れる意味はあるのでしょうか？ ページの長さが長くなれば自動的にブラウザでスクロールバーがでます。 また、#mainにどんなに長いコンテンツをいれても、#headerと#footerの形がつぶれることはないです。 ということで、パッと作ってみたものを・・・。綺麗ではないですが。 わかりやすいように、それぞれの要素に背景色をいれています。また、一応IE5～7、Opera、Firefoxには対応しています。 CSS＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ body{ padding: 0px; margin: 0px; text-align: center; } .width{ width: 800px; margin: 0px auto; } #header{ text-align: left; height: 180px; overflow: auto; background-color: #f6f303; } #main{ text-align: center; background-color: #f300f3; height: 100%; } #footer{ height: 20px; color: #FFFFFF; font-family: "Courier New", Courier, mono; font-size: x-small; font-style: italic; background-color: #000000; } html＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <div class="width" id="header"> （width="800" height="180" のflashファイルを入れています） </div> <div class="width" id="main"> (width="700"のコンテンツを作りスクロールさせていま） </div> <div class="width" id="footer">テキストを一行入れています</div>
その他の回答 (4)
- Dorohedorer
- ベストアンサー率45% (252/548)
追加・・・。 #mainにある「height: 100%;」はまったくの無意味ですので削除してください。
- key-child
- ベストアンサー率54% (25/46)
body要素に指定しても意味はある。 ただ、今回の場合はbody要素に幅100%を設定しているため、あまり意味をなさない。 （幅100%のものを中央表示したところで中央表示に見えない） なので、body要素の幅を画面より小さい値を設定してやれば中央表示されることを確認できるはず。 だから、ヘッダー・メイン・フッターにそれぞれ設定するのが面倒だというなら、body要素の幅を800pxにし、ヘッダー・メイン・フッターの幅を100%にすれば同様の表示になるはず。 中央表示とは関係ないが、positionプロパティを設定しているためかIEではうまく表示されぬようだが・・・
お礼
ご回答有難う御座います。皆様のお知恵をお借りして解決することができました！やはり当方の書いたbody要素のタグがなにか邪魔をしていたようです。回答1のお礼に新しくしたcssも記入させていただきました。非常に勉強になりました！有難う御座いました！
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
下記ページが参考になるかと思います。 http://www.mozilla.gr.jp/standards/webtips0004.html ついでに#1の人の発言を踏まえて、ですがmarginってブロックの外側の空白だからbodyに指定しても意味のない気が…。
お礼
ご回答有難う御座います。みなさまのお知恵をお借りして解決することが出来ました！有難う御座いました！
- Dorohedorer
- ベストアンサー率45% (252/548)
bodyタグに「margin:0px auto;」としても意味ないのではありませんでしたか？ たぶん各idにそれぞれ設定しないと意味がなかったはずです。 全体にやるのであれば、全てのdiv要素を囲むdiv要素をつくって、そこに「margin:0px auto;」とすれば楽かと思います。 ちなみにこの方法ではIE6以下（5.5以下だったかな？）ではセンタリングされません。古いIEでセンタリングさせる場合はbodyタグにでも「text-align: center;」とする方法です。ちなみにこの方法は正しい方法ではなく、IEのバグを利用したものです。さらに、この場合はテキストが全て中央寄せになるので、各要素でテキストを左寄せなどに指定しなければならないです。
お礼
ご回答有難う御座います。bodyタグの「margin:0px auto;」については意味も分からずサンプルサイトのソースを貼り付けて作りましたので必要ないタグなのかもしれません。ただそのサイト様はjavaスクリプト等を多用してwindowサイズなどの計算をさせていたのでそのへんで関わってくるのかもしれないですが、無知な私には到底理解できませんでした。 そしてご回答頂いたようにソースの方作り直したところ見事に理想のレイアウトが実現しました。当方はIE7のプラウザを使用しているのほかのプラウザでの動作は確認しておりませんが、とりあえず悩んだレイアウトを克服することが出来ました。 全てのdiv要素を囲むdiv要素をつくりそのIDをBOXというIDにし、cssを下記の用に書き換えました。 html, body { overflow: hidden; } #box{ width: 800px; margin:0px auto } #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; text-align: center; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: x-small; font-style: italic; color: #FFFFFF; height: 20px; background-color: #000000; overflow: hidden; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; text-align: center; } 意味の無いタグなどあればご指摘頂ければと思います。 本当に有難う御座いました！非常に助かりました！
補足
只今新しくしたソースをIE7では正常に表示されましたが、IE6で確認したら、スクロールバーが付いているはずのDIV要素にスクロールバーが表示されていませんでした。 まだ手直しが必要なようです。当方でも参考サンプル等探してみますが、なにかご指摘御座いましたら宜しくお願いいたします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
補足
いろいろご教授頂き有難う御座います。 当方の表現したいサイトが御座いまして、そちらのサイトはインラインフレームを用いてヘッダー、フッターを固定しメイン要素をスクロールさせるというサイトでした。それをｃｓｓで表現したかったわけですが、ただ擬似フレームというキーワードだけですと自分の理想とするものがヒットせず擬似インラインフレームで検索したことろ下記のようなサイトがヒットしました。http://phpspot.org/blog/archives/2006/09/css_9.html これを基本にすれば理想なものが出来そうです。 IEのインストールは大変役に立ちました。 有難う御座いました。