• 締切済み

フレームの代わり

最近の傾向として、あまりフレームを使わずにＨＰを作ったほうが よいと聞き、メニューにもフレームを使わずに作成してきました。 しかしページが増えるごとにやはり、各ページの項目を変更することが 大変になってきました。 そこで外部スクリプトを使い各ページに表示しようと思ってますが、 このやり方は何か問題があるのでしょうか？ document.write(" <a href=\"・・・/bbs\">掲示板</a> ") document.write(" <a href=\"・・・/link\">リンク集</a> ") ・ ・ （詳細略） div で外部スタイルシートではリンクが出来ないと聞いてます。 よろしくお願いします。

みんなの回答

  • dezimac
  • ベストアンサー率56% (2365/4208)
回答No.1

外部スクリプトってJavaScriptですよね。 それでもとくに問題はありません。 あるとすれば、JavaScriptが動かない環境もある（ユーザーが意図的にそうしている）、一部ブラウザで文字化けを起こす危険性があるくらいですね。 フレーム未対応よりもJavaScript動かない環境の方が多いかもしれません。 Javascript動かない環境の為に、HTMLでメニューだけのページも用意しておいたほうがいいです。 <script language="JavaScript" src="menu.js"></script> <noscript><a href="menu.html">未対応の方へのメニュー</a></noscript> > div で外部スタイルシートではリンクが出来ないと 意味不明です。 何の問題も無く外部CSS使えますが。 メニューが多く管理が大変なら、フレーム使ってもいいと思いますよ。 フレーム使うのがある意味では最も楽ですからね。 ただ、検索エンジンからやってくる人のために、各ページの隅にでもトップページ（もしくは目次）へのリンクを用意しておく事を忘れずに。

ame-sanc
質問者

お礼

＞ユーザーが意図的にそうしているがある なるほど納得です。 ですがＰＣ経験が浅いせいか、意図的にそうしている環境に 出合ったことがありません。JavaScriptを使っているサイトも多い ですし、例えばどこのネットカフェに行ってもそんな環境には 遭遇しません。 ですから、よくこのこと（JavaScript未対応）は聞くのですが、 たぶん少数であることを考えると、あまりＨＰ作りに考慮しなくなります。 このことがよいかどうかは別としてですが・・。 フレームのほうも考慮してみたいと思います。ありがとうございました。

  1. カテゴリ
  2. インターネット・Webサービス
  3. インターネット接続・通信
  4. レンタルサーバ・ASP

