• ベストアンサー

フレームとCSSの違い

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

  • HTML
  • 回答数4
  • ありがとう数9

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

保守性を考えれば、フレームのが良いと思います。 例えば、メニュー項目が変わった時、CSSの場合、全部のHTMLファイルを書き直さなければいけませんが、フレームならば、メニューのページだけ書き直せばよいです。 使うひとが不特定多数の場合、フレーム未対応のブラウザのことを考えなければいけないかもしれませんが、IEでみれればよいとのことなので、フレームのほうが何かと楽かと思います。

shino88
質問者

お礼

部分的にちょこちょこ直すのであれば、フレーム なんですね。 早々のアドバイス感謝いたします。ありがとうございます。

その他の回答 (3)

  • q-tip
  • ベストアンサー率28% (2/7)
回答No.4

こんにちは。 >フレームとCSSとでの使い分けがよくわからないのです。学び始めで少し混乱してしまっています。 ここが引っかかったのですが、どの程度のスキルがある方なのでしょうか?理解した上で質問されているのであればいいのですが レイアウトテーブル使用かノンテーブルCSSか frameかiframeか フレームページか単一ページか の比較なら分かりますが、そもそもフレームとCSSは全く違うものです。 CSS:webページをレイアウトするもの フレーム:複数のページをひとつのウィンドウで表示させるもの で、どちらが一般的か、という話だとやはりCSSを使用(単一ページ)、という事になります。CSSでなくてもレイアウトテーブル使用でもいいと思います。 ただ特定の人しか見ず、デザインをさほど考慮しないのであれば、保守の面でフレームの方が断然便利だと思います。 また#2の方がおっしゃっているように、商用サイトではフレームは検索エンジンの問題も含めて敬遠されているのが現状です。 では。

shino88
質問者

お礼

個人の趣味サイトだったので、2段に区切れて表示できたら、方法はなんでもよかったのですが、フレームのほうが作成簡単だけど、見栄えを考えると、やはりCSSなのでしょうね。 不特定の人に見られるものを出すのだから、なにか粗相があってもいけないですよね。 見栄えだけとか言っている場合じゃなかったでした。 勉強になりました。ありがとうございます。

回答No.3

>フレームとCSSとでの使い分けがよくわからないのです。 まず、フレームとCSSの使い分けという発想をなくしたほうがいいと思います。CSSの役割とフレームの役割は全く違う物です。 CSSで段組を組むという場合、HTML上の論理構造をはっきりとさせ、より正しいHTMLを記述する目的があります。 より厳格なHTMLで記述されたページは 驚くほど地味な物になりますが、CSSでは それをまったく別物のページへと変えることができます。 フレームは、単に複数のページを一つのウィンドウに表示させるだけです。 CSSを理解していれば、フレームかCSSかという悩みはおきないはずです。 むしろ、CSSかtableかどちらで段組を組むべきか。の方が自然です。 私はCSSでサイトを造る場合、トップページにあるようなコンテンツのメニューを他のページにも常に表示さるよりも、 トップページ→コンテンツ1→コンテンツ1-2 というように各ページのリンク構造がわかるような リンクをページ上部などに表示させています。

shino88
質問者

お礼

商用ではありません。 自分の見て回っている個人のHPのソースを見ていると フレームをデザインとして使用していることの方が 多かったので、ちょっと疑問に思いました。 単に、CSSで構築できなかっただけだったのかもしれませんが。 構成がわかりやすく作成するというのも重要ですね。 貴重なご意見ありがとうございました。 精進します。

  • Dpop
  • ベストアンサー率51% (279/544)
回答No.2

Web系のSEをやっています。 そのページをどの様に使って頂きたいと思うか。 で、使い道が変わってくると思います。 一つには、印刷を意識してみます。フレーム付きのページでは、 ページ作者が意図した様な印刷ができないかも知れません。 CSSを利用したページの場合、意図した様に印刷できる場合が多いです。 (印刷幅などに無理がなければ。) フレームにメニューを入れる場合。ページ作者は、各ページ毎に メニューを作成する必要が無いため、保守性は向上します。 反面見た目は今ひとつ。と言うページになります。 商用ページの場合、利用者ページ(一般の方がご覧になるページ)では、フレームはあまり利用しません。 デザイン性に劣るため、などいろいろな理由があります。 ただし、CSSを多様してしまうと、多くの利用者が提供側の意図した見え方をしなくなる。 と言う問題から、必要最小限度に抑えるのが常識です。 一方、管理画面はフレームを多様します。メニューや定数をフレームにいれる構成は非常に多いです。 さて。本題に入ります。 使い分けについては、始めに示した通り、どの様に見せたいのか。使ってもらいたいのか。の違いだと思います。 次に、どちらがお薦めか。ですが。 本当は、CSSを利用するタイプがお薦めです。デザイン性も優れていますし、ページデザインを考えやすい。 などの優位性があります。 しかし。作者が、まだあまりCSSを使い慣れていない。自分の力だけで、デザインをCSS/HTML に置き換えることができない。 と言うレベルであるなら、フレームをお薦めします。 先ずは、保守が容易で、頻繁に保守ができること。が大前提です。 保守の無いページは意味がありません。 その上で、ある程度高度な(プロの世界に摩れる)のであれば、1歩上を目指せば良いと思います。 参考になるでしょうか。

