掲示板/総合質問板/過去ログ/一覧/ フレームページの余白について

0 名前：雷瑚： 2005/01/05 17:53 ［URL］: こんにちは

このＨＰで調べたのですが
ページの余白の設定がうまくいかなくて困っています
マージンのタグも使ってみたのですが
うまくいきませんでした
INDEXにタグを打ち込んだところから違っていたのでしょうか？

皆さんのご指南お待ちしております
よろしくお願いします

1 名前： phpinfo() ： 2005/01/05 23:48 ［URL］: 余白はタグではなくスタイルシートです
http://www.tagindex.com/stylesheet/box/index.html

＃フレーム未対応プラウザを弾くようなメッセージは良くないです
＃http://www.mars.dti.ne.jp/~fuming/navi/frame.htm
＃質問の趣旨とは離れますが念のため。

2 名前：雷瑚： 2005/01/06 12:47 ［URL］: phpinfo()さん解答ありがとうございます
スタイルシート初めてなんですが使ってみます

あとフレーム未対応のかたのページも作りたいと思います
またわからないことがあったらよろしくお願いします

3 名前：雷瑚： 2005/01/06 21:56 ［URL］: あれからスタイルシートを使って
試行錯誤を繰り返したのですが
どうにもうまくいきません

こちらの記述がまずかったのですが
ページを中央に表示する方法を教えていただきたいのです
何度もすみませんがよろしくお願いします

4 名前： まずる ： 2005/01/06 23:43: ええっと・・・。
フレームを使った上で、ページを中央に揃えたいということですか？

5 名前：雷瑚： 2005/01/07 00:05 ［URL］: はい
そういうことです
回答よろしくお願いします；

6 名前： まずる ： 2005/01/07 00:17: 結論から言いますと、HTMLだけでは無理です・・・。
フレームというのは、ピクセル数または表示画面サイズの%でしか切れません。
となると、ページをみる人によって、画面の解像度が違っているわけですから、
それぞれの人に応じてフレームのきり方の比率を変化させる必要があります。

残念ながら、単体のHTMLには、そうしたクライアント情報を識別することはできません。
となると、最低最悪レベルでJavaScript、通常ではPHP/CGI等を使う必要があります。
これらでは、まずクライアント情報を取得し、それに応じて表示（というか数値）を変化させる
ことが可能ですので、扱えるのなら簡単です。

ただ、HTMLでやるとなれば・・・微妙な代替案はありますが・・・ん～・・・
お勧めは出来ませんが・・・ってな感じですが・・・。

7 名前：雷瑚： 2005/01/07 00:29 ［URL］: まずるさんお返事ありがとうございます

JavaScriptなどはまだ触ったこともない新米です
できれば今のところはＨＴＭＬだけでやっていきたいたい
と思っているので
代替案のほうよろしくお願いします；

8 名前： まずる ： 2005/01/07 01:26: 代替案は、ちゃんと見れない人が出るので、やっぱりやばいんですが・・・。

完全に中央に揃えたいのなら、フレームの中にフレームを読み込む方法があります。
画面サイズが取得できない以上、<iframe>が確実です。
この場合、<iframe>の位置を中央に揃え、height を100%にして下さい。
横幅は、横スクロールバーが出ない程度に調整して下さい。
その上で、<iframe>の中にフレームページを読み込みます。
<iframe>２つ並べてもOKです。

または数字のマジックを使う方法。（不完全）
大胆に思い切り画面を%指定でぶった切ってですね、左右のページのテーブルサイズを
フレームを切った%比の、それぞれ逆ないし近い値にします。
ただし、もちろんこれでは完全に中央はなりません。
もちろん主要な解像度（1024x768）を基準に考えることになりますが・・・多少は中央からずれます。

・・・う～ん、JavaScriptかPHPで書いてみましょうか？
事実上HTMLと同じ扱いですし、明日でよければですが。（酔x3）

9 名前：雷瑚： 2005/01/07 14:49 ［URL］: まずるさんありがとうございます
見ることができないって言うのはやっぱりまずいですね

JavaScriptは今勉強中なのですが
よろしければ書き方をお願いします

何度も言い換えて申し訳ないですが
自分の言っている中央とはこのサイトさんの
ＨＯＭＥ見たいな感じです；
もし違う意味で受け取られていたらゴメンナサイ;

何度もスミマセンがよろしくお願いします

10 名前： まずる ： 2005/01/08 00:32: 遅くなりましたが、今から書いてみますので、少々お待ち下さい・・・
JavaScriptでいいですね？

11 名前：雷瑚： 2005/01/08 00:59 ［URL］: まずるさんたびたびスミマセン;
本当にありがとうございます
よろしくお願いします

