- ベストアンサー
レイヤーを画面の中央に配置したい
新規Webサイトをつくるにあたって、レイアウトに、テーブルではなく、レイヤーを使用しようと思っています。 画面の中央に配置したい場合、テーブルならalign="center"で、できますが、レイヤーの場合はどのように設定すればよいでしょうか？ 当方Dreanweaverを使用しています。HTMLやCSSの書き方でお教えいただいても結構です。 よろしくお願いいたします。
- KKatoh
- お礼率74% (247/330)
- ホームページ作成ソフト
- 回答数8
- ありがとう数10
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
今度こそ！ 最初のドキュメントタイプ宣言を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/loose.dtd"> に書き換えて下さい。 当方普段Macで作業してまして、 Winマシンの色んなブラウザで確認してみた所、「WinのIE6だけ」が表示がうまくいかない様でした。 で、IEのバグなのかな？ とも思って色々調べた所、 前のDOCTYPE宣言で、IE6は過去互換モード、というものになってしまい、 表示が出来なくなる様です。 上記の宣言にすれば、どのブラウザでも標準モードになる様です。 これで確認してみて、WinのIE6でちゃんと表示出来たので、今度こそ大丈夫な筈（祈） 私も勉強になりました。
その他の回答 (7)
- s-tuki
- ベストアンサー率39% (57/145)
私がIE、NN7、safariで確認した所、 ちゃんと中央に表示されました。 何故？？？ ブラウザ古いですか？ CSSは、比較的新しい技術なので、過去のバージョンのブラウザは対応していません。 それか、 もしかして作成ソフトのプレビュー画面で見てませんか？ プレビュー画面は、正規のブラウザでの表示とは、若干異なります。
お礼
ホントにありがとうございます。 ブラウザはIE6.0で最新です。作成ソフトのプレビューで見ていただけだったので、自分のホームページのスペースにアップロードしてみましたが、変わりませんでした。 私のブラウザの設定か何かが違っているのでしょうか？
- s-tuki
- ベストアンサー率39% (57/145)
回答です。 インラインでのスタイルの指示は不要です。 下の例を確認してみてくださいね。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>sample</title> <style type="text/css"> <!-- div.Layer1 { width:460px; height:198px; z-index:1; margin-top: 21px; margin-right: auto; margin-left: auto; background-color:#61b1d7; } p{ padding:10px; font-size:10pt; color:#000080; } --> </style> </head> <body> <div class="Layer1"> <p> margin-topは、上部を21px開ける指示をされてらっしゃる様だったので記述。<br> background-color:#61b1d7;は、位置、サイズ等が分かりやすい様に入れてみました。<br> 必要に応じて、変更、削除してください。 </p> </div> </body> </html>
お礼
何度も、本当にありがとうございます。 回答いただいたHTMLを、そのままコピペしましたが、中央ではなく、左寄りに(左端ではない)表示されてしまいました。 もうあきらめたほうが、よさそうですか。。。
- s-tuki
- ベストアンサー率39% (57/145)
何度も失礼します。 ソースを見なければ、レイヤーの座標というのを、どの様に記述されているのかわからないのですが、 違う場所を指定した座標が記述されているのでしょうか？ 中央配置したいのなら、 その座標は排除するわけにはいかないのでしょうか・・・？ では、CSSは止めて 単純にHTMLで、レイヤー要素を <div align="center">と</div> で挟んでしまえば、中央に表示されるハズ。 試してみて下さい。
お礼
たびたびありがとうございます。 座標の記述を削除すると、left:0pxと判断されてしまうようで、左端に寄ってしまいます。 <div align="center"></div>ではさむと、レイヤーの中の要素だけが、センタリングされてしまいます。 ちなみに、ソースはこんな感じです。 cssは、 <style type="text/css"> <!-- .layer1 { margin-left: auto; margin-right: auto; } --> </style> htmlは、 <div id="Layer1" style="position:absolute; left:10px; top:21px; width:460px; height:198px; z-index:1" class="layer1"></div> 何度もお手数おかけしますが、よろしくお願いします。
- s-tuki
- ベストアンサー率39% (57/145)
BODYタグには使えないと思います。 横幅のサイズを指定してある要素に有効です。 例えばレイヤーの名前を 「a」とすると div.a{ width:300px; margin-right: auto; margin-left: auto; } でHTML文書の記述は <div class="a">xxxxx</div> となります。
お礼
再びご回答ありがとうございます。 ご指摘のとおり、クラスに対して設定してみましたが、やはりレイヤーの座標どおりにしか、表示されません。 何がいけないんでしょう？
- s-tuki
- ベストアンサー率39% (57/145)
横幅の指定してあるブロック要素になら margin-right: auto; margin-left: auto; を使えば中央配置出来ます。 右と左の余白を「auto」に指定すれば、 左右が同じサイズ空く、 で、要素が中央に来る、という事です。
お礼
ご回答ありがとうございます。 bodyタグにその設定をしましたが、レイヤー自体に絶対座標があるために、真ん中に配置されませんでした。 他に何か設定が必要なのでしょうか？
- s-tuki
- ベストアンサー率39% (57/145)
あ、ごめんなさい！ フレームじゃなくってレイヤーの質問なのに 何だか勘違いしてしまいました！
- s-tuki
- ベストアンサー率39% (57/145)
こんな感じの事でしょうか？ <frameset rows="*,300,*" frameborder="NO" border="0" framespacing="0"> <frame src="top.html" name="topFrame" scrolling="NO" noresize > <frame src="main.html" name="mainFrame"> <frame src="bottom.html" name="bottomFrame" scrolling="NO" noresize> </frameset> これは横割りですが、中央に配置されるフレームの大きさだけ決めて、上下のフレームサイズを*にしておけば（上の例では上*、メイン300px、下*） 上下のフレームは、見る人のモニタに合わせて大きさが変わり、メインフレームは同じ大きさで中央に表示出来ます。 縦割りにしたければ frameset rows の代わりにframeset colsと入れます。 さらにこの中央を横3つに分けて、左右にも「*」のフレームを作ると、画面中央に、任意の固定サイズの四角いフレームを作る、なんて事も出来ます。 あんまり切り過ぎるとややこしくってちょっと大変ですし、スクロールバーが出来る様なことになると不細工になるので、工夫が必要かと思います。
お礼
うまく表示できました！ 私の方でも、友人にソースを送って、確認してもらったりしていたのですが、確かにIE5.5では真ん中に表示されて、IE6.0では左寄りになるという現象で、これは仕様なのかなと思っておりました。 今回いただいたドキュメントタイプ宣言に書き換えると、IE6.0でも見事に真ん中に表示されました！ 本当に本当にありがとうございました。 長らくおつきあいいただいて感謝感激です。 勉強になりました。 重ねてありがとうございました。
補足
<お礼の一部訂正> IE5.5でも左寄りで、Netscapeではセンターに配置されたようです。