フレームを使用してサイト構成していますが
スタイルシートを使用して
フレームの無い状態で表示させたいと思っています。
判りやすく説明されている
サイトをご存知の方教えていただけませんか？
No.2
260
34
10pt
かぶっているかもしれませんが..（その場合、ポイントは無しでも結構です）
はてなの人は、ここをよくブックマークしているみたいです。
http://phpspot.org/blog/archives/2006/09/css_9.html
でも、説明文は少ないので
http://allabout.co.jp/internet/hpcreate/closeup/CU20041111A/
や
http://desperadoes.biz/style/p_frame.php
で説明があります。
違いを見て、理解したい場合は、
http://www.stylesheet-stylebook.com/archives/cssaaaaaa9.php
の「フレームなレイアウト」や
http://www.stylesheet-stylebook.com/?cat=3
のリンク先にあるサイトを参考に解析するというのも、私がした方法です。
No.3
252936
10pt
http://www.tohoho-web.com/css/basic.htm
とほほのスタイルシート入門（基礎知識）
スタイルシートの裏の裏
http://www.openspc2.org/reibun/css/
スタイルシート例文辞典
No.4
338875
10pt
http://www.htmq.com/style/index.shtml
スタイルシートリファレンス(目的別)
http://www.stylish-style.com/csstec/csstec-top.html
スタイルシートテクニック/CSS tips
どうぞ
No.5
5402215
10pt
つまり、CSSを用いて「段組」をしたい、ということですね。
CSS で段組レイアウトをするには float か position を使うのが一般的です。こちらでは、float を使った実例を説明しています。
http://allabout.co.jp/internet/hpcreate/closeup/CU20041111A/
こちらはfloat と position の双方の使い方を、少し古いブラウザでの表示に関することも含めて説明しています。
http://www.fromdfj.net/html/column.html
CSSで段組する場合。サイドバーとページ本体のサイズなどの関係で、せっかくのレイアウトが崩れてしまう場合があります。その点を、こちらのページが実例をあげながら説明してくれています。
http://desperadoes.biz/style/dan/
だいたいこのへんを読んで理解できれば、たいていのレイアウトに対応できる知識が付くと思います。さらに色々な説明を読んでみたければ、「CSS 段組」といったキーワードで検索してみるといいでしょう。
41
36
2
コメント（1件)
に回答したもの（回答者 6.）ですが、折角ですので、こちらにもコメントさせていただきます。
質問者の望むことは、フレームを置き換えられる方法であり、「段組」ではありませんね。
スタイルシートを使ってフレームを使った場合と同様のサイト構成を望む方は非常に多いと思います。しかし、実際にそれを実現しているサイトはあまり多くないように思います。
私も同じことを思い、下記の方法で実現しました。
http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_frame.html
フレームを使ったサイト構成の良さを全て満たしたままフレームをなくすことが出来ました。
フレームを置き換えられるようなページの配置をスタイルシートで実現しようとする上で問題になるのは、大きなシェアを占める IE6 が { position: fixed } に対応していないことですが、 IE6 でもその他の新しいブラウザでもこれを実現できる方法はあります。
単なる段組ではなくてフレームを置き換えられる方法が書いてあるのは、私の知る限り、以下のところです。
スタイルシートで疑似フレーム：
http://desperadoes.biz/style/p_frame.php
（回答者2の方が挙げていらっしゃいます）
縦か横のフレーム分割のみ。 IE 6 対応。 JavaScript なし。
IE6 対応「疑似フレーム」の作り方（スタイルシート、JavaScript使用）：
http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_frame.html
複雑なフレーム分割にも対応可。 IE 6 対応。 JavaScript 併用。
十分な説明文がなくてサンプルのみの入手ならば、以下でも可能でした。
http://phpspot.org/blog/archives/2006/09/css_9.html
（回答者2の方が挙げていらっしゃいます）
http://www.stylesheet-stylebook.com/archives/cssaaaaaa9.php
http://www.stylesheet-stylebook.com/?cat=3
（回答者2の方が挙げていらっしゃいます）
のリンクをたどった先にあるテンプレート
http://css.alsacreations.com/modeles/modele13.htm
http://css.alsacreations.com/modeles/modele14.htm
縦か横のフレーム分割のみ。 IE 6 対応。 JavaScript なし。