１つのデザインを作る、複数の方法について

------例------
http://ccfa.info/cgi-bin/up/src/up15455.jpg
a：サイト名と画像。
b：「案内」「日記」などメニュー（コンテンツ）一覧（出来れば画像を仕様）
c：bでのリンク先を表示する部分
D：copyrightなど
グリーンの部分：背景色、または背景画像

希望としては、a、b、Dは常に変わらぬ位置に表示させておき、cのみがスクロール可能という状態にしたい。
定位置にあるaやbの画像が別のコンテンツに飛ぶたびに点滅するのが嫌なので、出来ればメニューをクリックする度にページ全体が再読み込みになるのは避けたい。
------例------


このようなデザインのホームページを作りたいと思い、HTML作成支援のサイトや、似たデザインのサイトのソースを覗いたりして調べてみたところ、４つの方法があるようでした。

１．cをアイフレームにする
２．５つのフレームを使い、各メニューのリンク先をcにターゲット指定する
３．全てテーブルを使ってデザインし、cの部分のみスクロールバー付きテーブルにする
４．div構造・ブロック要素で作成

Web上のサイトで実際に見かけたのは１．２．４で、３はありませんでした（実際に作っていないので表示の正確性も未知数です）。
４に関しては、スクロールするのはページの一部（上の画像で言えばC）なのにフレームを使っていないサイトが１．２と同じくらいあり、はじめはどういう原理なのかさっぱり分かりませんでした。

そんな時に　http://beginners.atompro.net/agss/011-015.html　こちらのテンプレ配布サイト様の１０番や１２番を見つけ、DLしてソースを見たところ、まるでブログのテンプレートのようなCSS・HTMLの書き方でした。これが、おそらく「div構造」といわれる方法なのだろうと認識しましたが間違っていたらすみません。
他のフレーム未使用のサイト様も、外部CSSは不明ですがHTMLの内容（div idや、メニューの画像などにh1、h2などを使用しているところ）が同じだったので、同じ構造なのだと思います。


長々と書いてしまいましたが、質問したいこと↓
画像の例ようなデザインのサイトを作る場合、（私の知る限りで）４つの方法のうちどれが一番、閲覧者様に優しいか。また、デメリットが少ないか。

クリックの度に点滅～を避けるとするならば、c以外の部分を読み込まない１と２の方法が楽でしょうし私自身はとても便利だと感じます。
ただ、フレーム（特にアイフレーム）は相当なフレーム嫌の方も多いと聞き、調べている最中、フレームの使用を徹底批判するような文章も見かけました（古いものだと思われますが）。
SEO対策にも不利のようですし、ブラウザによっては表示が崩れるという問題もあるので「フレームはやめておいたほうがいいのでは？」と悩みはじめたのが、この質問の発端です。
div構造で書く方法だと、私自身がそのような書き方でHTMLを作成したことがないため勉強の時間が必要ですが、フレームよりも見る人の抵抗が少ないということならば色々調べてどうにかしようかとも考えています。

分かりにくい上長文で申し訳ないですが、回答よろしくお願い致します。

No.1 回答者： issa_srv 回答日時： 2008/03/10 00:11

レイアウト実現方法で、回覧者のメリット・デメリットを考えても仕方がないのではないでしょうか？

少なくとも、私個人としては細かいことを考えすぎる前に作ってみることをお勧めします。

レイアウトを見る限りではフレームを使用するのが一般的な方法ではあります。

CSSのdisplayタグを使用する方法も最近では良く見かけるようになりましたが、
どうしてもソースコードが長くなってしまうのでこちらの方が若干難易度は高い気がします。

フレームを批判する人も居ますが、トップページ以外からアクセスされることが嫌でないのであれば
あとは個人の好みの問題だと思いますよ。

この回答へのお礼

回答ありがとうございます。
同じレイアウトでも方法によっては余計に見る方にストレスを与えてしまうのでは？と思ったのも理由のひとつです。
例えば、「フレームは余り好まれないが４の方法では表示が重くなる」などが、もしかするとあるのかな？と思ったのです。
ですが仰るとおり、作ってみないことには選びようもないですよね。アドバイスありがとうございます。

ちなみに４の方法については、質問の後でようやく正確なことが分かったのですがdiv要素で作ったボックスに「overflow: auto;」でスクロールするよう設定する、CSSによる疑似アイフレームだったようです。
displayタグというのはまた別物なのでしょうか、こちらも調べてみて自分が一番良いと思った手法を選びたいと思います。
ありがとうございました。

お礼日時：2008/03/10 13:47

No.2 ベストアンサー 回答者： tenderfeel 回答日時： 2008/03/10 12:24

時代の波に乗るなら４をおすすめしますが、ブラウザの表示差を払拭するには結構な知識が必要になってきます。

でも静的ページでこの方法を取ると、テンプレートやライブラリ、置換機能の付いてるソフトがないと更新が手間だったり。

一番手っ取り早いのはインラインフレームですね。
よっぽどブラウザが古くなければ対応してますので、CSSより楽です。
インラインフレームならＣの部分だけ読み込むということも可能ですので、理想の動作にも近いのでは。

確かにフレーム嫌いの人もいますが、あんまり気にしすぎない方が良いですよ。

この回答へのお礼

私はフレームに何の抵抗もないのですが（「作る方は楽だが見る方はストレス」と各所で書かれていたのですが、個人的には見る時もフレーム有の方が楽でした）、今現在でもフレームが嫌いな人がいると知って悩んでしまいましたが……気にしすぎなんですね。
今までCSSは各種色換え等の装飾に使うくらいでしたので、CSSをメインにしての作成はかなり手間取りそうな気が自分でもしていますし、とりあえずiframeで作ってみることにします。
同時にこの先のためにもちょっとずつCSSに関しても勉強してみることにします。ありがとうございました。

お礼日時：2008/03/10 13:58