ベストアンサー

1つのhtmlでフレームのような動きをさせるには

2009/05/12 17:19

いつもお世話になっております。フレームについて質問させてください。 <frame name="header" src="header.html" title="メニュー" scrolling="no"> <frame name="main" src="main.html" title="コンテンツ" scrolling="auto"> 現在、上記のようにフレーム分けを行い、ヘッダー（メニュー）部分は固定にして、メイン（コンテンツ）部分のみスクロールするようにしているのですが、これをフレーム分けせず、１枚のhtmlで同じように行う事は出来るのでしょうか。よろしくお願いします。

take_july
お礼率54% (88/162)

HTML
回答数6
ありがとう数0

みんなの回答 （6）
専門家の回答

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2009/05/12 17:32 回答No.3

iframeをつかうとか？そうでないならたとえばこんな感じ。 <head> <style> #header{ background-Color:red; } #main{ height:80%; background-Color:yellow; overflow-y:scroll; } </style> </head> <body> <div id="header"> メニュー </div> <div id="main"> test test test test test</div> </body>

質問者

補足 2009/05/13 21:35

サンプルまで表示して頂き、ありがとうございます。色々試してみたのですが、解決できない事がありますので、質問させてください。提示頂いたサンプルを下記のように少し変更してみたのですが、画面サイズを小さくしてみた所、一番下の "見えなくなる"という行が下にスクロールしても見えなくなってしまいました。フレームで分けた場合は大丈夫だったのですが、こちらなんとかする方法はありますでしょうか。よろしくお願いします。 <head> <style> #header{ background-Color:red; } #main{ height:80%; background-Color:yellow; overflow-y:scroll; } </style> </head> <body scroll="no"> <div id="header"> メニュー1 メニュー2 メニュー3 メニュー4 メニュー5 メニュー6 メニュー7 </div> <div id="main"> test test test test 見えなくなる </div> </body>

その他の回答 (5)

askaaska
ベストアンサー率35% (1455/4149)

2009/05/13 18:53 回答No.6

> 全く同じ風にする事スタイルシートや必要なら画像を使ってがりがり作り込むしかないわね。

質問者

補足 2009/05/14 13:24

ご回答いただき有難うございます。下にも記入させて頂きましたが、下のｈｔｍｌを画面サイズを小さくしてみた所、一番下の "見えなくなる"という行が下にスクロールしても見えなくなってしまいました。フレームで分けた場合は大丈夫だったのですが、こちらなんとかする方法はありますでしょうか。よろしくお願いします。 <head> <style> #header{ background-Color:red; } #main{ height:80%; background-Color:yellow; overflow-y:scroll; } </style> </head> <body scroll="no"> <div id="header"> メニュー1 メニュー2 メニュー3 メニュー4 メニュー5 メニュー6 メニュー7 </div> <div id="main"> test test test test 見えなくなる </div> </body>

noname#144864

2009/05/13 08:43 回答No.5

#4 です。ごめんなさい、 >div#menu {......top : 15em ; .....} は、div#menu {......top : 7em ; .....}です。数字を間違えました。

noname#144864

2009/05/12 23:15 回答No.4

こんばんは。所謂、スクロールしてもメニューの部分だけ固定させたいと言うことですね。それならば、固定したいメニューに position 要素を使い、値を fixed にします。 CSS の一例簡単に、メニューを左上にして固定させてみましょう。位置は左に 2em トップ 7em メニュー枠の色は teal メニュー幅は 10 em 他 body {margin : 1em 5em 2em 14em ;} div#menu {position : absolute ; left : 2em ; top : 15em ; width : 10em ; border : dotted 2px teal ; float : left ;} body > div#menu {position : fixed ; } position : fixed ; は Windows 版 IE 6 まで対応していません。 Windows 版 IE 7 ～及び Mac 版 IE 5.x , Firefox や Opera , Safari , SeaMonky , Shiira など私が確認したブラウザでは対応しています。上記のことを踏まえて Windows IE 6 まではスクロールしてしまうメニューにして、 position : fixed ; に対応しているブラウザにはメニューを固定しよう、と言うことで、 div#menu {position : absolute ; .......} にして、 body > div#menu {position : fixed ; } を使いました。これは、 Windows IE 6 までは子供セレクターに対応していないことを利用しています。 (子供セレクターについては、ご存じですよね) では html の一例リストの <ul> を使って、メニューを作ります。文書型宣言や <body> <html> 等は省略 <h1>メニューを固定するページを作る</h1> <div id="menu"> <ul> <li><a href="menu01.html" title="メニュー１">メニュー１</a></li> <li><a href="menu02.html" title="メニュー２">メニュー２</a></li> <li><a href="menu03.html" title="メニュー３">メニュー３</a></li> ........ </ul> </div> このテキストは、メニューの右側に表示されます。ここに、好きなコンテンツを書いてみましょう。 もしこの要素をお使いになるのならば、Windows 版 IE 6 までは対応していない、と言うことを念頭に置いてください。

okg00
ベストアンサー率39% (1322/3338)

2009/05/12 17:27 回答No.2

http://himajin.moo.jp/menu/menu5.html http://himajin.moo.jp/menu/menu3.html

askaaska
ベストアンサー率35% (1455/4149)

2009/05/12 17:27 回答No.1

<div id="header"> header.htmlの内容 </div> <div id="main"> main.htmlの内容 </div> としてheaderとmainにそれぞれ overflow:none、overflow:scroll をスタイルシートとして設定するといいわ。もちろん、widthとheightも忘れずにね。

