HTMLでページの余白を設定したい。

締切済

質問者：donguri340
質問日時：2005/12/02 16:15
回答数：6件

ＨＰ作成初心者です。
ＨＴＭＬとスタイルシートを使って作っています。
画面の両端に余白を入れたいのですが、
その方法がいまいちよくわかりません（++）
フレーム？を使って３つのページを１ページとして
表示させているのですが・・・その指示をどのページに入れたらいいのかもわかりません。
indexだけでいいのか・・それともその他のページにも設定するのか・・。

どうぞよいアドバイスをお願い致しますm(__)m

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

最新から表示
回答順に表示

No.6

回答者： goulan
回答日時：2005/12/06 00:19

他の回答者の方ともかぶるところがありますが。

テキストがそれぞれのフレーム、またはウィンドウの幅いっぱいいっぱいになるのが嫌で、両端に余白が欲しいということだと解釈します。

css fileで、body{ margin-right:50px;margin-left:50px;}または、html body tag に、style="margin-right:50px;margin-left:50px;" と指定すれば、左右に50pxの余白がでます。フレームであっても同じです。フレームページ全てに指定します。css fileならば、head内にlink要素で指定すればokです。index（フレーム情報）には、いりません。

単に、テキストを表示する幅を指定しておいて、それをセンタリング、ユーザーのブラウザウインドウ幅に拘わらず、左右均等余白にしたいならば、
body{width: 640px;margin-right:auto;margin-left:auto;text-align: center;}
にします。（テキスト表示面を640pxにする場合）
これには問題がありまして、body要素に指定しても、IEはセンタリングしてくれません。なので、body全体に divを入れ子にして、そのdiv に上記のスタイルを指定します。

ですが、こちらだと、ユーザーのブラウザウインドウがbody width の指定px以下の場合（この例だと640px）、当然左右に余白はありません。

- 1
- 件

通報する

この回答へのお礼

ありがとうございました！！

通報する

お礼日時：2006/01/08 20:27

No.5

回答者： Lazy_Dogg
回答日時：2005/12/02 16:46

1. FRAMEタグでの指定

目的のドキュメントを指定しているframeタグに marginwidth="10"
などの指定をすれば余白が設定できます。

2. スタイルシートでの指定 (目的のHTMLまたはcssで指定)
body { margin: 0px 10px 0px 10px; } /* 上右下左の順 */

3．BODYタグでの指定 (目的のHTML内で指定)
<body topmargin="0" leftmargin="10" marginwidth="10" marginheight="0">
などと指定しますが、
topmargin="0" leftmargin="0"がIE用、
marginwidth="0" marginheight="0"がNetscape用の属性です。

http://www.tagindex.com/html_tag/frame/frame_mar …
http://html.eweb-design.com/1301_wm.html

1と3はxhtmlでは推奨されていなかったと思います。
xhtmlの意味が解らなければ気にしないで下さい。

- 0
- 件

通報する

この回答へのお礼

ありがとうございました！！

通報する

お礼日時：2006/01/08 20:27

No.4

回答者： noname#16352
回答日時：2005/12/02 16:44

┏━┳━━━┳━┓　フレーム呼出し親ファイル（index.html）

┃　┃　　　┃　┃　Ａフレーム（page01.html）
┃Ａ┃　Ｂ　┃Ｃ┃　Ｂフレーム（page02.html）
┃　┃　　　┃　┃　Ｃフレーム（page03.html）
┗━┻━━━┻━┛

まぁ、フレームの構造はどうなっていても構わないのですが、
仮に上のような構造を採用していたとしましょう。

余白を指定するのは、そのフレームの表示に使用している HTML ファイルです。
例えばＢフレームに表示されているものに左右余白を設定したいのであれば、
その旨の CSS などを記述するのはあくまでも page02.html です。
もちろん、Ａフレームに表示されているものに設定するなら page01.html に記述します。

フレームの構造等を定義するのに使っているファイル（この例では index.html）は関係ありません。

- 0
- 件

通報する

この回答へのお礼

ありがとうございました！！

通報する

お礼日時：2006/01/08 20:26

No.3

回答者： nitto3
回答日時：2005/12/02 16:42

margin を使って余白にしたらいいです。

- 0
- 件

通報する

この回答へのお礼

ありがとうございました！！

通報する

お礼日時：2006/01/08 20:26

No.2

回答者： purplebossa
回答日時：2005/12/02 16:41

フレームを使っていらっしゃるということで、

frame.html（フレーム情報ファイル）と1,2,3のhtmlという、4つのファイルから成り立っているかと思います。名前は私が与えた仮名ですのでお気になさらず。indexという名が恐らくフレーム情報ファイルだと思いますが、不確定なので名前を与えました。

左右に余白（マージン）を与えたければ、フレームの中にある1～3のhtmlに余白を与えます。
フレームで左側に配置されるhtmlは左側にマージンを、同じくフレームで右側に配置されるhtmlには右側にマージンを与えます。frame.htmlにマージンを与えてもフレーム非対応ブラウザで観覧した場合しかマージンは表示されません。

CSSを使ってマージンを与えるのが最も奨励的であると思いますから、その方法を紹介しているサイトを参考URLで紹介しています。ご一読くださいませ。この方法で<BODY>にスタイルを付ければページ全体のマージンとなります。

参考URL：http://amo.versus.jp/hp/style/style4-10.html