フレームでのcols設定について

前へ 次へ
このQ&Aのポイント
  • フレームのcols設定について調べている方向けの要約文です。質問者はframesetのcols設定でブラウザの中心から左に329ピクセルの幅を設定したいと考えていますが、JavaScriptを使用してブラウザの幅を取得して実現しようとしてもうまくいかないと悩んでいます。どのような方法でも構わないので、助言を求めています。
  • 質問者はフレームを使用してホームページを作成していますが、framesetのcols設定について困っています。ブラウザの中心から左に329ピクセルの幅を設定したいと思っており、JavaScriptを使用してブラウザの幅を取得して計算しようとしていますが、うまくいかないという問題に直面しています。どのような方法でも大丈夫なので、アドバイスをいただけると助かります。
  • フレームを使用してホームページを作っている質問者が、framesetのcols設定についてアドバイスを求めています。質問者はブラウザの中心から左に329ピクセルの幅を設定したいと考えており、JavaScriptを使用してブラウザの幅を取得して計算しようとしてもうまくいきません。問題の解決策についてのヒントやアイデアをお持ちであれば、教えていただけると助かります。
回答を見る
  • ベストアンサー

フレームでのcols設定について

フレームを使用してホームページを作っている者です。 framesetのcolsの設定にて ブラウザの中心から左へ329ピクセル左をフレームの境目に設定したいのですが、 可能でしょうか？ 気持ちとしては <frameset cols="50%-329,*"BORDER="0"> と設定したい感じです。 JavaScriptを使用して ブラウザの幅を取得して半分にして329ピクセル加算する方法で実現しようと考え ------------------------------------------------------------------------------ <html lang="ja"> <HEAD> <title>フレーム設定</title> </HEAD> <script language="javascript" type="text/javascript"> //ブラウザ幅を求めるgetBrowserWidth() //my-notebook（http://osima.jp/blog/js-getBrowserWidth/index.html）さんから拝借 function getBrowserWidth() { if ( window.innerWidth ) { return window.innerWidth; } else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; } else if ( document.body ) { return document.body.clientWidth; } return 0; } </script> <script language="javascript" type="text/javascript"> //フレームの左側の幅を求めるLeftWide() function LeftWide() { var leftwide = (getBrowserWidth())/2-329; return leftwide; } //framesetを出力するFrameSet() function FrameSet() { var output = '<frameset cols="' + LeftWide() + ',*"BORDER="0">'; document.write(output); } </script> <script language="javascript" type="text/javascript"><!-- //FrameSet()の呼び出し FrameSet(); // --></script> <frame src="./左のページ.html" name="left" marginwidth="0"> <frame src="./右のページ.html" name="right"> </frameset> </html> ------------------------------------------------------------------------------ と書いたのですが、 getBrowserWidth() を<BODY>～</BODY>内に書かないとブラウザ幅を取得してくれないらしく、 return 0;が帰ってきてしまい、左のページだけ表示され期待した結果が得られませんでした。 framesetの有るHTMLには<BODY>～</BODY>は定義できないのでここで詰んでしまいました。 ブラウザの中心から左へ329ピクセル左をフレームの境目に設定出来るのであれば どんな方法でも構いません。 お知恵を拝借させてください。よろしくお願いします。 追記 当方ブラウザはIE9を使用しております。 HTML、JavaScript共に初心者ではありませんが、 趣味程度の浅い知識しか御座いません。

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

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

