左右に分けたフレームのセンター表示は？

前へ 次へ
このQ&Aのポイント
  • フレームを左右に分ける一般的な方法ではセンター表示ができないため、別の方法を模索しています。
  • 現在はマージン用のフレームを配置することでセンター表示を実現していますが、もっと簡単な方法はあるのか悩んでいます。
  • フレームの配置を工夫することでセンター表示を実現する方法についてアドバイスをいただきたいです。
回答を見る
  • ベストアンサー

左右に分けたフレームのセンター表示は？

ありがちな左にメニュー、右にコンテンツのフレームを作っていますが、 これをセットでセンターに配置して表示することが出来ず、悩んでいます。 現在はフレームの更に左右にマージン用のフレームを配置することで、 センター表示を実現させていますが、もっと簡単な方法はありませんか？ <frameset cols="*,80,640,*"> <frame src="ダミーファイル" name="left" noresize> <frame src="メニューファイル" name="menu" noresize> <frame src="コンテンツファイル" name="body" noresize> <frame src="ダミーファイル" name="right" noresize> </frameset>

  • HTML
  • 回答数4
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • ittochan
  • ベストアンサー率64% (2667/4137)
回答No.4

<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>ファイトーー！( ゜ロ゜)乂(゜ロ゜ )イッパーーツ！！</TITLE> <SCRIPT LANGUAGE=javascript> <!-- function window_onresize(ev) { var ifr = document.getElementsByTagName("IFRAME"); var mainMenu = document.getElementById("mainMenu"); document.body.style.marginTop=0; document.body.style.marginBottom=0; for(i=0;i<ifr.length;i++){ ifr[i].height = document.body.clientHeight - mainMenu.height -10;; } } //--> </SCRIPT> </HEAD> <BODY LANGUAGE=javascript onresize="return window_onresize()" onload="return window_onresize()"> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="720"> <tr> <td id=mainMenu colspan="2" height=45> NN7は、表の高さ指定で％は使えないみたいですよ </td> </tr> <tr> <td valign="top" width="150"> <iframe width="150" src="サブメニュー"></iframe> </td> <td valign="top" width="570"> <iframe width="570" src="コンテンツ" name="contents"></iframe> </td> </tr> </table> </div> </BODY> </HTML>

Jamie_the_hero
質問者

お礼

いろいろとご教授ありがとうございました。 いただいたソースで無事うまく動作いたしました。 ありがとうございました。

その他の回答 (3)

  • ittochan
  • ベストアンサー率64% (2667/4137)
回答No.3

<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=s-jis"> <TITLE>～(￣∇￣～)ふら(～￣∇￣)～ふら フラダンスゥ</TITLE> <SCRIPT LANGUAGE=javascript> <!-- function window_onresize() { var ifr = document.getElementsByName("ifr"); for(i=0;i<ifr.length;i++){ ifr[i].style.width = window.document.body.clientWidth/3; } } //--> </SCRIPT> </HEAD> <BODY LANGUAGE=javascript onresize="return window_onresize()" onload="return window_onresize()"> <P>NN7でしたら、これでどうでしょう</P> <P>NN6でも動くかも</P> <P align=center> <IFRAME name=ifr height=500></IFRAME> <IFRAME name=ifr height=500></IFRAME> </P> </BODY> </HTML>

Jamie_the_hero
質問者

補足

度々、ご教授ありがとうございます。 いただいたソースのままだとうまくいくのですが、 自分のページに取り込んでアレンジすると、どうもうまくいきません。 甘えついでに図々しくもソースを書きますので、 お気付きの点がありましたら、指摘いただければ幸いです。 <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="720" height="100%"> <tr height="45"> <td height="45" colspan="2">ここにメインメニューを.jsファイルから取り込み</td> </tr> <tr height="100%"> <td height="100%" valign="top" width="150"> <iframe width="150" height="100%" src="サブメニュー"></iframe> </td> <td height="100%" valign="top" width="570"> <iframe width="570" height="100%" src="コンテンツ" name="contents"></iframe> </td> </tr> </table> </div> *幅720×高さ100%のテーブルの上45ピクセルにメインメニューを取り込み、 下のスペースを120と570のフレームで処理しようとしています。 いただいたスクリプトはウィンドウサイズの1/3を"ifr"に与えているようですが、 これを150ピクセルに固定出来ればうまくいきそうな気もしますが、 いただいたソースをそのままテーブルで囲むと高さが0（1？）になってしまい やはりうまくいきません。 こうなったら力任せにサブメニューもjsファイル化して取り込もうかと 思い始めています。 （100近いファイル数なので、やりたくないのですが・笑）

  • ittochan
  • ベストアンサー率64% (2667/4137)