関連するQ&A

  • 外部javascriptファイルの中にさらに外部javascriptファイルを入れたい

    javascript初心者です。 メニューの一部を外部ファイルによるツリーメニューにし、 さらにメニュー部分全体を外部ファイルにしようとしましたが、 メニュー部分全体を外部ファイルに移したら、 中のツリーメニューが機能しなくなってしまいました。 いろいろ試してみましたが、付け焼き刃の知識では皆目見当が付きません。 ご指摘いただけると嬉しいです。内容は下記の通りです。 メニュー全体の外部ファイル「menu.js」 document.write('<div id="menu">'); document.write('<h1>お役立ち情報<\/h1>'); document.write('<ul>'); document.write('<script src="javascript\/tree.js" type="text\/javascript"><\/script>'); document.write('<li><a href="javascript:tree("click1");" title="">HOME<\/a>'); document.write('<\/li>'); document.write('<div id="click1" style="display:none;">'); document.write('　<a href="未設定" title="作成中です" target="未定">第1ページ <\/a>'); document.write('<br>'); document.write('　<a href="未設定" title="教えられません" target="未定">第2ページ <\/a>'); document.write('<br>'); document.write('<\/div>'); document.write('<li><a href="javascript:tree("click2");" title="">お知らせ<\/a>'); document.write('<\/li>'); document.write('<div id="click2" style="display:none;">'); document.write('　<a href="未設定" title="作成中です" target="未定">第3ページ <\/a>'); document.write('<br>'); document.write('　<a href="未設定" title="教えられません" target="未定">第4ページ <\/a>'); document.write('<br>'); document.write('<\/div>'); document.write('<li><a href="#">DOWNLOAD<\/a>'); document.write('<\/li>'); document.write('<\/ul>'); document.write('<\/div>'); 中に入れてあるツリーメニューの外部ファイル「tree.js」 function tree(id) { if (document.getElementById(id).style.display == "block") document.getElementById(id).style.display="none"; else document.getElementById(id).style.display="block"; } .htmlの記述はこうなっています。 <script src="menu.js" type="text/javascript"></script>

  • JSで動的にリンクを作成

    JSで動的にリンクを作成をしたいのですがわかりません。 例を教えてもらったのですがどう書いていいのかわかりません…。 駄目な例： <div id="link"> <a href="http://aaa.aa/">aaaa</a> </div> いい例 <div id="link"></div> <script> document.getElementByID("link") に対してaddChild </script> いろいろ不足していると思いますがお願いします。

  • Dreamweaverでフレーム活用

    メニュー画面(BBS/LINKなど選ぶ部分)とそのコンテンツのページ(bbs.html/link.html)などを別々に作りました この別々のものをひとつに結合させたいのですが、フレームの設定はどうすればいいのでしょうか？ できれば「上フレームおよびネストした左フレーム」というスタイルで 上フレーム　画像ファイル(ロゴ) 左フレーム　menu.html 中身(残り)　コンテンツ(bbs.html/link.htmlなど) としたいです menu.htmlは幅200ピクセルあれば十分です 中身？の部分のみが切り替わるようにしたいです どうかお返事ください・・・

  • フレーム使用時のメニューバーについて

    フレームを使ったホームページを作成しました。 フレームのファイル名をindex.htmlに index.htmlだったファイルをtop.htmlにかえて アップロードしたところ、 メニューバーがきちんと表示されません。 パソコン上で確認するときは問題ないので 理由が分かりません。 どなたか教えてください。 メニューのHTMLは <style type="text/css"><!-- body {background-color:firebrick} div.menutitle {color:white; font-family:'Comic Sans MS'; font-size:40px; font-weight:bold; border-bottom-style:dotted; border-bottom-color:white; margin-bottom:30px} a:link {color:white} a:visited {color:yellow} a {text-decoration:none; font-size:18px; font-weight:bold;} div.menu {font-family:'Arial'; background-color:maroon; padding-left:5px; padding-top:7px; padding-bottom:7px; margin-bottom:10px} --!></style> </head> <body> <div class="menutitle" lang="en">menu</div> <div class="menu"> <a href="top.html" target="main">top</a></div> <div class="menu"> <a href="">gallary</a></div> <div class="menu"> <a href="http://8520.teacup.com/**/bbs" target="main">bbs</a></div> <div class="menu"> <a href="">link</a></div> </body> </html> です。よろしくおねがいします。

    • ベストアンサー
    • HTML
  • フレームを使って細いメニューを作りたいです。

    フレームを使って細いメニューを作りたいです。 フレームを使って下のほうに細いメニューを表示したいと思っています。 しかし文字の上に一行分くらいの隙間が開いてしまい、 メニューの文字がスクロールしないと表示されません。 メニューの作り方も調べましたが、ここまで細いものについてはわかりませんでした。 どうしたら上手く表示できるでしょうか。 完成ページ↓ <html> <head> <title></title> </head> <frameset rows="*,3%" frameborder="NO" border="0"> <frame src="PageTop.html"> <frame src="Menu.html" noresize scrolling="NO"> <norames><P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </frameset> </html> PageTop.html↓ <html> <head> <title></title> </head> <body></body> </html> Menu.html↓ <html> <head> <title></title> <style type="text/css"> <!-- p { text-decoration: none; } --> </style> </head> <p> <body bgcolor="#696969" link="#696969" alink="#696969" vlink="#696969"> <font face="Kartika"><div style="font size:20px;"> 　　 <target="1" href="">Top</a> 　　　 <target="1" href="">About</a> 　　　<target="1" href="">Main</a> 　　　<target="1" href="">Blog</a> 　　　<target="1" href="">Link</a> 　　　<target="_top" href="">Index</a> </font></p> </body> </html> 至らない点がありましたらご指摘ください。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • プルダウンから移動時のフレームの外し方

    こんにちわ。 今、上にプルダウンメニューがあり、下にリンク先ファイルを 表示する、上下のフレームページを作ってます。 この時、TOPページ(フレーム無し)やレンタルBBSの ページにも行けるようにしたいのですが、 上のフレームが残ってしまい、困ってます。 アドレスを記入する場所に　target="top"　と付け加えてみたけれど 上のフレームは残ったままです。 サンプルのscriptで【top.sita.location.href 】と 指定してるから、下のフレームにしか対応しないのでしょうか？ 何処かを変更して、TOPやBBSに移動する時だけ フレームを無くし、全画面表示する方法はないでしょうか？ ご存知の方、いらっしゃいましたら宜しくお願いしますm(__)m <SCRIPT language="JavaScript"> <!-- function myGo(){mySelect = document.myForm.myMenu.selectedIndex; top.sita.location.href = document.myForm.myMenu.options[mySelect].value; }// --></SCRIPT> <select name="myMenu"> <OPTION value="http://www.***">ＴＯＰ <OPTION value="http://www.***">うさぎ <OPTION value="http://www.***">ねこ <OPTION value="http://www.***" target="top">ＢＢＳ 　　　　　　　　　　　　　　　　　　　　↑ココに入れました </select> <input type="button" value="GO!" onClick="myGo()"> </form>

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

    過去ログを参照していたら、次のようなサンプルを発見したのですが、 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>

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

    以前「複数フレーム内リンク」でお世話になりました。今度も煮詰まってしまいました。 ・トップ→コーナー→末端ページという構成 ・「上部・左・メイン」の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> となっています。 どなたか宜しくお願いします！

  • クリックで特定のdiv要素が表示されるJavascriptに追加機能を

    クリックで特定のdiv要素が表示されるJavascriptに追加機能を持たせたい よろしくお願い致します。 下記のようなコードで、HTML部分の「リンクテキスト」をクリックすると「クリックで開く内容」が表示され、かつ、リンクテキスト（id="link-1"）の文字色が変わるJavascriptを使用しています。 ■Javascript部分 function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; document.getElementById('link-1').style.color = "#cc0000"; } else { document.getElementById(targetID).style.display = "none"; document.getElementById('link-1').style.color = "#000000"; } } } ■HTML部分 <a href="#" id="link-1" onClick="showHide('hoge1');return false;">リンクテキスト</a> <div id="hoge1" style="display:none;">クリックで開く内容</div> リンクテキストの文字色が変わる部分は見よう見まねで追加したのですが、文字色が変わる部分を、link-2、link-3・・というように同ページに複数配置したい場合、どのようなコードに変更すればよいのでしょうか。 できればid="link-1"などという記述はせずに、showHide('hoge1');をshowHide('hoge2');に変えて、<div id="hoge1" style="display:none;">を<div id="hogge2" style="display:none;">に変えるだけで、文字色も変わるようにできれば一番良いのですが、そのような方法はあるのでしょうか？ 分かりにくい箇所は補足説明致しますので、どうぞご教授下さいますようお願い致します。

  • Javascriptで現在のページ番号をアクティブな状態にしたい

    今、PHPにて動的に変わるページリンクを作成しています。 ==================================== 前のページ 1 2 3 4 5 次のページ ==================================== これをリストの上部と下部に設置し連動して動くようにしたいと思っています。 リンクを生成する部分はpagelink_inc.phpという外部ファイルにして、それぞれの箇所でインクルードしています。 ■HTML本体 <div class="pageLink"> include(include/pagelink_inc.php); //リンク生成のPHPを読み込む </div> <div id="contents"> コンテンツ内容 </div> <div class="pageLink"> include(include/pagelink_inc.php); //リンク生成のPHPを読み込む </div> ■pagelink_inc.php <?php $linkStart = (($pageNo * 2) > constant("SHOW_LINK_NUM")) ? $pageNo-(floor(constant("SHOW_LINK_NUM")/2)) : 0; if($pageNo > 0 && $pageNo < $pages) echo "<a href='shopping.php?p_no=".($pageNo-1)."'>前のページ</a>\n"; for($i=$linkStart; $i<($linkStart+constant("SHOW_LINK_NUM")); $i++) { if($i < $pages) { echo "<a href='shopping.php?p_no=".$i."'>".($i+1)."</a>\n"; } } if($pageNo >= 0 && $pageNo < $pages-1) echo "<a href='shopping.php?p_no=".($pageNo+1)."'>次のページ</a>\n"; ?> 実際はこれだけで問題なく動くのですが、ユーザビリティを考慮し 1．現在どのページが開いているのかが分かるように、番号のスタイルを太字でボーダー無し、フォントカラーをグレーにする。 2．ページが開いた直後は1のリンクが対象になるようにする。 の2点を実現したいと思っています。 そこで、echo "<a href='shopping.php?p_no=".$i."'>".($i+1)."</a>\n";の部分にid='p_no".($i)."'を加え ============================================================================== echo "<a href='shopping.php?p_no=".$i."' id='p_no".($i)."'>".($i+1)."</a>\n"; ============================================================================== のようにしました。 更に、HTMLの</body>の前に ============================================================================== <script type="text/javascript">nowPage("<?php echo $pageNo; ?>")</script> ============================================================================== を加え ============================================================================== <script type="text/javascript"> function nowPage(no) { var elem = document.getElementById("p_no"+no); elem.style.textDecoration = 'none'; elem.style.fontWeight = 'bold'; elem.style.color = '#333333'; } </script> ============================================================================== というスクリプトを作成しました。 これだとid名が被ってしまうためか、上部に設置したリンクのスタイルだけが変化し 下部のリンクのスタイルは変化しません。 連動して上記のことを実現するにはどのようにしたらいいでしょうか？ お分かりの方がいらっしゃいましたら是非ご教授下さい。 大変厚かましいのですが、少々急ぎなので、「1から～を勉強して下さい」といった ご回答はご遠慮したいと思います。 答えが分かってからじっくり勉強させて頂きます。 以上、宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する