• ベストアンサー

リンク先のページの複数のフレームを同時に変えるには

全くの初心者です。 最近になってボケ防止?をかねてHPの勉強を始めました。早速ですが作成中(メモ帳使用)のHPに関して以下についてわからず悩んでいます。ご教示願えればありがたいのですが... 質問 HPの導入部から画面を上端のメニューと左側の見出しサイト、メイン部、ボトム(画面クリア用)の4分割にしてサイズが固定されています。 メニュー(ページ)間を移るときに各フレームのサイズや色を変更したり、サイズの数を減らしたりすることが出来るのでしょうか> 以上宜しくお願いいたします

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

  • ベストアンサー
  • EUR
  • ベストアンサー率61% (29/47)
回答No.2

JavaScriptを用いることになります。 フレームのサイズを変更する場合は、フレームセットを行っているページの<frameset>タグをいじります。 フレームセットを行っているページが以下とすると、 <html> <head> <title>サンプル<title> </head> <frameset name="SET1" rows="50, 500, *">   <frame name="header" src="header.html">   <frameset name="SET2" cols="200, *">     <frame name="menu" src="menu.html">     <frame name="main" src="main.html">   </frameset>   <frame name="footer" src="footer.html"> </frameset> <html> たとえば、ヘッダーの高さを100pxに、メニューの幅を150pxにしたい場合は、 document.all("SET1").rows = "100,500,*"; document.all("SET2").cols = "150,*"; という風に変更します。 実際は、ページを遷移した際にサイズが変更されるとのことなので、 変更があったページのロード時(onLoad)で parent.document.all("SET1").rows = "100,500,*"; parent.document.all("SET2").cols = "150,*"; を実行することになると思います。 ※document.allはIE独自の仕様ですので、適当に変更してください。 フレームの色を変えるということですが、実際に変更するのは、読み込まれるHTMLの色を変えることになります。 読み込まれるページごとに <body bgcolor="#909090">等、指定をします。 最後に、サイズの数についてですが・・・ ちょっとあいまいでわかりませんでした。 サイズの数とは、何を示しているか、補足をお願いいたします。

tororo2001
質問者

お礼

早速のアドバイスありがとうございます。 JavaScriptということになると当面手も足も出ないという感じなのですがご提示のプログラムもふくめてじっくり勉強して今後に生かしていきたいと思います。

その他の回答 (2)

回答No.3

とにかく簡単な方法という考え方で選ぶと、 フレームの中で読み込むファイルでフレームとすればデザインの制限が付きますが容易に可能です。 まぁ発想としては、各ページごとにフレームを別途用意して毎回フレームごと呼び出すのと同じですが・・・。 尚、知識を付けた後には javascript での実現をお勧めします。 最終的には、スタイルシートも絡めた仕掛けにすると理想的です。 あと、ある程度知識がつくまでは 逆にフレームを使わない事をお勧めします。 個々のファイル(ページ)を個別にフレームなしで観られた場合の配慮とか(検索サイトからよくあるパターン) フレームに対応していないブラウザへの配慮。 それから JavaScript に於いては意図的に無効にしている閲覧者や元から無効のブラウザの考慮にブラウザの種類,バージョンによっての動作の違いへの配慮 スタイルシートは特にブラウザのバグへの考慮などなど・・・ 考える事がたくさん発生してきます。 (例えば、#2の方の document.all などは対応していないブラウザもあります。 まぁ初心者なんだから基本的に困らないなら問題なしという考え方なら、未対応の部分も無視でいいかも?) 簡単にいえば、「急に面倒な事の実現を希望していますが」という事です。 (知らないから質問しているのだし、当然難易度も判らないはずなので、その辺は理解してどこかで妥協してください。)

tororo2001
質問者

お礼

早速のアドバイスありがとうございます。私の求めていたものが初心者にはかなり難易度高いものであったようです。 JavaScriptということになると手も足も出ないという感じなのですがじっくり勉強して今後に生かしていきたいと思います。当面はフレームの使用について考え直したいと思います。

  • einste
  • ベストアンサー率25% (1/4)
回答No.1

JavaScriptで実現することが可能です。 お勧めは、JavaScriptの例文集を探していただき。フレームに関する例文を 参考に作成してみることです。 JavaScript例文活用"といったキーワードでWebで検索できます。 ブラウザ上のオブジェクト(物)が階層化されており、上から順番に指定して いき、オブジェクトを特定しその属性を書き換えるということが必要です。 参考に、上下フレームで他方の色を書き換える例を記載します。 top.footer.document.bgColor top ├header │ └document └footer └document.bgColor ■index.html <html> <head> <frameset rows="50%,*"> <frame name="header" src="frame_header.html"> <frame name="footer" src="frame_footer.html"> </frameset> </head> </html> ■frame_header.html <html> <head> </head> <body> 上のフレーム<br> <input type="button" value="gray" onClick="top.footer.document.bgColor='gray'"> </body> </html> ■frame_footer.html <html> <head> </head> <body> 下のフレーム </body> </html> 初心者ということなので、ひとつづつ学習されるのが良いかと思います。 また、具体的なやりたいことを提示していただければ回答いたします。

tororo2001
質問者

お礼

早速のアドバイスありがとうございます。 JavaScriptということになると当面手も足も出ないという感じなのですがご提示のプログラムもふくめてじっくり勉強して今後に生かしていきたいと思います。

関連するQ&A