左右フレームを作り、左のフォームリストから右の特定場所を指定してテキスト部分の頭出しを

質問

よろしくお願いします。
画面を左右に分けフレーム（テーブルでもよい）を作り、
左面の上部～
（その下部には、フォーム一覧を表示する以外は、ほかのリンクが有効なテキストを常駐させたい）

～のフォームリスト一覧からテキストリンクをクリックすると、
右側面に、あるテキスト部分を特定して頭だしリンクをし、
(nameを使う？）右側面selfに表示させたいのですが、
そういうフォームと、フレームを利用したリンクの軽い指示方法を探しています。
<iframe><tabel>など組み合わせても、混乱してどうもうまくいきません。

最も優先して表現したいのは、
左面にテキスト一覧を常駐させてしまわず、
今回のリスト一覧（フォーム）以外にも、右へのリンクが有効なテキストエリアを残したいのです。
リンクは、左面テキストリンク→右面表示（全面でよい～マージンを使います）を主に有効に使い、この両面ページあるカテゴリーでフルにリンクさせたいということです。

<iframe>について、コチラのサイトを参考にさせていただいていますが、、、、、。

http://www4.ocn.ne.jp/~tester/style/

わかりにくい部分は補足説明しますので、
お詳しい方、私はどこで混乱して、つまづき、理解できていないのでしょう？
助けてください、
お願いいたします！

回答No.6

o84

> ページを数多く作る面倒を怠らないで、
> ページ単位のリンクだけに絞ってジャンプさせる方が、
> サクサクとページ内の長い閲覧と行き来にできる感じで
> よいのではないですか？

どうでしょうね。
私の2つ目のサンプルは、
そんなに見にくくはないと思います。
実際、ああいう風にしている人もいます。
適度に上に戻るリンクをつけてあげたり、
・・・見せ方次第ですね～。

ユーザの使いやすさを考えるのも大切ですが、
同時に質問者さん自身の管理しやすさをも
考えなければなりませんよ。

> ページを数多く作る面倒

これです。
ページが無駄に多すぎると管理できなくなります。
一番最初はまだいいと思うんですよ。
しかし、更新しようと思った時にできるかどうか。
アッチを直しコッチを直しソッチを直し・・・
そのうち頭がごちゃごちゃになってしまって
更新自体を諦めてしまう。なんてね。
見やすさも大事ですが、管理しやすさも大事なのです。

私のサンプルは「フレーム」を使っていて、
正直ダサい方法だな～とは思います。
が、一番シンプルな方法でもありますので、
まずはこれでHTMLを勉強されるとよいと思います。
だんだん判ってきたら、
セレクタで「第2章」を選んだら、ダイナミックHTMLで
下のメニューをガサッと書き換えるような
そんなかっこいいこともできるようになります。
最初からそういうことしようとしても、無理です。

まずは基本から。頑張ってください。

回答No.5

o84

こんな感じにもできますよ。
仕組みは簡単です。参考までに。

http://pumise.web.fc2.com/part2/

回答No.4

o84

リンク先のページを見まして、やっとわかりました。

リンク先ページは、別に難しいこと何もしてませんね。
すごーく単純な構造です。
私が作ったサンプルページよりはるかに簡単です。

もう一度確認させてください。
質問者さんは、リンク先のページの作りを真似されたいんですね？
それでよいですね？
その前提で書きますと、
質問者さんはリンク先のページの作りを

> 「目次」のセレクトがまず出て、
> セレクトをクリックして、
> 下部にテキストが出て、

と理解されているのでしょうか。
だとしたら、正確ではないようです。

> セレクトをクリックして、
> 下部にテキストが出

ているわけではありません。
セレクタは、左ページ内部でジャンプするためのものです。
左ページは縦にものすごーく長くて、
セレクタを選ぶとページ内を飛んでるだけです。
何かを「出して」いるわけではありません。
※ここを正確に書かないと、回答者が誤解します。

リンク先のページの作りはとても簡単です。
私が「こうかな？」と作った物の方がよっぽど複雑です。
リンク先のページを見たら、「なーんだこれか」と思いましたから。

補足

了解しました。
セレクタは、左ページ内をジャンプして行ったり来たりさせてくれるものだということ、理解しました。

ただ実は、セレクタの左ページ内部ジャンプもできないのかな？と感じてはおりました！
(・・・おそらく、できない頭で↑これを発想したものだから、左右の組み合わせとレイアウトがごっちゃごちゃに混ざってあっちこち飛んでしまったのです、ドツボのつぼが判りました！）

はい、セレクタさんの働きと、左ページが上下しているのだーということはわかりました！

そして、もうひとつ作成してくださったページ、凄いです！
件の混同混乱を整理していくと、恐らくこのレイアウトが最も私のイメージしていたものに限りなく近いと思われます。

・・・少しお時間下さい。
もう一度、ひとつひとつのタグの示しているところの基本の意味を理解し直し、試作してくださったソースを参考に勉強してみます。

ところで、こういったデザインのページサイトは、閲覧に来た方からすると、見やすいですか？わかりづらくないですか？
もっとシンプルに、ページを数多く作る面倒を怠らないで、ページ単位のリンクだけに絞ってジャンプさせる方が、サクサクとページ内の長い閲覧と行き来にできる感じでよいのではないですか？
率直なご意見もぜひ、コメントください。

では、少し日にちをかけて、チェックしながら自分で打ち込んでみます～。
取り急ぎ、お礼まで。

回答No.3

o84

質問者さん独自の用語が沢山あって
No.1への補足説明に関してはやはりよく判りません。

が、いただいたソースを元に作ってみて、
ページを表示してみまして、
そこから「こういうのがやりたいのかな？」
というのを想像してみました。

http://pumise.web.fc2.com/
こういう感じかな？
（これはご覧になったらすぐ消しますので
　必要ならソースを保存してください。）

補足

お世話かけてすみません、ページまで作っていただき本当にありがとうございます！
ともかく、
私のイメージしているページに近いのは質問のときに貼ったこの↓サイトなのです。
→　http://www4.ocn.ne.jp/~tester/style/index.html

私がやたら「フォーム」と繰り返していた言葉が指すのは、実は「メニュー」もしくは「セレクトボックス」というものなのではないかと、今ごろ気づきました、ごめんなさい。
まず、参考ページまで作っていただいたいて本当に感謝です。
いただいたサイトには、私のない発想がありました。
私が質問時に説明していたのは、
下部のボックス（説明文）は窓ではなく、ふつうのテキスト（もしかすると、普通は一覧という時「箇条書き」の<dl><dt><dd>を使うのかもしれませんが、私は使ったことがなく、「テキスト一覧」と言っていたのです。）
しかし、よく考えてみますと、、、、、
「目次」のセレクトがまず出て、セレクトをクリックして、下部にテキストが出て、そのテキストをリンクすると、別右フレームにそれぞれのページとして作ったリンク先をページを「変えて」なおかつ場所も指定して、表示しようと考えていたのですが、
作っていただいたものの場合、目次セレクト窓ひとつで、右フレームのページは、ひとつのページ全て同じページの一箇所の頭出しトップ出しができる～というわけですね。（下部の窓は、あくまで右の補助説明に使うという方法）

なるべく整理しますと、展開は、目次＜一覧＜章＜段落＜各テキスト。
この展開の＜章＜の部分が左に表示された時点で「初めて」、右側に、章を筆頭にした段落組みのテキストが
全部のったページが展開する、ということです。
＜今でも私が希望している形＞
・セレクトボックスに、目次をあたまに一覧がある（最初は目次のページが左に出ている）
・それぞれを選択クリックすると、ボックスの「下に」その選択した総段落段組の各章を示した
リスト一覧のテキスト（ボタンではなく）が出る
　（この時、同時に、右にその一覧の章の頭から総段落段組全体が出る）
・そのテキストリンクをクリックすると、今度はその章のある段落の指定位置を
トップに頭出しスライドしてくれる（右ページ自体は変わらない）

というのは、参考サイトの場合、その左フレームそのものに、やはりスクロールを必要とする
長い一覧リストが常駐することになり、今どこに居るか迷いやすいような感じなのですが、
いただいたもののように別のメニュー（で合っていると、いいのですが）の枠を作ると、
もっと応用の幅が広がると思うのです。
（よけい悩むのかもしれません・・・が）
（なーんとなくですが、私の技量では表現できないことをやろうとしていたということですね）

iframeを使ってみるのは今回が初めてでしたので、
そのフレーム整理作業とテーブル応用作業がリンクも混じって混乱し、
私の参考リンクのソースを見よう見まねで使ってしまい、
混乱を極めてしまった次第です。
　作っていただいたソースは保存させていただき、じっくり点検して理解していこうと思います、
しかし、フレームもjavaも、やっぱり難しいですね！！！
とり急ぎお礼まで。

回答No.2

o84

これこれ、こういうのがやりたいの！
というサイトがありましたら、
リンクを張って例を見せていただけませんか。
絵でもよいです。

その方が話が早いかも。

お礼

■　右面フレームページ・ソース（※反映せず。失敗したままのもの）
<Style Type="text/css">
<!--
/*style*/
body{
scrollbar-face-color:#191970;}
html{scrollbar-face-color:#191970;}
<!--
-->
<link rel=stylesheet href="style.css">
</head>
<body><center>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td>
<blockquote style="border-style: dotted; border-width: 3; border-color: black; padding: 10; line-height: 180%;">
<br>
<hr size="1" color="black">
<br><table border="1">
<tr><td>
<iframe src="migihome.html" name="migi" width="600" height="900" frameborder="1" scrolling="yes">
</iframe>
</td></tr></table><br>
</body></html>
・・・・・・・ココまで失敗したもの・・・・↓ここから成功して妥協したもの
■右面フレームページ・ソース
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01//EN//">
<html>
<head>
title>_home</title>
<META http-equiv="Content-style-Type"content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<META NAME="auther"content="">
<META NAME="copyright="content="">
<Style Type="text/css">
<!--
/*style*/
body
{scrollbar-base-color:#fff0f0;
scrollbar-face-color:#;E6E6FA
font-family:"MS UI Gothic","Lucida Sans Unicode","Verdana","Arial",sans-serif;
font-size:9pt;
background-color:#ffffff;
color:#191970;
margin:20px 20px 20px 20px;
padding:20px 20px 20px 20px;}
A{text-decoration:none;cursor:w-resize;
}
A:HOVER{text-decoration:none;border-width:1px 1px 1px 1px;border-style:solid solid solid solid;border-color:#7868ee;
}
-->
</Style><body>
<a name="#1"><br><br><br><img src=".gif"borde="0"align="center">
<br><big><br>ほにゃららほにゃらら
<br><br></big>第1<br><br><br>編集中<a name="#2"><br><br><br><br>第2<br>br><br>編集中<a name="#3"><br><br><br>第3～～～略～～～～<a name="#51">編集/////</body></html>

補足

続き・・・・・・■左フレームページ・ソース
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01Frameset//EN">
<HTML>
<head>
<title>_list_l</title>
<META http-equiv="Content-Type"content="text/html;charset=ecu-jp">
<META http-equiv="Content-style-Type"content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<META NAME="auther"content="">
<META NAME="copyright="content="">
<STYLE type="text/css">
<!--
/*style*/
body{font-family:MS UI Gothic;
scrollbar-bace-color:#ffffff;
background-color:#ffffff;
color:#191970;
border-style:dotted;border-width:2px;border-color:#7b68ee;
}
A{text-decoration:none;
cursor : w-resize;
}
A:HOVER{
text-decoration : none;
position : relative;
top : 3px;
left : 3px;
background-color:#191970;
color:#ffffff;
}
table{filter:Alpha(opacity=80);}
tr.r{background-color:#c71585;
color:#f8f8ff;}
tr.b{background-color:#000080;
color:#ffffff:}
.img {behavior: url(#default#time2);}
-->
</STYLE>
<script language="javascript">
<!--
function navi(obj) {
url = obj.options[obj.selectedIndex].value;
if(url != "") {
location.href = url;
}
}
//-->
</script>
</HEAD>
<body Alink="#9400d3"Vlink="#483d8b">
<br><hr><div align="left">
<font color="#000022"size=3>
<b><u><small>　* も　く　じ *　</u>
</font>
<form method=post>
<select onChange="navi(this)">
<!-- valueにURLを記入 -->
<small>
<option style="background-color:#fff0f0;color:#191970;" value="heidi_list_l.html">　ページ一覧　
<option style="background-color:#f0fff0;color:#191970;"
value="heidi_left.html">　1～52文へ
<option style="background-color:#bc8f8f;color:#191970;"
value="">　編集中
～～～省略～～～～
<option style="background-color:#8fabbc;color:#191970;" value="">１０
<option style="background-color:#b6bc8f;color:#191970;" value="">　そのほか
<option value="heidi_left.html"alt="このページのはじめへ">　目次へ　
</select>
</form>
<br><br>
<table background="" width="160"border="1"align="center"valign="top"fontcolor="#d26910">
<div align="center">
<font color="#d26910">
<tr><td><small><br>
カテゴリー（編集中）
</td></tr></font></table>
<hr></body></html>・・・・・・ココまで・・・・・・・

回答No.1

o84

ご質問のタイトルを読んだときには
意味が判ったつもりだったのですが、
ご質問の本文を読んだら、意味がよく判りません。
（申し訳ありませんが日本語が・・・）

---------------------
画面を左右に分けフレーム（テーブルでもよい）を作り、
　　　はいはい。
左面の上部～
　　　「～」というのは？？
（その下部には、フォーム一覧を表示する以外は、ほかのリンクが有効なテキストを常駐させたい）
　　　「フォーム一覧」というのが突然出てきたのですが
　　　どういうものをお考えでしょうか。イメージが湧きません。

～のフォームリスト一覧からテキストリンクをクリックすると、
　　　「～のフォームリスト一覧」というのが
　　　また突然出てくるのですが、何でしょうか。
　　　フォームリストというものの意味が判りません。
　　　「～」というのが「フォームリスト一覧？」
　　　でもさっきは「～」の下に「フォーム一覧」が
　　　あると書かれていませんでした？
右側面に、あるテキスト部分を特定して頭だしリンクをし、
　　　右側面というのは右側のフォームですか？
　　　#nameを使ったアンカーのことかな、と思います。
(nameを使う？）右側面selfに表示させたいのですが、
　　　「右側面self」って何ですか？
　　　「self」というのは何のことでしょうか。
そういうフォームと、フレームを利用したリンクの軽い指示方法を探しています。
<iframe><tabel>など組み合わせても、混乱してどうもうまくいきません。

最も優先して表現したいのは、
左面にテキスト一覧を常駐させてしまわず、
　　　「テキスト一覧」がまた突然出てきました。
　　　「フォーム一覧」と言っていたものですか？
今回のリスト一覧（フォーム）以外にも、右へのリンクが有効なテキストエリアを残したいのです。
　　　テキストエリアからリンクしたい？？？
　　　<textarea>ってお分かりでしょうか。
---------------------

できれば回答してさしあげたいです。
なので、まずは↑の部分を書き直してください。
「フォーム一覧」という言葉を
どういう意味で使われているのか理解できないので、
何がしたいのか判りません。

左のフレームには何があるのでしょうか？

補足

長いので分けます
アドバイスいただきありがとうございます、また説明が混乱し、不備ばかりですみません。

さて、こういう風にしたいのです。（見本サイトみつからず＝探してみます）

１、ページをあけた時

　　　　　　　　　　　　　　　　　　左右仕切り線
　　↓
　フォームの窓→」」目次」」」▼ 一列 |　　　
　　　　　 　　　　　　　 　　|
　　　　　　　　　　　　 　　 |
　　　　　　　　　　　　　　 |
　　　　　　　　　　　　　　　|

２、フォーム▼クリックでビヨーンと

　　　　　　　　」」目次」」」▼ |
　　　　　　　　」」」」」」」　（２列め |
　　　　　　　　」」」」」」」　３ |
　　　　　　　　」」」」」」」　４ |
　　　　　　　　」」」」」」」　５・・・ |

３、たとえば２列目を選択クリックすると

４、２列目カテゴリーの左画面が出る（出したい）

　　　　　　　　　　　　　　　　　左右仕切り線
　　↓
　 」」２のタイトル」」▼ 　　 |約５０章・・・・・　
　　　　　 　　　　　　　 　　|
ここはママでもリンクでもいい※ |
　　　　　　　　　　　　　　 |
＜ここに５０章のリスト＞　　　　|

５、５０章の長いスクロールではなく
　　各章をクリックしたら右にその章の
　　頭がトップに出るようにしたい！

　　※の意味＝目次にいつも戻れるようにしたい
　　　　　　　そして、
　　　　　　　その５０章の２番だけでなく
　　　　　　　ほかの３番、４番も同様の操作
　　　　　　　で、右側に対応した内容を表示したい　のです。
　　　　　　　そして、各章の頭トップ出しをしたい　のです。

////////////////////////////////////////////

そして、昨日、なんとか妥協策で成功したのは、以下です。

＜ソース＞　なるべく簡潔にします。

■<親フレーム設定ページ・ソース＞

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01Frameset//EN//">
<html>
<head>
<title>_frameset</title>
<meta HTTP-EQUIV="content-type"CONTENT="text/html;charset=euc-jp">
<META http-equiv="Content-style-Type"content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<META NAME="auther"content="">
<META NAME="copyright="content="">

<Style Type="text/css">
<!--
/*style*/
body{font-family:MS IU Gothic;
background-color:#ffffff;
}

A{text-decoration:none;
cursor:w-resize;
}

A:HOVER{
text-decoration:none;
border-width:1px 1px 1px 1px;
border-style:solid solid solid solid;
border-color:#7868ee;
}

-->
</Style>
</head>

<Frameset cols="25%,*"frameborder="0"noresize>

<Frame src="list_l.html"NAME="a"
scrolling="yes"NORESIZE>

<Frame
src="heidi_migihome.html"NAME="b"
scrolling="yes"NORESIZE>

</Frameset>
<html>

・・・・・ココまで・・・・・・・