このようなホームページを表で作りました。
一番上の目次部分を動かさないように固定して、下の部分だけ下にスクロールして見れるようにしました。
このページは日記のページなのですが、左の白い部分は過去の日付などにしたく、右のグレーの部分は毎日の日記を書きたいと思います。きっとフレームなら左右別々に作業できるのでしょうが、表で作っているので文章を入力していくと左の白い部分もどんどん下に降りていってしまいます。これも動かさないようにするにはどうしたらいいでしょうか?
No.5ベストアンサー
- 回答日時:
一応できましたが、サイズを変えるとずれます。
1024x768の固定サイズではうまくいきますが、やりたいことは、こうゆうことだと思います。
変えた部分を載せます。
.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> 2006年<BR> ●1月<BR> ●2月<BR> ●3月<BR> ●4月<BR> ●5月<BR> ●6月<BR> ●7月</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
- 回答日時:
フレームを使わずに実現したいのなら、
タイトル
メニュー 本文
の様なフォーマットを考えてサイトを作成し、日記を書くときにいつもその書式を使用する様にして、タイトル、メニューの部分はいつも同じにしておくしかないと思います。
メニューの日付にハイパーリンクを付けておき、クリックしたら対応するページが表示されるようにするのです。
でも、この方法ですと、タイトルとメニューの更新があるたびに大量のページを編集しなければならず、メンテナンスが大変ですね。
書き込みありがとうございます。なんとか試行錯誤の末にこういう方法を考えました。
●タイトルの部分の下に表を作る
●その表を横に分割させ、左右のセルを作る
●右のページにインラインフレームを挿入させ、中身の日記はまた別の新規ページに作っておく、
というものです。そしたら左のページは右につられて下にスクロールしないようになりました。
violetさんの書いて下さった方法と同じでしょうか?
ハイパーリンクなどつけるようにしたら右の画面が切り替わりますね。でもメンテナンスのことまでは考えていませんでした・・・とりあえずこの方法でやってみたいと思います。ありがとうございました!
No.3
- 回答日時:
スタイルシートを使って左のテーブルの位置を指示して固定するのでは
駄目なんでしょうか?
この回答への補足
書き込みありがとうございます。あまりタグ関係に詳しくないので困っています。
●この左のセル枠を選択して右クリックすると「スタイルの編集」画面が出てきます。
●タグ TDのところで「編集」ボタンをクリックして
「スタイルの設定」画面が出てきたら「位置」の部分をクリックして「固定」などにするということでしょうか?一度やってみましたが、できませんでした・・・。右の毎日の日記もタグでいうとTDになっています。これが何か関係しているのでしょうか?本当にど素人な質問ですいません。
No.2
- 回答日時:
>左の白い部分もどんどん下に降りていってしまいます
意味が分からないので補足下さい。
下図のようにしたいという意味ですか?
1月1日 1日目の文章
1日目の文章
1月2日 2日目の文章
そして、実際にはどうなってしまうと言うのでしょうか?
この回答への補足
書き込みありがとうございます。つたない書き方ですいませんでした。補足いたします。
●左の欄・・・年(月)を記入したい
(例:2006年1月
2006年2月
2006年3月など)
●右の欄・・・毎日の日記を記入したい
例えば、左の欄の1月をクリックすると右には1月の毎日の日記が読めたり、2月をクリックすると右のページは2月の毎日の日記が読めたりするようにしたいのです。この欄はあまりたくさん書かずに、日記の目次のような扱いにしたく独立させたいのです。月が増えてきたら●2006年の日記●2007年の日記とかにしようと思ってます。右の日記につられて下にスクロールして見えなくなって欲しくないのです。でも、今のままだと右に文章を入力していくと、当然、左の部分も下にいってしまい、最後の方になるころには左の目次ははるか上の方に消えてしまうということになります。
この表の上の目次が固定されて動かないように、左の欄も動かないようにすることができないかと思いました。つまり、右のページがどんどんスクロールしても、左のページは固定してうごかない(右につられない)という風にです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- その他(OS) Mac OSの操作について 2 2022/06/08 09:19
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- その他(ソフトウェア) IrfanView で画像のスクロール?できますか 1 2022/08/31 13:57
- Visual Basic(VBA) マクロで設定時刻の入力がわかりません 2 2022/03/29 02:24
- Visual Basic(VBA) 【前回の続きです、ご教示ください】VBAの記述方法がわかりません。 2 2022/08/16 16:44
- Word(ワード) Word2013 縦書き上下二段の表、改行を続けると次ページに情報が表示されるようにしたい 3 2022/06/16 09:24
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- Excel(エクセル) 【スプレッドシート】日報を統合して各業務の所要時間をピボットで表示したい 1 2023/07/06 16:49
- プリンタ・スキャナー 封筒印刷 差出人印刷ずれる 4 2022/05/01 10:12
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルセル余白(例えば左側...
-
borderの太さを1px以下に見せ...
-
レスポンシブWeb 右側の表示が...
-
縦ボーダーの長さ変更方法
-
L字みたいな記号の表示
-
PDFファイルが破損していると表...
-
ピクチャーボックスの大きさに...
-
グーグルのアイコンを操作して...
-
ExcelVBAで挿入画像の縦横サイ...
-
HTMLタグ内文字を抽出するには
-
GIF画像のサイズを取得するには
-
HTMLで、ホームページが作れる...
-
jpegの圧縮率の取得
-
PDF Embeddeの 不具合 - PDFフ...
-
webサイトの表記を書式を崩さず...
-
高画質で画像を表示したい
-
/public_html が表示されていない
-
ホームページ作成ソフトを変更...
-
jQuery BoxerというLightBoxに...
-
iPhoneで HTMLファイルを閲覧
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルセル余白(例えば左側...
-
レスポンシブWeb 右側の表示が...
-
borderの太さを1px以下に見せ...
-
縦ボーダーの長さ変更方法
-
テキストボックスが選択できない
-
googleカスタム検索 ボタンがず...
-
PHP内で同じようにCSSを表示さ...
-
HTMLにsvg画像表示したら小さか...
-
L字みたいな記号の表示
-
PDFファイルが破損していると表...
-
ピクチャーボックスの大きさに...
-
なぜ、ホームページが削除され...
-
ワードプレス管理画面から、ヘ...
-
flaskのreturn render_template...
-
FTPでアップロードした画像のUR...
-
HTMLタグ内文字を抽出するには
-
ブログに画像を選択して、アッ...
-
画像と画像の間のスペースはど...
-
PDF Embeddeの 不具合 - PDFフ...
-
ホームページビルダーで文字の...
おすすめ情報