＞フレームってそんなに古い技術なのですか。 ＞メニューがページと一緒にスクロールされないのが便利で使ってたのですが、 　いくつか理由があります。 1) 仕様書の『HTML文書を作る場合には、この仕様における、他のDTDセット(frameset,transitinal)ではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 2) HTML フレーム 問題 - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=HTML+%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0+%E5%95%8F%E9%A1%8C&oq=HTML+%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0+%E5%95%8F%E9%A1%8C&aq=f&aqi=g1&aql=&gs_l=hp.3..0.5050.18466.1.19111.26.21.4.1.1.0.416.2486.7j13j4-1.21.0...0.0.t7FW49lFlJ4&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=b828422d21800ef4&biw=1024&bih=615 ) ＞メニューがページと一緒にスクロールされないのが便利で使ってたのですが、 　その場合は、面倒でも各ページにメニューを置き、スタイルシートのfixedで固定することが多いです。 　HTML4.01の勧告(1999年)以来、言われ続けてきたのは「(文書)構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.2 )」「広汎なWebアクセス性の考慮 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.2 )」です。HTMLには「どの部分が見出し、どの部分がナビゲーション・・」とマークアップするだけにして、プレゼンテーションはすべてスタイルシートに任せることです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より 　現在もっとも問題になるのが、フレームで構成されたページを携帯電話やスマートフォンのような小さなディスプレイで見ると見づらいこと、ブックマークに登録できないこと、検索エンジンが理解できないことなどでしょう。それぞれに合わせてページを作成することは、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。・・・【中略】・・・なぜならただ1種類の文書しか作る必要がなくなるからだ。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より 　フレームではなく、率直に文書構造だけを記述したHTMLを作成し、スタイルシートでデザインするなら、単に「メニューを固定する」以上に、もっともっと気の利いた形にできますよ。

pinoue
質問者

お礼

詳しく教えて頂き有難う御座います。 フレームとはここで決別しようと思います。 スタイルシートについては、 「スタイルシートのfixedで固定することが多いです。」 あたりを元に調べて勉強してみようと思います。 ご回答本当に有難う御座いました。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

　フレームはあまりにも古い技術で、問題も多く私はここ十年以上使っていませんが、フレームではそのような方法は無理です。 　これも、フレームと同じく非推奨ですがtransitinalのiframeを使うか、strictでしたら、object要素を使うことになるでしょう。 　ウェブ標準を優先するなら、objectになりますが、frameやiframeほどの能力はありません。また、外部ソースではなく、自身の中に内容を持たせてdispla:blockやoverflow:auto;を使うのがベストです。 　フレームで表示したい内容がどんなものかによって、どれが適切かを判断してください。

pinoue
質問者

お礼

ご回答有難う御座います。 やはり無理ですか、残念です。 フレームってそんなに古い技術なのですか。 メニューがページと一緒にスクロールされないのが便利で使ってたのですが、 そろそろ変え時なのかもしれませんね。

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

