FRAMESET相当の機能はCSSにあるか?

[新着] Webテンプレートを仮オープンしました



0   名前: hi : 2006/11/23(木) 15:54  ID:925O6qFm
最近CSSを勉強し、ホームページを作成しているhiと申します。
調べてわからなかった件があるのでご指導頂けると幸いです。

質問内容:
HTMLのFRAMESETにて左側にメニュー、通常の表示領域を
右側に分けて作成し、メニュー内の項目を選択すると
分割してある画面の右側に表示させることができると思います。

index.htmlの内容
<HTML>
</HEAD>
<FRAMESET cols="140,*" frameborder="YES" border="2">
<FRAME name="left" src="./menu.html">
<FRAME name="right" src="./main.html">
<BODY>
</BODY>
</FRAMESET>
</HTML>

menu.htmlの内容
<A href="./test.html" target="right">テスト</A>


このFRAMESETと同等のことはCSSで可能なのか教えて
頂けないでしょうか?


現在の状況:

画面の構成は上部にヘッダー、左側にメニュー、右側に
メインの表示画面、下にフッターと2段組(2カラムと
いうのでしょうか)の左サイドバーレイアウトで作成中です。

臨時の対応として、メインの表示部分の<div>〜</div>の
間のみ書き換えたHTML文書をたくさん作ってます。
本来ならメニュー部分とかは余計だと思うのですが、これしか
思いつきませんでした。

ちなみに現在使っているhtml文書にFRAMESETを組み込んでみたのですが
「ページが表示できません」が表示されてしまいました。

1   名前: シキ : 2006/11/23(木) 15:54  ID:bJropG7d
同等のものなら出来ます。
あくまで疑似ですが。。。

レイアウトの事もありますので、以下のサイトをどうぞ。

http://www.h7.dion.ne.jp/~naru44/dhtml/ss6.html

2   名前: シキ : 2006/11/23(木) 15:54  ID:CWzAVTlv
失礼しました、上は間違いです。
http://www.h7.dion.ne.jp/~nuru44/dhtml/ss6.html

3   名前: 匿名 : 2006/11/23(木) 15:54  ID:7eqHy1Mo
「疑似フレーム」で調べるといろいろなやり方がヒットします。
あくまで、疑似ですので、メニューが1項目増えると全ページ書き直しってことになります。
ブラウザのバージョンにより、上手くスクロールしないものや、そもそも表示もしないもの、レンタルサーバーでは規約違反になるものといろいろ問題があるようです。
テーブルを使ったもの
cssだけOKのもの
JavaScriptも併用する物といろいろです。自分にあったものを見つけてください。

4   名前: hi : 2006/11/23(木) 15:54  ID:3h78ejC5
シキさん、匿名さん
ご回答ありがとうございました。
教えて頂いた内容でトライしてみます。

5   名前: yakamin : 2006/11/23(木) 15:54  [URL]  ID:lsQmQ7Rf
 疑似フレーム、すなわち、フレームを使ったのと同様のページ配置/動作を行う方法でしたら、以下にございます。

● スタイルシートで疑似フレーム:
http://desperadoes.biz/style/p_frame.php
縦か横のフレーム分割。 IE 6 対応。 JavaScript 使用せず。
DOCTYPE は、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> で loose.dtd は指定不可。

● IE6 対応「疑似フレーム」の作り方(スタイルシート、JavaScript使用):
http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_frame.html
複雑なフレーム分割にも対応可。 IE 6 対応。 JavaScript 併用。
DOCTYPE は、 loose.dtd も指定可能。

 疑似フレームを実現する上で問題になるのは、 IE6 が { position: fixed } に対応していないことですが、以上の2ページで解説されている方法を使うと、 IE6 でも対応でき、かつ、フレームを使った場合と見た目も挙動も変わらないように作ることが出来ます。

 メニューの書き換えが僅かでも生じる度に全ページの内容を書き換える必要が生じるか否かですが、メニュー部分の HTML コードを出力する外部 JavaScript ファイルを作成するか、メニューを表示する FLASH を作成するなどして、それを全てのページから利用する仕組みにするといったサイト構成にすれば、一つのファイルの書き換えのみで対応できます。下記の例がございます。
http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/auto_menu.html


6   名前: のっと : 2006/11/23(木) 15:54  ID:943Mtr/I
>>5
> メニュー部分の HTML コードを出力する外部 JavaScript ファイルを作成するか、メニューを表示する FLASH を作成するなどして

全部クライアントサイドですね。
link 要素などで適切なナビゲーションを用意していないのなら、(利用できるのならば)PHP や SSI などのサーバーサイドのインクルード機構を利用した方が環境を選ばずにナビゲーションを提供できるのでより良いと思います。

http://web.archive.org/web/20060527065404/www.fromdfj.net/html/overflow.html (Internet Archive に残っていた from DFJ の擬似フレームの記事)
>>5で挙げられた後者の記事とほぼ変わらないのですが、 JavaScript に関する記述がなく簡潔であることと、他にも CSS などに関して有用な記事があるので参考までに。

一覧へ戻る