12 名前： まずる ： 2005/01/08 01:45: ・・・すいません、なぜかうまくできません（笑）
で、理由を考えたら、フレームページの場合、<body>の外にタグの記述があるので、
document.write がうまく動作しないっぽいんです・・・困ったなあ・・・もうちょっと考えてみますね・・・。

13 名前： まずる ： 2005/01/08 01:52: あ、できた。

次にソースを書きます。

14 名前： まずる ： 2005/01/08 02:03: </head>より先をこうして下さい。
page_l の値は、左フレームの表示に必要な幅を
page_r の値は、右フレームの表示に必要な幅の値です。
例の数値は適当ですので、調整して下さい。

<script type="text/javascript">

</script>
<FRAME name="left" src="home.htm" noresize>
<FRAME name="right" src="right.htm" noresize scrolling="AUTO">
</FRAMESET>
<NOFRAMES><P>このページを表示するには、フレームをサポートしているブラウザが必要です。<BR>
<BR>
フレームなしのページも作成中です。<BR>
少々お待ちください；</P></NOFRAMES></FRAMESET>
</HTML>

15 名前： みあか ： 2005/01/08 13:47: ページ本文を<div align="center"></div>にされてはいかがですか？

16 名前： むむりく ： 2005/01/09 01:36: 下側のフレームを分割なしにして、
１枚のファイルでうまくレイアウト（CSS、最悪テーブルでも）すればいいような。

Scriptオフの環境を考えると、
ソース自体を変更するJavaScriptはあまり賛成できません。
（noscriptつければいいかもだけど）
フレームだけでも問題点多いので…

17 名前： まずる ： 2005/01/09 09:02: 私も本当はphpか何かがいいとは思うんですが、サーバーの仕様が判りませんしね・・・。

18 名前：雷瑚： 2005/01/09 13:20 ［URL］: 返事送れてスミマセン；
皆さんご意見ありがとうございます

＞まずるさん
早速コピペでやってみたのですがうまくいきません；
フレームの構成がこんな感じなのですが
□□□□□□□
□　　　　　　 □
□□□□□□□
□ 　　　　□　 □
□ 　　　　□　 □
□ 　　　　□　 □
□ 　　　　□　 □
□□□□□□□
これのせいでしょうか；
頼りっきりではいけないと思って自分でも
研究してはいるんですがどうもわからなくて・・・

＞みあかさん
そのタグはためさせてもらったんですができませんでした；

＞むむりくさん
貴重なご意見ありがとうございます
ただ今のところはフレームページでやってみたい
と思っているので；
すみません

19 名前： まずる ： 2005/01/09 13:46: ええと、現状でどんな感じになりますか？

20 名前： 通りすがり ： 2005/01/09 14:54: 上下二分割のフレームを使い、下のページにインラインフレームを配置し、
それを中央寄せにした方が簡単だと思いますが。
どうせフレームで表示するならインラインでも構わないのでは？

21 名前：雷瑚： 2005/01/09 15:24 ［URL］: ＞まずるさん
うまくいえないんですが・・・
フレームの幅を設定しても
左側のページが大きくて右側のページが右のほうにある感じです;
書き換え方間違えたんでしょうか；
何度やってもそうなるんですが･･･

＞通りすがりさん
これからの更新で右フレームにちょっとした
仕掛けをしていこうと思っているので･･･；

22 名前： まずる ： 2005/01/09 16:02: ・・・すいません・・・算数間違えました・・・。

frame_l=page_l+(screen_w-(page_l+page_r))/2;

じゃなくて

frame_l=page_r+(screen_w-(page_l+page_r))/2;

ですね・・・。

23 名前：雷瑚： 2005/01/09 16:59 ［URL］: やはりできません；；
しかしフレームの中にさらにフレームを開くことで解決しそうなのですが;
なにか問題はあるでしょうか

24 名前：みや： 2005/01/09 17:18: あの、私には「最終的にどうなれば良いのか」が未だに分からないのですが…。

左フレームと右フレームを、あたかも一枚のように見せかけて、本文を中央配置したいということなら、

・左フレーム： body { margin-left: 10%; margin-right: 0; }
・右フレーム： body { margin-left: 0; margin-right: 10%; }

のように余白を指定すれば良いだけのような気がします。もし中央寄せしたいのであれば、上に加えて

・左フレーム： body { text-align: right; }
・右フレーム： body { text-align: left; }

するとか。

それから、noframes の中に「このページを表示するには～」云々は書かなくて良いです。その代わり、最低限、各ページへのリンクを書いて下さい。

# ちなみに、私はセキュリティのために、ブラウザの設定で「フレームの枠線を常に表示する」ようにしています。そのため、フレームを利用したデザインは、私の環境では非常に奇異な感じになります。

# なお、フレームはアクセシビリティ・ユーザビリティの悪さという問題もありますが、もう一つ大きな問題として、フレームに関する HTML/CSS/JavaScript の実装がブラウザ間で著しく異なるということもあります（iframe も同様）。フレームは XHTML 1.1 からは廃止されましたし、今後の改善はあまり望めないでしょう。

# ついでに、script 要素を使うときには、スクリプト実行前・実行後のどちらも HTML DTD に適合しなければなりません。

25 名前： 通りすがり ： 2005/01/09 19:36: 上下に分割で下フレームに最初に表示するページ
<html>
<head>
<title></title>
</head>
<body>
<div align="center">
<iframe src="左に表示するページ" name="left" style="float:left;"
height="100%" width="左の幅" border=0 frameborder=0>
</iframe>
<iframe src="右に表示するページ" name="right"
height="100%" width="右の幅" border=0 frameborder=0>
</iframe>
</div>
</body>
</html>

26 名前： まずる ： 2005/01/09 23:06: すいません、この国のADSL、今日は調子悪くて・・・。
固定数値じゃなく、%で指定しないと、ウィンドウを最大化した時以外、
ちゃんと表示されないと気付きました。

以下、</head>以降です。

<script type="text/javascript">

</script>
<FRAME name="left" src="http://www.amigo2.ne.jp/~yuzuman/home.htm" noresize>
<FRAME name="right" src="http://www.amigo2.ne.jp/~yuzuman/right.htm" noresize scrolling="AUTO">
</FRAMESET>
</FRAMESET>
<NOFRAMES><P>このページを表示するには、フレームをサポートしているブラウザが必要です。<BR>
<BR>
フレームなしのページも作成中です。<BR>
少々お待ちください；</P></NOFRAMES></FRAMESET></frameset>
</HTML>

なお、ソース中に</frameset>が１つ足りないので補完してあります。
これで、左フレームに表示されるページ内容は右よりに、
右ページは左よりに<div>や<table>を配置して下さい。

27 名前： まずる ： 2005/01/09 23:10: ・・・あと、22は無かったことに・・・数値計算は最初のでいいはずです。
</frameset>の数も合ってました・・・だめだ、やっぱり酔ってる・・・＿|￣|○

28 名前：雷瑚： 2005/01/11 20:34 ［URL］: まずるさん
返事が遅くなってしまってスミマセン；
HPなんですが３分割だと何かと
不具合が多そうなのでとりあえず
二分割にしてみました・・・
このあとiframeを使って構成していくつもりです

中央表示なんですが・・・
26で書いていただいたタグをいじったらいいんだと思うんですが
ドコをどういじればいいのかわかりません
頼りっぱなしでスミマセンが
よろしくお願いします

29 名前： まずる ： 2005/01/12 23:29: 仕事で遅くなりました・・・。

page_l=400;
page_r=100;

の各数値が、左右のページの表示に必要な幅です。
例えば、幅が最大のtable/div等の幅です。
仕組みを知っておいた方がいいと思いますし、他の方の一助にもなるかも知れませんので
何をしているのか説明をしますと、

screen_w=screen.width;
ユーザーのディスプレイの解像度（横）を取得し、その値を「screen_w」とする

page_l=400;
page_r=100;
上記の左右のページに必要な幅をセット

tmp=page_l+(screen_w-(page_l+page_r))/2;
フレームページの表示に必要な幅→左右の幅数値の合計：「page_l+page_r」
を、ディスプレイ解像度から差し引いて「screen_w-(page_l+page_r)」これが左右の余白の合計
半分にして→余白の半分：(screen_w-(page_l+page_r)/2
左ページの必要幅を加え、その数値を「tmp」とする（→262+400=662）

例）必要な左右が 400/100 で、画面解像度が1024の場合は
1024-(400+100)/2→262（左右に262の余白）

ここで確認
262+400+100+262=1024 ですよね?
余白+左の必要幅+右の必要幅+余白
になることに着目して下さい
この解像度の場合、ページの中央にフレームが来るようにしたい場合は、
左→262+400
右→262+100
にすればいいんですが、片方のフレーム幅が固定にならないように、%に変換します。
右はブラウザにやらせるとして、左だけの%数値を算出して、その値を「frame_l」とします。
これは「左の幅÷画面の解像度X100」ですので、
frame_l=(tmp/screen_w)*100;
↓
例の場合は
frame_l=(662/1024)*100　（65%位かな？）
残りは「*」として放置

という感じです