質問者

補足 2009/05/13 17:35

ありがとうございます。微妙なのですが、どうしても若干違う風になってしまうようなのです。全く同じ風にする事は難しいのでしょうか。

関連するQ&A

フレームがきれいになりません。
下記のように上と、左右で３フレームを分けて表示していますが、 <frameset rows="60,*" border="0" frameborder="0" framespancing="0"> <frame src="title.html" name="head" scrolling="no"> <frameset cols="130,*" border="0" frameborder="0" framespancing="0"> <frame src="menu.html" name="menu" scrolling="auto"> <frame src="cont.html" name="main" scrolling="auto"> </frameset> </frameset> *で表示しても、左のフレームの下にスクロールバーが出てしまいます。どのようにすれば直るのか初心者のため分からなくて困っています。もし分かる方是非教えてください。現状はこんな感じになってしまっています↓ http://www.twinklecloset.com/index.html
- 締切済み
- HTML
フレームセットができない・・
フレーム構造のページを直に呼び出すためのリンクを作ろうとしています。要は、フレームがセットされた状態で呼び出すということです。 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
下に表示されるスクロールバーの消し方を教えてください。
下記のようにtitle（上）、menu（右）、main（左）と、３つのフレームを分けて表示していますが、 <frameset rows="60,*" border="0" frameborder="0" framespancing="0"> <frame src="title.html" name="head" scrolling="no"> <frameset cols="130,*" border="0" frameborder="0" framespancing="0"> <frame src="menu.html" name="menu" scrolling="auto"> <frame src="cont.html" name="main" scrolling="auto"> </frameset> </frameset> *で表示しても、main（右）のフレームの下にスクロールバーが出てしまいます。右端の上下のスクロールはいかしたまま、下のスクロールバーを消すには、どのようにすればよいのでしょうか？分からなくて困っています。もし分かる方是非教えてください。現状はこんな感じになってしまっています。http://www.twinklecloset.com/index.html
- ベストアンサー
- HTML
フレームを使ったページ
<FRAMESET ROWS="105,*" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0" NOBORDER> <FRAME SRC="menu.html" name="menu" scrolling="no" noresize marginwidth="0" marginheight="0"> <FRAME src="main.html" name="main" scrolling="no" marginwidth="0" marginheight="0"> </FRAMESET><noframes></noframes> 上記フレームを使ったページを更新ボタンで更新すると横にスクロールバーが表示されます。スクロールバーがでるのは上のページ（menu.html）で下ページ（main.html）にはでません。 win（Netscape,IE）で確認するとでないのですがMac（IE）だとスクロールバーがでてしまいます。どうすれば解消できるでしょうか。教えて下さい。よろしくお願いいたします。
- ベストアンサー
- 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> サイトの説明 </NOFRAMES> </BODY> </HTML> このようになると思うのですが、 <HEAD>と</HEAD>に入れ込んでいいのでしょうか。 </HEAD>の下に持ってこようとすると１、２、の常識に当てはまらなくなったりするのです。他のサイトさんのソースを見てみますと皆さん</HEAD>下に入れていらっしゃるようです。トップページに使用しているのでとても不安です。どなたか、自信のある方、教えていただけないでしょうか。
- ベストアンサー
- HTML
フレームページが崩れる。。。
フレームページを使っているのですが、見る人によってはページの一部が切れて見えない部分もあるらしいです。ブラウザの大きさを変えてもレイアウトだけは崩さない為には、どこにどんなタグが必要なんですか？現在のフレームの親ページのソースです。 <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
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タグ辞典や調べて探しきれませんでした。既に同じ質問が出ていたら申し訳ありません、何卒宜しくお願い致します。　現在　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
ＤＭＭＸ2004のフレームのスクロールバーがっ！
はじめて投稿させていただきます。ＤＭＭＸ2004でフレームのページを作っているのですが、左側のメニューから右側のメインページをターゲットにして飛ぶと、どうしてもウインドウ下辺のスクロールバーが出てしまうのです。改行のみの単純なページだとしても同じで、サイトの外観を著しく損なうので、どなたかお教えいただけないでしょうか。ちなみにスクロールバーの設定は自動(auto)になってす（特にいらないときにも出てくる）以下がフレームのソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>flame</title> </head> <frameset cols="120,*" frameborder="NO" border="0" framespacing="0"> <frame src="menu.html" name="menu" scrolling="auto" noresize> <frame src="main.html" name="main" scrolling="auto"> </frameset> <noframes><body> </body></noframes> </html> それではよろしく御願いします。
- 締切済み
- HTML
メインのフレームページを表示させる方法
フレーム使用のホームページを作っているのですが、 Yahoo等で検索すると、メインのフレーム以外のページもでてきて、そこから開くとメインページに戻れません。どのように設定したらよいのか教えて下さい。それとも、不可能なのでしょうか？順序が逆になりましたが、ちなみに現在下記のようになっています。メニューを表示する画面と内容を表示する画面に分かれているのですが、内容表示のページに <TITLE>○○○</TITLE> <BASE href="×××.html"> と書き加えてもダメでした。なお、フレームページの一部分は <frame name="contents" target="_parent" src="menyu.html" scrolling="auto"> <frame name="main" src="△△.shtml" target="_self" scrolling="auto" noresize> </FRAMESET> としています。アドバイスよろしくお願い致します。
- ベストアンサー
- HTML

1つのhtmlでフレームのような動きをさせるには