現在は、ホームページにて

フレームを使用してサイト構成していますが
 
スタイルシートを使用して
フレームの無い状態で表示させたいと思っています。
 
判りやすく説明されている
サイトをご存知の方教えていただけませんか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/09/11 03:53:54
  • 終了:2006/09/18 03:55:11

回答(5件)

id:kazu1107 No.1

kazu1107回答回数199ベストアンサー獲得回数142006/09/11 04:09:19

ポイント10pt

divなどのblock要素を疑似フレームに見せかけるということですか?


この認識で正しいのならoverflow関連の情報が役に立つかと思います。

http://www.htmq.com/style/overflow.shtml

id:kaiton No.2

kaiton回答回数260ベストアンサー獲得回数342006/09/11 09:54:30

ポイント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

のリンク先にあるサイトを参考に解析するというのも、私がした方法です。

id:HONMA9691 No.3

HONMA9691回答回数2529ベストアンサー獲得回数362006/09/11 04:20:23

ポイント10pt

http://www.tohoho-web.com/css/basic.htm

とほほのスタイルシート入門(基礎知識)

http://tancro.stp-1.com/

スタイルシートの裏の裏

http://www.openspc2.org/reibun/css/

スタイルシート例文辞典

id:daiyokozuna No.4

daiyokozuna回答回数3388ベストアンサー獲得回数752006/09/11 05:02:56

ポイント10pt

http://www.htmq.com/style/index.shtml

スタイルシートリファレンス(目的別)


http://www.stylish-style.com/csstec/csstec-top.html

スタイルシートテクニック/CSS tips


どうぞ

id:TomCat No.5

TomCat回答回数5402ベストアンサー獲得回数2152006/09/11 04:10:09

ポイント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 段組」といったキーワードで検索してみるといいでしょう。

  • id:yakamin
    http://q.hatena.ne.jp/1162116168
    に回答したもの(回答者 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 なし。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません