フレームを使わずに、表でHPを作ったけど（３分割）、それぞれを独立させるのは難しい？

質問

このようなホームページを表で作りました。
一番上の目次部分を動かさないように固定して、下の部分だけ下にスクロールして見れるようにしました。
このページは日記のページなのですが、左の白い部分は過去の日付などにしたく、右のグレーの部分は毎日の日記を書きたいと思います。きっとフレームなら左右別々に作業できるのでしょうが、表で作っているので文章を入力していくと左の白い部分もどんどん下に降りていってしまいます。これも動かさないようにするにはどうしたらいいでしょうか？

回答No.5

bob_n · ベストアンサー

一応できましたが、サイズを変えるとずれます。
１０２４x７６８の固定サイズではうまくいきますが、やりたいことは、こうゆうことだと思います。
変えた部分を載せます。

.recordBoxのところと</A></TH></TR></TBODY></TABLE></DIV>
のあとに、</center>など数行を追加し、つじつまあわせに数字を変更しました。メモ帳などで開いて、書き換えてください。

～省略～

<STYLE type=text/css>BODY {
LINE-HEIGHT: 150%
}
SPAN {
BORDER-BOTTOM: #ff0000 3px dotted
}
BODY {
BACKGROUND-COLOR: #ffffff
}
.headBox {
WIDTH: 720px
}
.recordBox {
width:551px;
height: 500px;
overflow: auto;
}
.tblHead {
WIDTH: 720px; BACKGROUND-COLOR: #ffc
}
.tblRecord {
BACKGROUND-COLOR: #fff; width720px:
}
TABLE {
MARGIN-BOTTOM: 0%
}
BODY {
SCROLLBAR-FACE-COLOR: #d6b4fc; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #788d47; SCROLLBAR-ARROW-COLOR: #ffffff
}
</STYLE>
～省略～

border=0></A></TH></TR></TBODY></TABLE></DIV>

</center>

<TABLE class="tblRecord" align="left" width="132" cellspacing="0" bordercolordark="#FFFFFF" bordercolorlight="#FFFFFF" rules="none">

<tr>
<TD vAlign=top align=left width=200 bgColor=#ffffff colSpan=0
height=1086>
</td>
</tr>
</table>

<TABLE class="tblRecord" align="left" width="166" cellspacing="0" bordercolordark="#FFFFFF" bordercolorlight="#000000" rules="none">

<tr>
<TD vAlign=top align=left width=166 bgColor=#ffffff colSpan=0
height=500><BR><BR>　　２００６年<BR>　　●１月<BR>　　●２月<BR>　　●３月<BR>　　●４月<BR>　　●５月<BR>　　●６月<BR>　　●７月</TD>
</tr>
</table>

<DIV class=recordBox>
<TABLE class=tblRecord cellSpacing=0 borderColorDark=#ffffff rules=none width=532 borderColorLight=#FFFFFF>
<TBODY>
<TR>

<TD vAlign=top align=left width=100% bgColor=#999999 height=1086
rowSpan=2><BR>2006.1.4<BR>テスト<BR>
<HR>

お礼

とても丁寧な書き込みありがとうございます。まだhtmlタグに不慣れなので、こちらを参考にゆっくり見ながら作業してゆきたいと思います。

回答No.4

violet430

フレームを使わずに実現したいのなら、

　　タイトル

メニュー　　本文

の様なフォーマットを考えてサイトを作成し、日記を書くときにいつもその書式を使用する様にして、タイトル、メニューの部分はいつも同じにしておくしかないと思います。
メニューの日付にハイパーリンクを付けておき、クリックしたら対応するページが表示されるようにするのです。
でも、この方法ですと、タイトルとメニューの更新があるたびに大量のページを編集しなければならず、メンテナンスが大変ですね。

お礼

書き込みありがとうございます。なんとか試行錯誤の末にこういう方法を考えました。
●タイトルの部分の下に表を作る
●その表を横に分割させ、左右のセルを作る
●右のページにインラインフレームを挿入させ、中身の日記はまた別の新規ページに作っておく、
というものです。そしたら左のページは右につられて下にスクロールしないようになりました。
violetさんの書いて下さった方法と同じでしょうか？
ハイパーリンクなどつけるようにしたら右の画面が切り替わりますね。でもメンテナンスのことまでは考えていませんでした・・・とりあえずこの方法でやってみたいと思います。ありがとうございました！

回答No.3

lanif

スタイルシートを使って左のテーブルの位置を指示して固定するのでは
駄目なんでしょうか？

補足

書き込みありがとうございます。あまりタグ関係に詳しくないので困っています。
●この左のセル枠を選択して右クリックすると「スタイルの編集」画面が出てきます。
●タグ　ＴＤのところで「編集」ボタンをクリックして
「スタイルの設定」画面が出てきたら「位置」の部分をクリックして「固定」などにするということでしょうか？一度やってみましたが、できませんでした・・・。右の毎日の日記もタグでいうとＴＤになっています。これが何か関係しているのでしょうか？本当にど素人な質問ですいません。

回答No.2

violet430

>左の白い部分もどんどん下に降りていってしまいます

意味が分からないので補足下さい。
下図のようにしたいという意味ですか？

１月１日　　　　１日目の文章
　　　　　　　　１日目の文章

１月２日　　　　２日目の文章

そして、実際にはどうなってしまうと言うのでしょうか？

補足

書き込みありがとうございます。つたない書き方ですいませんでした。補足いたします。
●左の欄・・・年（月）を記入したい
（例：２００６年１月
　　　２００６年２月
　　　２００６年３月など）
●右の欄・・・毎日の日記を記入したい

例えば、左の欄の１月をクリックすると右には１月の毎日の日記が読めたり、２月をクリックすると右のページは２月の毎日の日記が読めたりするようにしたいのです。この欄はあまりたくさん書かずに、日記の目次のような扱いにしたく独立させたいのです。月が増えてきたら●２００６年の日記●２００７年の日記とかにしようと思ってます。右の日記につられて下にスクロールして見えなくなって欲しくないのです。でも、今のままだと右に文章を入力していくと、当然、左の部分も下にいってしまい、最後の方になるころには左の目次ははるか上の方に消えてしまうということになります。
この表の上の目次が固定されて動かないように、左の欄も動かないようにすることができないかと思いました。つまり、右のページがどんどんスクロールしても、左のページは固定してうごかない（右につられない）という風にです。

回答No.1

Jodie0625

下の二つをフレームにできない理由はあるのでしょうか？