shino88
質問者

お礼

商用での使い分け、勉強になります。 個人的にやっているだけなのですが、 以前フレーム組んで、無料HPのスペースにUPしたら すべてのフレームに広告が表示されて、びっくり。 なのでCSS学ぼうと思って、デザインブック 買って勉強中なのです。 なるほどです。今のところフレームで作成しておく ことにします。 勉強あるのみですね。 ありがとうございました。

関連するQ&A

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

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

    • 締切済み
    • CSS
  • 擬似フレームでブログを表示

    HTML及びCSSの初心者です。 この度個人のサイトを開設するにあたり、CSSを使ったフレーム風のページを作成しました。 (各ページにメニュー一式を組み込み、レイアウトを全く同じにするという方法です) そのサイトのメニューコンテンツの一つがブログ(fc2ブログ)なので、他のメニューコンテンツと同一なレイアウトになるように、ブログ管理ページでカスタマイズしました。 ところが実際にファイルをウェブ上にアップロードして、サイトの動作を確認したところ、他メニューからブログページに飛び、ブログページ上でIEの更新ボタンを押すとCSSが全く反映されてないHTMLだけのページが表示されてしまうようになりました。 (分かりにくい文章で申し訳ありません。例えば→TOPページなどからBLOGページへ移動し、そのBLOGページで更新ボタンを押した時です) 試しに他メニューからのブログページへのリンクに<target="_blank">を挿入して、新しいウィンドウを開いてブログページを表示するようにすると、更新してもレイアウトがおかしくなることはありませんでした。 フレーム(flameset)を使ったり、上記のような新規ウィンドウを開くという選択肢があるのは承知していますが、なるべく同一のウィンドウ内でコンテンツを表示させたいので、レイアウトが崩れる理由や対処方などを教えていただけると助かります。 どうぞよろしくお願い申し上げます。

  • CSSでフレームページを作る

    CSSで画像のように割っているフレームページを作りたいのですが、どのHP作成サイトを見てもやり方がよく分かりません。どなたか詳しくCSSでの作り方を教えてくださいませんか?

  • CSSによるFrameの代替方法

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

    • ベストアンサー
    • HTML
  • 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、Winで問題なく表示されるものがMacで不具合が

    CSS初心者です。 左側にコンテンツの一覧(メニュー)を縦に表示させ、残りの右側の部分に内容を表示させるページを作っています。 (HTMLの「フレーム」を想像していただけると近いと思います) 当然メインコンテンツとメニューの文章量は違い、メニューの方が少ないのですが、Macの場合その2列の長さ(高さ)が変わってしまうのが困っています。 (文章量に合わせて四角で囲われてしまい、隣のメインコンテンツと四角の長さが揃わない) 参考にしている本を見ると、メニュー部分の高さに関係なくコンテンツ全体の高さで表示される、という注釈があるのですが、Winでは問題なくてもMacではうまくいっていません。 現在完成の期限が迫っていて、非常に困っています。 解決方法、どなたか思い当たることはありますでしょうか。

    • ベストアンサー
    • CSS
  • フレームの外枠を消したい HTML、CSS

    <iframe></iframe> このタグを使ってページ内にフレームを作成しました。 このフレームの外枠(ボーダー?)を消したいのですが・・・。 タグ内にborder=0を入れ <iframe border=0></iframe> としましたが、外枠は消えません。 CSSも少しならわかるので、CSSを使用する方法でもいいのですが・・・。どちらにしろHTMLで作られている外枠部分を消す必要がありますよね?考え方が間違っていたらおかしなこと言ってるのかもしれません。 とにかく<iframe></iframe>タグで作成したフレームの外枠を消したい。ということで質問させていただきます。わかる方どうぞよろしくお願い致します。

  • CSSによるレイアウトブロック(Dreamweaver)

    Dreamweaver8を使用しています。 参考書にそって、CSSによるレイアウトブロックで、 ページ全体のCSSを作成しました。(body) 次にコンテンツ全てを選択し、全体のCSSを作成しました。(div) ブラウザで表示させると、ページ全体が左に偏ってしまいます。 これを中央にするのにはどうすればよいでしょうか? よろしくお願いします。

  • スタイルシート(CSS)の中にテーブルのようなスタイルシートをつくりたいです。

    Dreamweaver8にてHPを作成しております。 今回CSSをやってみようと思い試行錯誤しながらがんばっているのですが、 現在スタイルシートのfloatタグなどを使って、 ヘッダー、メニュー、コンテンツ、フッターというよくある構成で作っております。 そしてコンテンツ部分以外はテンプレート機能を使い共有できるようにしています。 そして新しいページを作る際、コンテンツ部分だけを編集していくのですが、真ん中で2つにわかれた2段組の文章をつくりたくて、テーブルを使用したところ、テーブルが縦に長くなるとCSSで指定した範囲を超えてしまいレイアウトが崩れてしまいます。 これがテーブルでなく文章でなら縦に長くなっても自動的にCSSの高さが長くなってくれます。 ですので、題名のようにCSSでテーブルのような機能のあるものを教えていただきたいのですが、素人でなにぶん申し訳ないですがよろしくお願い致しますm(_ _)m

    • ベストアンサー
    • 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/

専門家に質問してみよう