フレームの大きさを変更する方法とサンプルコード | フロントエンド開発
- フレームの大きさを変更する方法について説明します。index.htmlに定義されているフレームを3つに区切り、中央のページのリンクをクリックすることでフレームのサイズを変更することが可能です。
- サイズ変更の方法は、FRAMESET要素のCOLS属性の値を変更することです。最初はCOLS="130,*,130"となっており、これを変更することでフレームの幅を調整できます。
- 例えば、中央のページのリンクをクリックすると、COLS="200,*,0"のようにフレームの幅が変更されます。これにより、フレームの大きさを自由に調整することができます。
- ベストアンサー
フレームの大きさを変更する 等
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"> このような感じです。 すみませんが、ご存知の方がいらっしゃいましたら、 ご教授をお願いします。 もしもよろしければ、簡単なサンプルコードもつけていただければ嬉しいです
- if-so-at
- お礼率51% (91/176)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
あなたが今変更したいのは <FRAMESET COLS="130,*,130" border="0" name="holygate"> のcolsの値でしょ？ parent.left.document.cols=leftsize; これじゃあ <FRAME name="left" src="left.html" scrolling="no" frameborder="0" noresize> が表示しているHTML内のcolsを変更しようとしているじゃない。 いったい「document」がどこから来たんだか・・・。 ただまねして実装しようとしないで 書かれている識別子が何を指しているのか 考えながら作っていかないと いつまでも理解できないわよ。
その他の回答 (1)
- askaaska
- ベストアンサー率35% (1455/4149)
関連するQ&A
- フレームページが崩れる。。。
フレームページを使っているのですが、見る人によってはページの一部が切れて 見えない部分もあるらしいです。ブラウザの大きさを変えてもレイアウトだけは 崩さない為には、どこにどんなタグが必要なんですか？ 現在のフレームの親ページのソースです。 <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
- フレームページのソース
こんにちは。 フレームページのソースについて質問させてください。 <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
- ブラウザによってフレームの表示が異なるのですが..
はじめまして。 現在下記のような形のＨＰを制作しているのですが、フレームが難しくてなかなか進めません。 ブラウザやそれぞれの環境によって見え方が違ってしまいます。 私の環境では真ん中にぎゅっと詰まってスクロールが出てしまうような小さな見え方になってしまっています。 どの環境で見ても統一させるにはどのようにしたら良いのでしょうか。 ------------------------------ 上の固定バー ------------------------------ メニュー｜内容 ｜ ｜ ｜ ｜ ------------------------------ 下の固定バー ------------------------------ ソースは以下のように組みました。 <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
- フレームが固定できない
Dreamweaverで左固定メニューで右にメインフレームがでるものをつくっています。 プレビューでみると画面の大きさを大きくすると左フレームと右フレームのあいだに白い余白ができ、画面を小さくするとその間が交差しながら小さくなります。 noresizeをいれているのですが、これがなおりません！画面の大きさをかえても右フレームと左フレームの境界線をなしにしたいのですがどうしたらいいのでしょう。 ちなみにコードはこうなっています。 <frameset rows="*"cols="245,900" frameborder="no" border="0"> <frame src="menu/menu.html" name="leftframe" frameborder="no" scrolling="no" noresize="noresize" marginwidth="0" marginheight="0" id="leftframe" border="0"/> <frame src="welcomephoto.html" name="mainframe" frameborder="no" noresize="noresize" marginwidth="0" marginheight="0"id="mainframe" border="0" /> </frameset> <noframes><body> </body> </noframes></html>
- ベストアンサー
- ホームページ作成ソフト
- フレームすくローリング有り／無し
こんにちわ だいぶ前に登録してから、久しぶりに 質問させて頂きます。 フレームページの作成をしております。 右がメインで、左がメニューの一般的なものですが、 左のメニューフレームについて、、、 縦幅はスクロール有り 横幅はスクロール無しにし、幅を固定したいのですが HTMLタグ辞典や調べて探しきれませんでした。 既に同じ質問が出ていたら申し訳ありません、 何卒宜しくお願い致します。 現在 indexのタグは以下のとおりです。 --------------- <frameset rows="*" cols="150,*" frameborder="NO" border="0" framespacing="0"> <frame src="left_frame.htm" name="leftFrame" scrolling="auto" noresize> ↑↑↑↑↑↑↑↑ auto にすると、横も縦も スクロール出てしまいます；＿； <frameset rows="82,*" cols="*" framespacing="0" frameborder="NO" border="0" Marginwidth="5"> <frame src="frame_above.htm" name="topFrame" scrolling="NO" noresize> <frame src="main.htm" name="mainFrame"> </frameset> </frameset> <noframes><body> ---------------
- 締切済み
- HTML
- フレームページの隙間
フレームページを作ったのですが、フレームの間の隙間をなくしたのですがどのようになくすのか解りません。どうか教えて頂けないでしょうか。お願します。 実際のソースコート <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META name="GENERATOR" content="IBM HomePage Builder 2001 V5.0.0 for Windows"> <TITLE>もっくもっく</TITLE> </HEAD> <FRAMESET rows="155,*" frameborder="0" border="0" framespacing="0" framepadding="0"><!-- 上のフレーム --> <FRAME src="osawa1.html" name="1" scrolling="no" noresize topmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> <FRAMESET cols="700,*" frameborder="0" border="0" framespacing="0" framepadding="0"><!-- 左のフレーム --> <FRAME src="osawa2.html" name="2" scrolling="auto" noresize mtopmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> <!-- 右のフレーム --> <FRAME src="osawa3.html" name="3" scrolling="no" noresize topmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> </FRAMESET> <NOFRAMES> <BODY topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">フレーム対応ブラウザでご覧ください。</BODY> </NOFRAMES> </FRAMESET> </HTML>
- 締切済み
- HTML
- フレームページの固定について
お世話になります。 下記のようなフレームページを作成しているのですが、 変更をしたいと考えております。 その場合、全体の幅を860pxに固定したいのです。 一応、<FRAMESET COLS="250,610" と行ったのですが、 右側が広がってしまいます。 どのようにしたらよいか教えていただけないでしょうか。 <FRAMESET ROWS="350,*"> <FRAME NAME="_bs1" SRC="aa1.html"> <FRAMESET COLS="250,610" border=0 framespacing=0 frameborder=no> <FRAME NAME="_bs2" SRC="aa2.html" MARGINWIDTH="0px" MARGINHIGHT="0" NORESIZE> <FRAME NAME="_bs3" SRC="aa3.html" MARGINWIDTH="0px" framespacing=0 MARGINHIGHT="0" NORESIZE> </FRAMESET> </FRAMESET><noframes></noframes> </HTML>
- ベストアンサー
- ホームページ作成ソフト
- フレーム内から親ウィンドウにロケーション？
こんにちは。 どなたかよい解決策をご存知でしたら教えてください。 フレームで切られたウィンドウの一部のフレームから、PHP（ver.3）でページをロケーションで呼ぶと、そのフレームの中に呼んだページが表示されてしまいます。 JavaScriptは使わずに、親ウィンドウにページを表示させることは出来ないでしょうか、、、 よろしくお願いいたします。 以下はイメージサンプルです。 ■frame.html <html> <head><title>フレームセット</title></head> <frameset cols="100,*" frameborder="NO" border="0" framespacing="0"> <frameset name="left" rows="60,*" frameborder="NO" border="0" framespacing="0"> <frame name="a" noresize scrolling="NO" src="./test1.html"> <frame name="b" noresize src="./test2.html"> </frameset> <frameset name="right" rows="44,*" frameborder="NO" border="0" framespacing="0"> <frame name="c" noresize scrolling="NO" src="./test3.html"> <frame name="d" noresize src="./locat.php3"> </frameset> <noframes> このページはフレーム対応のブラウザでご覧ください。 </noframes> </frameset> </html> ■locat.php3 <? header("Location: ./test4.html"); exit(); ?> ■test1.html <html> <head><title>テスト1</title></head> <body> 左上 </body> </html> ■test2.html <html> <head><title>テスト2</title></head> <body> 左下 </body> </html> ■test3.html <html> <head><title>テスト3</title></head> <body> 右上 </body> </html> ■test4.html <html> <head><title>テスト4</title></head> <body> このページをウィンドウ全画面に表示 </body> </html>
- 締切済み
- PHP
- フレームセットができない・・
フレーム構造のページを直に呼び出すためのリンクを作ろうとしています。 要は、フレームがセットされた状態で呼び出すということです。 http://www.ほげ.net/ほげ/ほげ/021107_ほげ.html メイン部分のURLがこうだとして。 http://www.ほげ.net/ほげ/ほげ/021107_ほげ2.html この場合は、同じディレクトリーにソースを入れ込みます。ファイル名は 021107_ほげ2.htmlです。そうすれば、例えばメルマガなどで上記URLを入れ込 めば、フレームセット状態でページが表示されるはずなんですが メインの文章の右側をスクロールさせます。で、以下のようなソースを作った のですがどうしてもメインのhtmlが出てきてくれません。 □□□□□□□□□□□□□□□□□□□□□□□ header.html □□□□□□□□□□□□□□□□□□□□□□□ □ □ ※ □ ス □ ク menu.html □ ロ □ ル □ ****.html ※ ------------------------------------------------ </HEAD> <frameset rows="90,*" border="0" framespacing="0" frameborder="NO"> <frame src="../../header.html" name="header" noresize scrolling="NO"> <frame src="../../menu.html" name="left" noresize scrolling="NO"> <FRAME SRC="*****.html" NAME="main" SCROLLING=YES> <NOFRAMES> <BODY> このページを見るのにはフレームの表示ができるブラウザが必要です。 </BODY> </NOFRAMES> </FRAMESET> </HTML>
- ベストアンサー
- HTML
- 横スクロールバーを消したいんです（＞＜）
こんにちは。とっても困っています。 ホームページを作成中ですが横スクロールバーが消えません。以下の プログラムのどこを直したらいいでしょうか。 どうぞよろしく御願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> </head> <frameset rows="107,318*" cols="777*,1" frameborder="no" border="0" framespacing="0"> <frame src="vxv.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" /> <frame src="UntitledFrame-23"> <frameset rows="*" cols="122,652*" framespacing="0" frameborder="no" border="0"> <frame src="dfg.html" name="leftFrame" scrolling="No" noresize="noresize" marginwidth="0" id="leftFrame" title="leftFrame" /> <frame src="main.html" name="mainFrame" id="mainFrame" title="mainFrame" /> </frameset> <frame src="UntitledFrame-24"> </frameset> <noframes><body> </body> </noframes></html>
- 締切済み
- HTML
お礼
回答ありがとうございます。 そのような感じなのですが、指定してみてもフレームのサイズの変更が実行されません。 コードを貼りますので、添削の方をお願いできないでしょうか。 フレームサイズ変更のJS function changefreamsize(leftsize,centersize,rightsize){ parent.left.document.cols=leftsize; parent.main.document.cols=centersize; parent.right.document.cols=rightsize; } フレーム <HTML> <HEAD> <TITLE>HOLY GATE</TITLE> </HEAD> <FRAMESET COLS="130,*,130" border="0" name="holygate"> <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> </HTML>