今、HPを作っています。
それで、フレームで、上下に分けました。
そこまではよかったんです。
そして、上下で、7:3でわけ、下のフレームに
メニューで、画像でリンクしています。
それで、ふつうのリンクなので、下のフレーム内で、移動してしますんですね(あたりまえですけど)
それを、メニューは下でリンクを張って、上のページで、表示させる方法を教えていただけないでしょうか?
よろしくお願いします。

A 回答 (1件)

まず、各フレームに名前を付ける必要があります。


例えば、
<FRAMESET rows="30%,*">
<FRAME src="upper.html" name="frame1">
<FRAME src="lower.html" name="frame2">
</FRAMESET>
というように、フレームを定義しているHTML内に記述します。
ここではframe1, frame2としていますが、半角英数字でならどんな名前を付けても構いません。

次に、実際のリンク部分が
<A href="nextpage.html">
のようにAタグを記述していると思いますが、これを
<A href="nextpage.html" target="frame1">
のように書き換えます。するとframe1という名前のフレームにリンク先のページが表示されます。

なお、target="_blank"と指定すると「新しいウィンドウで開く」、
target="_parent"は「親フレームを解消して開く」、
target="_top"は「フレームの分割をやめて開く」
という意味になります。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
とても助かりました。

お礼日時:2002/04/01 16:49

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qフレーム分割の件で質問です、先ず上下分割、そして、次に下のフレームのみ、左右分割するとします

フレーム分割の件で質問です、先ず上下分割、そして、次に下のフレームのみ、左右分割するとします、このとき、先に、仕切った上下分割のフレームの境界線のみを消す方法を知りたいのですが?
そんな、タグはないでしょうか?
フレームについての説明はWEB上にあるのですが、具体的に、そのまま使えるタグをしましてくれているものは無くて、、、、

Aベストアンサー

<frameset rows="120,*" frameborder="0">
では?
その説明ページを読んでなぜ理解できなかったのかがわかりません。
これであってるとよいですが・・・。

QHTMLもしくはCSSのULでリンクを張る場合に、一行に複数リンクを張るにはどうすればいいですか?

HTMLタグとCSSを使ってリンクを表現したいのですが、

ULリンクで順番に

【1】
【2】
【3】
【4】
【5】
【6】
縦にリンクを張ることは出来るのですが、

例えば、

【1】
【2】【3】
【4】
【5】
【6】

例)
【ゴオグル】【ゴオグルログイン画面入り口】

のように
サイトへのリンクとその横に、ログイン画面へのリンクをつけたいのですが、

ULやCSSを用いて、
順番にリンクを張るうち、
何個かだけ、【2】【3】のように
変則的に並べるにはどうすればよいのでしょうか?

単純に
<li><A href="http://www...01.html">【1】</A>
<A href="http://www...02.html">【2】</A></li>

とすると、1行にリンクを並べることはできるのですが、
これだと、マウスオーバーした時にリンクの背景色を替えるなどの
設定をすると、

二つのリンクを一つにまとめて扱われてしまうので、

なんとか一つ一つに設定するにはどうしたらいいのでしょうか?

もし、分かりましたらよろしくお願いします。

HTMLタグとCSSを使ってリンクを表現したいのですが、

ULリンクで順番に

【1】
【2】
【3】
【4】
【5】
【6】
縦にリンクを張ることは出来るのですが、

例えば、

【1】
【2】【3】
【4】
【5】
【6】

例)
【ゴオグル】【ゴオグルログイン画面入り口】

のように
サイトへのリンクとその横に、ログイン画面へのリンクをつけたいのですが、

ULやCSSを用いて、
順番にリンクを張るうち、
何個かだけ、【2】【3】のように
変則的に並べるにはどうすればよいのでし...続きを読む

Aベストアンサー

class,idなどを利用するのは本来の目的から言うと誤りです。
DIVに限らず、「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」が基本で、プレゼンテーションのためにidやclassをつけるのは避けましょう。
 先でプレゼンテーション変えるとき、class名も書き換えなければならない!!

 divやspanやidやclassがやたらと増えて煩雑なHTMLになるし、将来プレゼンテーションを変更しようとしたときにHTMLも書き換えなければならなくなります。
 HTML5では
【引用】____________ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.4 Grouping content — HTML5( http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-div-element )]より
【注意】著者は、他により手義綱な要素ないときの最後の手段としてdiv要素を使用することが強く奨励されます。div要素ではなく、より適切な要素を使用する事は、読者のためには「より良いアクセシビリティ」を作者のためには「メンテナンス性の向上」につながります。

<li><A href="http://www...01.html">【1】</A>
<A href="http://www...02.html">【2】</A></li>
HTML5やXHTMLでは大文字のタグは使いません。
※【】はHTMLには書きません。検索エンジンも読み上げソフトも、いちいち読んでしまいます。

HTMLだと
<nav><!-- HTML側ではナビゲーションリンクとしてマークアップ -->
 <ul><!-- 順不同リスト -->
  <li><a href="/01.html">最初のページ</a></li>
  <li><a href="/02.html">次のページ</a></li>
  <li><a href="/03.html">ゴオグル</a></li>
  <li><a href="/04.html">ゴオグルログイン画面入り口</a></li>
  <li><a href="/05.html">テストだよ</a></li>
 </ul>
</nav>

HTML4.01だと、文書構造を示す要素が用意されていませんので
  ⇒3.1. 新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )

<div id="nav"><!-- classでナビゲーションだと知らせる -->
 <ul><!-- 順不同リスト -->
  <li><a href="/01.html">最初のページ</a></li>
  <li><a href="/02.html">次のページ</a></li>
  <li><a href="/03.html">ゴオグル</a></li>
  <li><a href="/04.html">ゴオグルログイン画面入り口</a></li>
  <li><a href="/05.html">テストだよ</a></li>
 </ul>
</div>
  ★あなたの場合、その内容でしたら
   <nav>
    <ul>
     <li><a href="/01.html">最初のページ</a></li>
     <li><a href="/02.html">次のページ</a></li>
     <li><a href="/03.html">ゴオグル</a></li>
     <li><a href="/04.html">ゴオグルログイン画面入り口</a></li>
     <li><a href="/05.html">テストだよ</a></li>
    </ul>
   </nav>
  のほうが適切で、はるかに簡単なのですが、それは今回は説明しません。


先のHTML5のHTMLに対して、
nav ul,nav ul li{
list-style:none;
margin:0;padding:0;
display:inline;
}
nav ul li a{
display:block;
margin:5px 10px;
}
nav ul li a[href="/03.html"],
nav ul li a[href="/04.html"]{
display:inline-block;
}
nav ul li a:before{
content:"【";
}
nav ul li a:after{
content:"】";
}
だけでよいですね。これだと煩雑なclassつける必要もないし、リスト項目が増減してもよいし、後で好きにデザイン返られる。だってHTMLには文書構造しか書かれてないから。
HTML/CSSで最も重要なこと!!
 →構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )

【サンプル】
※タブは_に置換してあるので戻す。
※Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
 のDATA入力(右上)で検証済み

<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="ORUKA1951">
<style media="screen">
<!--
nav ul,nav ul li{
list-style:none;
margin:0;padding:0;
display:inline;
}
nav ul li a{
display:block;
margin:5px 10px;
}
nav ul li a[href="/03.html"],
nav ul li a[href="/04.html"]{
display:inline-block;
}
nav ul li a:before{
content:"【";
}
nav ul li a:after{
content:"】";
}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav><!-- HTML側ではナビゲーションリンクとしてマークアップ -->
___<ul><!-- 順不同リスト -->
____<li><a href="/01.html">最初のページ</a></li>
____<li><a href="/02.html">次のページ</a></li>
____<li><a href="/03.html">ゴオグル</a></li>
____<li><a href="/04.html">ゴオグルログイン画面入り口</a></li>
____<li><a href="/05.html">テストだよ</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<aside>
___<h3>Something aside</h3>
__</aside>
__<h2>A smaller heading</h2>
__<p>
__</p>
_</section>
_<section>
__<h2>A smaller heading</h2>
__<p>
__</p>
_</section>
_<footer>
__<h2>A nice footer</h2>
_</footer>
</body>
</html>

class,idなどを利用するのは本来の目的から言うと誤りです。
DIVに限らず、「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」が基本で、プレゼンテーションのためにidやclassをつけるのは避けましょう。
 先でプレゼンテーション変えるとき、class名も書き換えなければならない!!

 divやspanやidやclassがやたらと増えて煩雑なHTMLになるし、将来プレゼンテーションを変更しよう...続きを読む

Q上下フレーム分割ページでプルダウンメニューはできますか?

こんにちは。
いつもお世話になっております。

HPのコンテンツが増えてきたので、スタイルシートを
使って、プルダウンメニューにしたのですが・・・。

ちょっと、メニューの項目名を変えたい、と思った
時に、全部のページを変更してまわるのは、手間だなぁ
と思って、上下でフレーム分割をして、上に
プルダウンメニュー、したに、それぞれのページが
来るようにしたいのです。

ためしにやってみたのですが、プルダウンがしたの
ページで隠れてしまう上に、
タイムエラーが出ました。 デバッグして下さい
というエラーメッセージが出てします。

上下フレーム分割ページでプルダウンメニューはできない
のでしょうか・・・?

どうかご指導よろしくお願いいたします。

Aベストアンサー

こんにちは。No.1のものです。

プルダウンメニューを表示した時に下のフレームに
隠れてしまうとの事ですね?
確かにそうですね。すみません。
今のところ、両方とも子フレームなので、親子関係を
作ってあげたら出来るかもしれません…。

とりあえず抵抗がなければインラインフレームを
使うのが一番簡単だと思います。

前のindex.htmlを使うのをやめて、
code_top.htmlを変更します。

code_top.html---------------------------------
<iframe src="code_blank.html" name="contents" width="100%" height="95%" frameborder="0" noresize style="margin-top:60px; border-style:solid; border-width:1px; border-color:#888888;">
</iframe>
</body>
</html>
-----------------------------------------------
最後のbodyの閉じタグの直前に
上記<iframe>~</iframe>を追加してください。
トップページはcode_top.htmlとなります。

レイアウトはどのようにしているのかは
分かりませんが、とりあえず上に詰めても
かぶらないと思います。
適宜修正お願いします。

ではでは。

こんにちは。No.1のものです。

プルダウンメニューを表示した時に下のフレームに
隠れてしまうとの事ですね?
確かにそうですね。すみません。
今のところ、両方とも子フレームなので、親子関係を
作ってあげたら出来るかもしれません…。

とりあえず抵抗がなければインラインフレームを
使うのが一番簡単だと思います。

前のindex.htmlを使うのをやめて、
code_top.htmlを変更します。

code_top.html---------------------------------
<iframe src="code_blank.html" name="contents" width="...続きを読む

Qフレーム対応ホームページの中のあるページへリンクを張りたい

フレーム対応ホームページの中のあるページへリンクを張りたいのです。
フレームで区切ってあるページのメインフレームに表示されている内容を、自分で作成しているホームページのメインフレームに表示させるようにリンクを張りたいのですが、どうすればいいでしょうか。
宜しくお願い致します。

Aベストアンサー

それを行うことはまずいと思います。
ですが、方法はあります。

フレームページというのは大抵、ページ上部、もしくは、左に各コンテンツにジャンプするメニューがあるはずです。
そのメニューをクリックすることでメインフレームの画面が切り替わります。
というわけですので、そのメニューを右クリックして、「新しいウィンドウで開く」を選べばいいでしょう。するときちんとそのジャンプ先だけが新しいウィンドウで開きます。URLはブラウザに表示されますので、それがお求めのリンク先のページになります。

それをam_esewさんのページの中のメニューボタンに<a href>のタグで入れればいいだけです。当然メインフレームに指定するわけですが。


ですが、これをすることはリスクがあるということを理解しておきましょう。
アクセス解析でそういった行為をしている人がいればページの管理者は分かってしまいます。著作権など絡んできますので、あくまでも行わないというのが私の見解です。

Qフレームを使用しているページで任意のコンテンツにリンクを張るには

フレームを使用して、左側:メニュー、右側:コンテンツという構成をとっているページで、右側のコンテンツに任意のコンテンツを表示させた状態でのリンクを張りたいと思っています。具体的にどのようにすればよいのでしょうか?

Aベストアンサー

通常のHTMLで実現するには無理ですが、CGIやJavaScriptを使えば可能でしょう。
勉強ついでにJavaScriptでのサンプルを作ってみました。

--index.html---
<frameset cols="10%,*">
<frame name="menu" src="menu.html">
<frame name="content" src="top.html">
</frameset>

--top.html-----
<html>
<head>
<script type="text/javascript">
<!--
var selfPath = new Array("top.html", "/test/top.html");

function isSelfPath(path){
for(var i = 0; i < selfPath.length; i++){
if(path == selfPath[i]){
return true;
}
}
return false;
}

function loadContent(){
if(parent == null){
return null;
}

if(parent.location.search == ""){
return;
}

var query = unescape(parent.location.search.substring(1));
var params = query.split("&");
for(var i = 0; i < params.length; i++){
var key = params[i].split("=")[0];
var val = params[i].split("=")[1];
if(key == "page"){
if(!isSelfPath(val)){
window.open(val, "_self");
}
return;
}
}
}
// -->
</script>
</head>

<body onLoad="loadContent();" >
</body>
</html>

こうするとhttp://hogehoge.com/test/?page=xxx.htmlなどのようにアクセスすると右側にxxx.htmlが読み込まれます。

環境に合わせていろいろ変えてください。
selfPathと言うのはtop.html自身を表すURIです(絶対パスと相対パスを指定してください)。これに入れておかないと自分自身を指定したときには何回もリロードされちゃいます(笑
ちなみにIEでの動作しか確認してません。

通常のHTMLで実現するには無理ですが、CGIやJavaScriptを使えば可能でしょう。
勉強ついでにJavaScriptでのサンプルを作ってみました。

--index.html---
<frameset cols="10%,*">
<frame name="menu" src="menu.html">
<frame name="content" src="top.html">
</frameset>

--top.html-----
<html>
<head>
<script type="text/javascript">
<!--
var selfPath = new Array("top.html", "/test/top.html");

function isSelfPath(path){
for(var i = 0; i < selfPath.length; i++){
if(path =...続きを読む


このカテゴリの人気Q&Aランキング

おすすめ情報