• 締切済み

CSSで「フレーム」のような効果は出せますか?

遅ればせながら テーブルやフレームを使わず、スタイルシートによる段組レイアウトを勉強しています。 段組レイアウトそのものは何とかできるようになったのですが、 例えば、 ヘッダ(header) 左メニュー(side) 右に内容(contents) といったいわゆる2段組レイアウトの場合 sideのリンクをクリックすると、 contentsだけが別のページにジャンプするという、 フレームのような効果は出せるのでしょうか? ブログのようなCGIにすればいいんでしょうが 更新するのは私ひとりですし、 プログラムを導入するのが面倒で・・・(--;) できればHTMLとCSSだけで実現したいのです。 全画面リンク(_top)にするというテならばありますが その場合、headerおよびsideに配置した画像も、全く同じものなのに再度表示することになって、結果アクセスが重くなりますよね。 あと、アイフレームも極力使いたくないです。 わかりにくい説明で申し訳ありませんが とにかく、以上の方法以外で、 実現できるか出来ないかを教えてください。 私が見ている参考書はレイアウトの事しか載っていなくて・・・ よろしくお願いします。

  • CSS
  • 回答数3
  • ありがとう数4

みんなの回答

noname#19175
noname#19175
回答No.3

いわゆるAjaxを使えば、ページの中の一部(よく使われるのはDIVタグの内部やテーブルの一部)を変更させることが出来ますので、 それをつかってフレームのリンクをシミュレートできますが、 Ajaxをまともに使えるブラウザは、JavaScriptが使えるブラウザの中でもごく新しいものだけです。 擬似的にフレームっぽく見せることは出来ても フレームの「リンク」をシミュレートする方法は、Ajax以外の方法ではないと思います。 *Ajax JavaScriptの機能の一つ。ページ移動やポップアップウインドウ、IFRAMEを使わずに、サーバーとの通信を行う。 Ajaxを使わなくても、別の方法で同様の通信を行うことは可能ですが、いずれにしてもJavaScriptが必須になります。 > 確かに本来の意図と異なるテーブルやフレームの使い方は嫌われますが、それらが全て悪と言うわけではなく積極的に使うべき局面もありますので・・・・ 私もテーブルやフレームの使用は推奨とは言いませんが、使うべき所は使うべきだと思います。

chiroru2004
質問者

お礼

う~ん、ジャバスクリプトはフレームとテーブル以上に使いたくないですね・・・今別のページで導入しているスクリプトもオペラで正常に動作しなくて、外そうかと思っているくらいなので。 結局1ページ目はCSSで作って、 2ページ目以降は大人しくフレームを使うことにしました。 参考になりました。ありがとうございました。

  • sutead_02
  • ベストアンサー率46% (26/56)
回答No.2

一度キャッシュに読み込まれた画像などは、わりと早く表示されますので、最初だけ読み込みに時間がかかる程度で、共通の部品を使うページは以後早めに表示されると思うのですが。 私のホームページにも、左のメニューはそのままで、右側の表示のみが切り替わるようなギミックを設けていますが、それはレイヤーを使い、JavaScriptで左メニューのボタンを押さえると、レイヤーの表示・非表示が入れ替わるように作っています。 この場合も、最初に多くの部品を読み込むので時間がかかります。 スタイルシートやHTMLタグのみでこれを実現するのは無理だと思います。 一層のこと、FLASHコンテンツにしてしまうのも手ですね。

chiroru2004
質問者

お礼

結局1ページ目はCSSで作って、 2ページ目以降は大人しくフレームを使うことにしました。 参考になりました。ありがとうございました。

noname#20378
noname#20378
回答No.1

無理です。 あ。Javascript等を使う手もあるかもしれませんが・・・おそらく質問者様の意図とは違うと思うので却下しておきます(笑)。 最大限努力しても全ページにナビゲーションを配置して擬似的にそう見せるしか方法はありません。 >その場合、headerおよびsideに配置した画像も、全く同じものなのに再度表示することになって、結果アクセスが重くなりますよね。 その場合結局これは逃れられません。 ところで質問者様は何故テーブルやフレームを使いたくないか教えてください。確かに本来の意図と異なるテーブルやフレームの使い方は嫌われますが、それらが全て悪と言うわけではなく積極的に使うべき局面もありますので・・・・ 検索してたら色々とまとまってそうなページがあったので貼り付けておきます http://car.s35.xrea.com/better/frame.php#notneed http://car.s35.xrea.com/better/frame.php#notneed ユーザーやブラウザにlink要素の概念が広まればページ内に配置する必要もないんですが...まだまだ道のりは遠そうです。