回答No.2

<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <P>改良しました<BR> これはどうでしょう </P> <TABLE HEIGHT=500 width=400 align=center border=0> <P align=center> <IFRAME width="49%" height="500"></IFRAME> <IFRAME width="49%" height="500"></IFRAME> </P> </TABLE> </BODY> </HTML>

Jamie_the_hero
質問者

お礼

いろいろ検証をしてみました。 Windows、Mac問わずIEにおいては希望通りになりました。 また、NN4.xにおいても<ilayer>を書込むことで、表示自体は希望通りに出来ましたが、 画像とテキストの回り込みでレイアウトが崩れます。 （TDタグに対するline-height指定が原因かとも思いましたが、 どうもそれだけではないようで、まだ解決していません。） また、NN6以降では表示されないと言う状態で手詰まりになっております。 以上、ご報告させていただきます。

Jamie_the_hero
質問者

補足

早速回答いただきまして、ありがとうございます。 なるほど、その手がありましたね。 <iframe>はNNが対応していないので、全く考えから欠落してました。 <ilayer>と組み合わせて検証してみます。 お礼は結果報告とともに、後日改めてさせていただきます。 ありがとうございました。

  • ittochan
  • ベストアンサー率64% (2667/4137)
回答No.1

<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <P>インラインフレームはどうでしょう <TABLE style="WIDTH: 494px; HEIGHT: 486px" cellSpacing=1 cellPadding=1 width=494 align=center border=0> <TR> <TD> <P align=center> <IFRAME width="40%" height="100%"></IFRAME> <IFRAME width="40%" height="100%"></IFRAME> </P> </TD> </TR> </TABLE> </P> <P></P> </BODY> </HTML>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • frameを使用したときのファイルの切り替え

    　今、フレームを使用してＨＰを制作していますが、タグ例として、 <frameset rows="60,*" frameborder="no" border="0"> <frame src="header.html" scrolling="no" noresize> <frameset cols="200,*" frameborder="no" border="0"> <frame src="menu.html" name="menu" noresize> <frame src="top.html" name="top" noresize> </frameset> </frameset> と組み、上記の「menu.html」中に各コンテンツを羅列し、任意のコンテンツをクリックすると「top.html」は変わるという作りをしています。 　これを、「menu.html」中の任意のコンテンツをクリックすると「menu.html」「top.html」の両方が変わるようにしたいのですが、いい方法がありましたらどなたか教えていただけないでしょうか？　よろしくお願いします。

    • ベストアンサー
    • HTML
  • HTMLでフレームを設定したのですが...

    HTMLでホームページを作っていて、メニューとメインでフレームを分けているのですが、アドレス欄に設定ファイル名である frame.htmlを加えないと反映されません。アドレス欄にいちいち書きこまなくても アドレス欄にいちいち書きこまなくても常に表示できる方法はないでしょうか? ちなみにframe.htmlのソースは次のとおりです。 <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <frameset cols="15%,*" border="0"> <!-- menu.html=メニューファイル index.html=メインファイル--> <frame src="menu.html" noresize name="menu"> <frame src="index.h<html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <frameset cols="15%,*" border="0"> <frame src="menu.html" noresize name="menu"> <frame src="index.html" name="mein"> </frameset> </html>

  • ブラウザによってフレームの表示が異なるのですが..

    はじめまして。 現在下記のような形のＨＰを制作しているのですが、フレームが難しくてなかなか進めません。 ブラウザやそれぞれの環境によって見え方が違ってしまいます。 私の環境では真ん中にぎゅっと詰まってスクロールが出てしまうような小さな見え方になってしまっています。 どの環境で見ても統一させるにはどのようにしたら良いのでしょうか。 ------------------------------ 上の固定バー ------------------------------ メニュー｜内容 　　　　｜ 　　　　｜ 　　　　｜ 　　　　｜ ------------------------------ 下の固定バー ------------------------------ ソースは以下のように組みました。 <frameset rows="10%,*" cols="*" framespacing="0" frameborder="no" border="0"> <frame src="Margin/Index.html" scrolling="No" noresize title="topFrame"> <frameset rows="*,230" cols="*" framespacing="0" frameborder="no" border="0"> <frameset cols="215,*" frameborder="no" border="0" framespacing="0"> <frame src="Margin/Index.html" scrolling="No" noresize title="menuBarFrame"> <frameset cols="*,25%" frameborder="no" border="0" framespacing="0"> <frameset rows="64,*" frameborder="no" border="0" framespacing="0"> <frame src="topbar/topbar.html" scrolling="No" noresize title="topBarFrame"> <frameset rows="*,41" cols="*" framespacing="0" frameborder="no" border="0"> <frameset rows="*" cols="178,*" framespacing="0" frameborder="no" border="0"> <frame src="menu/menu.html" scrolling="No" noresize title="leftFrame1"> <frame src="top/top.html" name="main" title="topFrame"></frameset> <frame src="bottombar/bottomBar.html" scrolling="No" noresize title="bottomFrame1"> </frameset> </frameset> <frame src="Margin/Index.html" scrolling="No" noresize title="rightFrame"> </frameset> </frameset> <frame src="Margin/Index.html" scrolling="No" noresize title="MenuBarFrame"> </frameset> </frameset> <noframes> ------------- また、現在フレームは推奨されないのも知っているので、 オススメの組み方がありましたら教えていただけませんでしょうか。 HTML等に関してまったくの初心者ですので、判り易く教えていただけたら大変有り難く思います。どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • フレームの大きさを変更する　等

    index.htmlにフレームが定義してあります。 右・中央・左と言う感じで3つに区切っています。 <FRAMESET COLS="130,*,130" border="0"> <FRAME name="left" src="left.html" scrolling="no" frameborder="0" noresize> <FRAME name="main" src="main.html" scrolling="auto" frameborder="0" noresize> <FRAME name="right" src="right.html" scrolling="no" rameborder="0" noresize> <NOFRAMES> <BODY> <P>このページはフレームを使用しています<br>フレーム対応ブラウザーで閲覧してください。</P> </BODY> </NOFRAMES> </FRAMESET> これを、例えば中央のページのリンクをクリックすると、 フレームのサイズを変更することは可能なのでしょうか。 例 最初：<FRAMESET COLS="130,*,130" border="0"> ↓ サイズ変更リンクをクリック ↓ 変更後：<FRAMESET COLS="200,*,0" border="0"> このような感じです。 すみませんが、ご存知の方がいらっしゃいましたら、 ご教授をお願いします。 もしもよろしければ、簡単なサンプルコードもつけていただければ嬉しいです

  • フレームページが崩れる。。。

    フレームページを使っているのですが、見る人によってはページの一部が切れて 見えない部分もあるらしいです。ブラウザの大きさを変えてもレイアウトだけは 崩さない為には、どこにどんなタグが必要なんですか？ 現在のフレームの親ページのソースです。 <FRAMESET rows="30%,70%" frameborder="NO" border="0"> <FRAME src="ue.html" scrolling="NO" noresize> <FRAMESET cols="20%,80%" frameborder="NO" border="0"> <FRAME src="side.html" scrolling="NO" name="menu" noresize> <FRAME src="main.html" name="main" noresize> </FRAMESET> <NOFRAMES>

    • ベストアンサー
    • HTML
  • フレームが表示されない…

    今HPを作成してるのですが、色々とタグを試しましたが出来ないの質問します。 自分は、ポケスペというタグで色々と作成できるHPスペースで作ってるのですが、 <p align="center"> <iframe src="http://pksp.jp/*/?o=1" name="menu" frameborder="0" width="20%" height="90%"> </iframe> <iframe src="http://pksp.jp/*/?o=2" name="main" frameborder="0" width="70%" height="90%"> </iframe> </p> というタグで、インナイフレーム？は表示出来るのですが。 <FRAMESET cols="50%,50%" frameborder="NO" border="0"> <FRAME name="left" src="1のURL"> <FRAME name="right" src="2のURL"> </FRAMESET> という、普通の？インナイじゃないフレームは表示されないのです。 どなたか、わかりますか？インナイじゃなくフレームを表示させたいのです。

  • フレームの境界線を固定する。

    フレームの境界線を固定する。 fc2でサイトを作っている者です。 縦に二分割ているのですが、フレームの境界線が動いてしまいます。 固定しようと、<frame>内にnoresize="noresize"を入れても、動いてしまいます。 こういう時、どうすれば良いのでしょうか？ ↓HTML <html> <head><title>index</title></head> <frameset contenteditable="true" cols="35%,65%" frameborder="0"> <p><frame src="URL" name="menu"></frame> <frame noresize="noresize" src="URL name="main"></frame> </p></frameset><body></body></html>

  • フレームについて

    ＨＰを２つのフレームを使って作成したのですが、 １つはメニューの左フレームで、もうひとつはそれを表示する右フレームです。 <FRAMESET COLS="1*,4*"> <FRAME SRC="left.html" NAME="left"> <FRAME SRC="right.html" NAME="raight"> </FRAMESET> 例えば、メニューの左フレームの中から日記という項目をクリックすると、 右フレームに日記の内容が表示するようになっております。 そこで、右フレームに日記が表示されているときに更新をすると、 右フレームがトップに戻ってしまいます。 全部そうなってしまいます。 更新をしても、その時表示していたものを、 表示させておくにはどうすればいいのでしょうか？ 宜しくお願いします。

  • フレームページのソース

    こんにちは。 フレームページのソースについて質問させてください。 <FRAMESET COLS="20%,*" BORDER=0> <FRAME NAME="menu" SRC="menu.html" scrolling="auto" NORESIZE> <FRAME NAME="main" SRC="main.html" scrolling="auto" NORESIZE> </FRAMESET> これを　どこに入れるかですが、私が知っているソースの常識は、 １、</HEAD>のすぐ後には必ず<BODY> ２、</HTML> のすぐ前は必ず</BODY> です。これを守ってソースを書き込んでみると、 <HTML> <HEAD> <FRAMESET COLS="20%,*" BORDER=0> <FRAME NAME="menu" SRC="menu.html" scrolling="auto" NORESIZE> <FRAME NAME="main" SRC="main.html" scrolling="auto" NORESIZE> </FRAMESET> <TITLE>タイトル</TITLE> </HEAD> <BODY> <NOFRAMES> <P>サイトの説明</P> </NOFRAMES> </BODY> </HTML> このようになると思うのですが、 <HEAD>と</HEAD>に入れ込んでいいのでしょうか。 </HEAD>の下に持ってこようとすると １、２、の常識に当てはまらなくなったりするのです。 他のサイトさんのソースを見てみますと 皆さん</HEAD>下に入れていらっしゃるようです。 トップページに使用しているのでとても不安です。 どなたか、自信のある方、教えていただけないでしょうか。

    • ベストアンサー
    • HTML
  • フレームで表示すると

    自分でフレームを組んだのですが、 IEだと大丈夫だったのですが、 NN4.7で崩れてしまいました。 フレームの間に白い線が入ってしまいます。 原因がわからず、ここに質問しております。 一つの画像を縦３つに分け、真ん中は横３つに分け、 合計５マド構成のフレームにしたいと思っています。 インラインフレームのような感じです。 インラインフレームだとNNでは表示されないので、 このような形にしようと思いました。 下記のようなソースでは何か問題があるのでしょうか。 教えてください、宜しくお願いします。 <frameset rows="*,*,*" frameborder="0" framespacing="0" border="0"> <frame src="top.htm" marginwidth="0" marginheight="0" scrolling="no" noresize> <frameset cols="*,*,*" frameborder="0" framespacing="0" border="0"> <frame src="midddle_left.htm" marginwidth="0" marginheight="0" scrolling="no" noresize> <frame src="midddle_midddle.htm" marginwidth="0" marginheight="0" scrolling="yes" noresize> <frame src="midddle_right.htm" marginwidth="0" marginheight="0" scrolling="no" noresize> </frameset> <frame src="bottom.htm" marginwidth="0" marginheight="0" scrolling="no" noresize> </frameset>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する