関連するQ&A

  • jqfloat.jsを複数の画像に適用したい

    javascriptで7枚の画像をブラウザの中にランダム配置で表示させ、 さらにjQueryのjqfloat.jsで画像をふわふわ動かす、というものを作っています。 ランダム配置まではうまくいったのですが jqfloatが７枚のうち１枚にしか適用されず困っております。（最後のid='fuwa'のところ） jsの勉強を始めたばかりでスクリプトの書き方が変だったりするかもしれませんが… どなたか対処法を教えていただけませんでしょうか。 どうぞよろしくお願い致します！ <script type="text/javascript"><!-- $(document).ready(function() { $('#fuwa').jqFloat({ width: 50, height: 50, speed: 2500 }); }); var images = [ {img : "1.png" , url : "http://1.com"}, {img : "2.png" , url : "http://2.com"}, {img : "3.png" , url : "http://3.com"}, {img : "4.png" , url : "http://4.com"}, {img : "5.png" , url : "http://5.com"}, {img : "6.png" , url : "http://6.com"}, {img : "7.png" , url : "http://7.com"} ]; images.sort(function(){return Math.random() - Math.random();}); function getBrowserWidth ( ) { if ( window.innerWidth ) { return window.innerWidth; } else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; } else if ( document.body ) { return document.body.clientWidth; } return 0; } function getBrowserHeight ( ) { if ( window.inneHeight ) { return window.innerHeight; } else if ( document.documentElement && document.documentElement.clientHeight != 0 ) { return document.documentElement.clientHeight; } else if ( document.body ) { return document.body.clientHeight; } return 0; } Imgn=7; for (i=0; i < Imgn; i++){ xpx = 50+Math.floor(Math.random() * (window.innerWidth -280)) + 1; ypx = 30+Math.floor(Math.random() * (window.innerHeight -300)) + 1; thumbs="<div style='position:absolute;left:"+ xpx +"px;top:"+ ypx +"px;' id='fuwa'><a href='"+images[i].url+"'><img src='"+images[i].img+"'></a></div>"; document.write(thumbs); } </script>

  • ホームページのフレームでそのサイズの固定

    ホームページを上下２分割、下の段を左右２分割にしているのですが、フレーム分けの境界線を固定したいのです。 境界線はパーセンテージで出てしまうのですが これを上から＊＊＊ピクセル、左から＊＊＊ピクセルのように、固定できないでしょうか？ パーセンテージだとPCの表示サイズの違いで、スクロールバーが出てしまい困ります。 よろしくお願いします。 <FRAMESET rows="24%,76%" frameborder="NO" border="0"> <FRAME name="frame1" src="top.html"> <FRAMESET cols="16%,84%"> <FRAME name="frame2" src="menu.html"> <FRAME name="frame3" src="page1.html"> </FRAMESET> <NOFRAMES> <BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </BODY> </NOFRAMES> </FRAMESET>

  • Android端末実表示ピクセル数の取得方法

    Android端末の液晶解像度を取得しJavaScriptを使ったHTMLでの参照方法がわからないのでお教え願えないでしょうか Windows機でのブラウザ表示域をHTML内にJavaScriptを用いて取得するには以下の方法で可能になったのですが、 var wobj = new Object(); wobj.x = document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth; wobj.y = document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight; wobj.x = ブラウザの表示横ピクセル数 wobj.y = ブラウザの表示縦ピクセル数 上の関数を使ってAndroid端末から値を得るとViewportの値の１２８０、８００が帰ってきます。 Viewportの値ではなく液晶画面での表示域(ピクセル数)を取得したいのですが可能でしょうか 御存知の方、よろしくお願いします。

  • フレームサイズの変更について

    過去ログを参照していたら、次のようなサンプルを発見したのですが、 IEでは動作しますが、FireFoxではエラーになってしまいます。 どこを修正すれば動くようになるでしょうか？ ■frame.html■ <html> <head><title></title> <script language="javascript"> <!-- document.write(frset('40%','60%','a.htm?','1.htm?')) function frset(a,b,f1,f2){ var frset= '<title>frame</title>\n' +'<frameset cols="'+a+','+b+'">\n' +'<frame src="'+f1+'">\n' +'<frame src="'+f2+'">\n' +'</frameset>\n' return frset } //--> </script> </head> </html> ■a.html■ <html> <head><title></title> </head> <body> 右のリンクで<br>フレームのサイズ<br>が変わるよ！ </body> </html> ■1.html■ <html> <head><title></title> <script language="javascript"> <!-- function chsize(a,b){ if(location.search==""){ if(document.all){ parent.document.all.tags("frameset")[0].cols=a+","+b }else{ //parent.document.open() parent.document.write(frset(a,b,parent.frames[0].location.href+"?",parent.frames[1].location.href+"?")) parent.document.close() } } } //--> </script> </head> <body onload="chsize('40%','60%')"> こっち側６０％です。 <br> <a href="2.htm">こっち側を４０％にする！</a> </body> </html> ■2.html■ <html> <head><title></title> <script language="javascript"> <!-- function chsize(a,b){ if(location.search==""){ if(document.all){ parent.document.all.tags("frameset")[0].cols=a+","+b }else{ //parent.document.open() parent.document.write(frset(a,b,parent.frames[0].location.href+"?",parent.frames[1].location.href+"?")) parent.document.close() } } } //--> </script> </head> <body onload="chsize('60%','40%')"> <a href="1.htm">こっち側を６０％にする！</a> <br> こっち側４０％です。 </body> </html>

  • 右側のフレームを上にするには？

    <html> <head> <title>フレーム</title> </head> <frameset rows="100,*"> <frame src="about.html"> <frameset cols="*,500"> <frame src="link.html"> <frame src="img/index.html"> </frameset> <noframes> <body> 未対応ブラウザ向け内容</body> </noframes> </frameset> </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"> このような感じです。 すみませんが、ご存知の方がいらっしゃいましたら、 ご教授をお願いします。 もしもよろしければ、簡単なサンプルコードもつけていただければ嬉しいです

  • location.hrefを使用したFRAME表示

    location.hrefを使ったjavascriptを作ろうとしています。 <script type="text/javascript"><!-- location.href = "http://www.yahoo.co.jp/"; // --></script> の改良版として、http://www.yahoo.co.jp/をフレームの右側に 表示させたいと考えています。 （src使用ではなくjavascriptのlocation.hrefを使うことがMUSTです) <head> <script type="text/javascript"><!-- right.location.href = "http://www.yahoo.co.jp/"; // --></script> </head> <body> <FRAMESET cols="50%,50%"> <FRAME name="left" src="left.html"> <FRAME name="right" src="right.html"> </FRAMESET> </body> としてみましたがうまくいきません。 location.hrefはmetaタグ内でしか有効ではないにも関わらず right.の指示をメタタグ内部で指定していないことが原因かも しれません。 javascriptのlocation.hrefを使ってフレームの右側に 表示させる方法をご教授願います。

  • 直フレーム内ページにきた場合とトップからきた場合の「戻る」について

    以前「複数フレーム内リンク」でお世話になりました。今度も煮詰まってしまいました。 ・トップ→コーナー→末端ページという構成 ・「上部・左・メイン」の3つフレームを使用している状況です。 検索でフレーム内の末端ページに飛んできた人に「戻る」ボタンでコーナーのindexにフレーム有りの状態で表示したいのです。 只今、上記については作動できるのですが、逆にトップ→コーナー→末端ページと通常の流れできた人が、その「戻る」を押すと3つのフレームの中のメインフレームにまた3つのフレームが表示されてしまいます。 戻るに「target='_top'」や「target='_parent'」とつけてもいきません。といいますか、付け方がわかりません。 ソースは↓ <script language="JavaScript"> function framepage(filename) { document.open(); document.write("<frameset rows='80,*' frameborder='NO' marginwidth='0' marginheight='0' framespacing='0' border='0' target='_top'>"); document.write("<frame name='topFrame' src='上部.html' scrolling='NO' noresize>"); document.write("<frameset cols='152,*' frameborder='NO' marginwidth='0' marginheight='0' framespacing='0' border='0' target='_top'>"); document.write("<frame name='leftFrame' src='左.html' scrolling='NO' noresize>"); document.write("<frame name='main' src=" + filename + ">"); document.write("</frameset>"); document.write("</frameset>"); document.close(); } </script> bodyの方は↓ <a href="javascript:framepage('../index.html')">[戻る]</a> となっています。 どなたか宜しくお願いします！

  • 複数フレームへのリンクがネスケで作動しません。

    フレームありのサイトを作り、検索等で末端ページにヒットしてきた方へ「戻る」ボタンでフレームごと全体表示したいと思い、作業しています。 こちらの過去ログを見てここまで作れましたが、ウィンドウズのネスケ4.7では白画面になってしまいます。 ソースは以下の通りです↓ <script language="JavaScript"> function framepage(filename) { document.open(); document.write("<frameset rows='80,*' frameborder='NO' marginwidth='0' marginheight='0' framespacing='0'>"); document.write("<frame name='topFrame' src='上部分.html'>"); document.write("<frameset cols='152,*' frameborder='NO' marginwidth='0' marginheight='0' framespacing='0'>"); document.write("<frame name='leftFrame' src='左部分.html'>"); document.write("<frame name='main' src=" + filename + ">"); document.write("</frameset>"); document.close(); } </script> <a href="javascript:framepage('右部分（任意に変更可能）.html')">[戻る]</a> win、mac共にIEでは正常動作しています。 どなたかご存じの方がいらっしゃたら教えて下さい！

  • javascriptからframeへの出力方法

    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function init(){ $("f1").innerHTML = "hoge"; $("f2").innerHTML = "piyo"; } </script> </head> <frameset cols="50%,*" onload="init()" > <frame id="f1"> <frame id="f2"> </frameset> </body> </html> 上記、二つに分けたフレームにそれぞれ"hoge"と"piyo"と表示したいのですが出来ません。フレームにjavascriptからアクセスするにはどうしたらよいですか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する