chiroru2004
質問者

お礼

CSSを使いたい理由は勉強がてらですね。テーブルとフレームならば簡単に実現できることはわかっているので、あえて・・・ 結局1ページ目はCSSで作って、 2ページ目以降は大人しくフレームを使うことにしました。 参考になりました。ありがとうございました。

関連するQ&A

  • CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。

    CSSにて、「サイドメニュー」「ヘッダ」「コンテンツ」と言うコンテンツを制作したく、以下のソースを記述したのですが、コンテンツ部分(.contents)を100%にすると当然、ヘッダ部分(.header)の100px分がはみ出てしまい、サイドメニュー(.side)の下に余白がでてしまいます。 これを回避するために、現状position: fixed;を使用し、IE用には分岐で他のcssを読ませるようにしているのですが、もっとスマートに、ひとつのcssでこのレイアウトを実現する方法はないものでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- *{ margin: 0px; padding: 0px; } html, body { height: 100%; width: 100%; overflow: auto; } .header { position: absolute; left: 200px; width: 300px; height: 100px; background-color: #ddd; } .side { position: absolute; width: 200px; height: 100%; background-color: #aaa; } .contents { position: absolute; margin-top: 100px; margin-left: 200px; width: 300px; height: 100%; background-color: #333; overflow: auto; } --> </style> </head> <body> <div class="header"> header </div> <div class="side"> side </div> <div class="contents"> contents<br /> </div> </body> </html>

  • フレームとCSSの違い

    1ページを縦に2つに分けたデザイン(サイド部分とコンテンツ部分に区切られたページ)を作成します。 ページを作成する際、フレームで作成するのと、CSSでサイドとメインのレイアウトを作るのとでは、どちらがお勧めでしょうか。 見た目、左右に区切れてればいい(特定の人しか見ないので、ブラウザ表示はIEだけ確認できればOK)のです。 一般的にはどちらで作成したほうがよいでしょうか。 フレームとCSSとでの使い分けがよくわからないのです。 左側にリンク(メニューなど)を表示、右部分にコンテンツを表示する予定です。 初心者な質問ですみませんが、学び始めで少し混乱してしまっています。なんでもよいのでアドバイスよろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSで、フレームを使ったようなメニューを作りたいのですが

    HP作り初心者です。ただいま、CSSを使用してのHP作りに挑戦中です。 フレームを使ったHPでよく見るような、画面左側にメニュー、右側に本文という構成にしたいと思っています。 下記「All About」記事を参考に作ってはみたものの、 本文が長いのでスクロールするとメニュー部分が見えなくなってしまいます。 メニュー部分が常に画面上に表示されるように固定したいのですが、どうすればよいのでしょうか。 ご教授よろしくお願いします。 使用ソフト:TeraPadで直打ち。 確認ブラウザ:FireFox3.0.13とIE8.0。 CSS:外部ファイル。A.cssにページレイアウト、B.cssにメニュー部分の情報(文字サイズやリンク関連の装飾など)記載。 メニュー:ulとolタグ使用。 All About・CSSで段組構成 段の背景色が切れないようにする(前) ⇒http://allabout.co.jp/internet/hpcreate/closeup/CU20050328A/ All About・CSSで段組構成 段の背景色が切れないようにする(後) ⇒http://allabout.co.jp/internet/hpcreate/closeup/CU20050401A/ All About・CSSで段組構成 隣の段が下に回りこむのを防ぐ ⇒http://allabout.co.jp/internet/hpcreate/closeup/CU20050307A/

  • CSSでフレーム

    ご存知の方いらっしゃいましたらお教えください。CSSを利用してフレームのような動作をさせるにはどうすればいいのでしょうか?たとえばフレームにおいて仮にナビを左に、メインページを右にしてある場合、ナビのリンクのアクションがメインフレームへ該当するHTMLファイルを呼び出しますが、CSSでこの動作をさせることが出来るのでしょうか。参考になるHPなどございましたらお教えください。よろしくお願いします。

  • 1つのhtmlでフレームのような動きをさせるには

    いつもお世話になっております。 フレームについて質問させてください。 <frame name="header" src="header.html" title="メニュー" scrolling="no"> <frame name="main" src="main.html" title="コンテンツ" scrolling="auto"> 現在、上記のようにフレーム分けを行い、ヘッダー(メニュー)部分は固定にして、メイン(コンテンツ)部分のみスクロールするようにしているのですが、これをフレーム分けせず、1枚のhtmlで同じように行う事は出来るのでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSの三段組みレイアウトについて教えて下さい。。

    CSSレイアウト初心者ですが、CSSの作成段組みを作る時に <div id="container"> <div id="header"> </div><!--/header--> <div id="contents"> <div id="left_bar"> </div><!--/left_bar--> <div id="main"> </div><!--/main--> </div><!--/contents--> <div id="right_bar"> </div><!--/right_bar--> <div id="footer"> </div><!--/footer--> </div><!--/container--> と三段組固定レイアウトを作成したいのですが、 一度目は何回やり直してもfloatの設定でleft_bar,mainの横並びが上手くいかずに、 contentsの中でleft_bar,mainが縦並びになってしまい何回何が原因か様々なサイトで考えを模索してソースを直しても何故かleft_bar,main がcontentsの中で何回書き直しても縦並びになりもう一度一からCSSを組み直してみると、 どうした訳かようやくcontentsの中でleft_bar,mainが横並びになってくれました。 これは一体根本的に何が原因で横並びにさせるつもりが、縦にボックスが並んでしまうのでしょうか? CSSのfloatの概念からハックかなと思いハック親ボックスにハックをかけてみてでも全く関係ないみたいでしたし、親ボックスにピクセルを指定していないからかと思い親ボックスにピクセルで指定しても何故か縦並び?! CSSをもう一度書きなすことで意図したレイアウトになると言う事は一番は何が原因していると見られるのでしょうか?

    • 締切済み
    • CSS
  • CSSで(3)段組のページを作りたいのですが

    上から3段のページを作りたいと思っています。 ヘッダー ↓ コンテンツ ↓ フッター という形にしたいのです。 ヘッダーとフッターの背景色は同じにして、フレームを使ったように見せたかったのですが、画面いっぱいまで広がってくれず困っています。 フレームを使ったら簡単にできるのですが、CSSでは不可能なのでしょうか? 基本的かもしれませんがよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 【CSS】不具合の原因がわかりません。

    すいません、少しややこしいかもしれませんが・・・。 下記のように、「ヘッダ」「コンテンツ」「フッタ」の3つにレイアウトが分かれていて、「コンテンツ」「フッタ」に clear: both; float: none; をかけると不具合なく表示されます(縦に3つ並びます)。 ですが、諸事情により「フッタ」部分にcssをかけることが出来なくなりました。 (企業によるガイドラインなので詳しくは書けません。すいません・・・。) 「フッタ」から clear: both; float: none;をはずすとFirefoxではレイアウトがずれてしまいます。float: left をかけたように「コンテンツ」の右側に「フッタ」が来てしまいます。 いちから構築しなおしてはいるのですが、「コンテンツ」部分にmarginやpaddingの値を加えたり(左右ではなく上下でも)、高さを指定したりするだけでずれてしまいます。 原因は何が考えられるでしょうか? よろしくお願い致します。 ちなみに宣言文は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> としています。 ////////html//////// <body> <div id="header"> ヘッダ </div> <div id="contents"> コンテンツ </div> <div id="footer"> フッター </div> ////////css//////// #header{ } #contents{ clear: both; float: none; } #footer{ clear: both; float: none; }

  • CSSによるFrameの代替方法

    趣味でHPを作成しているものなのですが、 左 |____上_____ 左 | 左 |____下_____ という3分割フレームを使っています。 左にはサイトMapを置き、上にはページタイトル、 そして、下には、左のMapでクリックしたものを「target」で、 下に表示しているのですが、 今後Frame要素がなくなるのではないかと 危惧している為、CSSで代替出来ないかと考えております。 左と上はフレームである必要も無いので良いのですが、 サイトの画面を移動せず、下という1部分だけを 切り替えてという感じで引き続き運営して行きたいのですが、 CSSで代替できないでしょうか? なんとなく段組みレイアウトとJavaScript(こちらは カテ違いですがわかれば)あたりで、何とか出来ないかと 思っています。その他の言語でしょうか? 私は独学でやっているもので、ジャストなものをサイトで探しても 見つからず、持っている本等にも書いてないので、 お分かりの人がいれば教えて頂きたいと思います。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 2カラムレイアウトをサイドバーとコンテンツとで、別のファイルで作りたい。

    CSSを利用して2カラム(サイドがメニューで、中央がコンテンツ)のレイアウトを作りたいのですが、そういったレイアウトを作ろうとすると通常一つのhtmlファイルの中でメニューとコンテンツをそれぞれ<div>でくくって、CSSでそれぞれの<div>に対してレイアウトを指定することで2カラムを実現すると思います。 メニューとコンテンツで別のファイルに書いたものを、表示させたいのですが、どうすれば実現できるでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML