質問: 1つのデザインを作る、複数の方法について ------例------ http://ccfa.info/cgi-bin/up/src/up15455.jpg a:サイト名と画像。 b:「案内」「日記」などメニュー(コンテンツ)一覧(出来れば画像を仕様) c:bでのリンク先を表示する部分 d:copyrightなど グリーンの部分:背景色、または背景画像 希望としては、a、b、dは常に変わらぬ位置に表示させておき、cのみがスクロール可能という状態にしたい。 定位置にあるaやbの画像が別のコンテンツに飛ぶたびに点滅するのが嫌なので、出来ればメニューをクリックする度にページ全体が再読み込みになるのは避けたい。 ------例------ このようなデザインのホームページを作りたいと思い、html作成支援のサイトや、似たデザインのサイトのソースを覗いたりして調べてみたところ、4つの方法があるようでした。 1.cをアイフレームにする 2.5つのフレームを使い、各メニューのリンク先をcにターゲット指定する 3.全てテーブルを使ってデザインし、cの部分のみスクロールバー付きテーブルにする 4.div構造・ブロック要素で作成 web上のサイトで実際に見かけたのは1.2.4で、3はありませんでした(実際に作っていないので表示の正確性も未知数です)。 4に関しては、スクロールするのはページの一部(上の画像で言えばc)なのにフレームを使っていないサイトが1.2と同じくらいあり、はじめはどういう原理なのかさっぱり分かりませんでした。 そんな時に http://beginners.atompro.net/agss/011-015.html こちらのテンプレ配布サイト様の10番や12番を見つけ、dlしてソースを見たところ、まるでブログのテンプレートのようなcss・htmlの書き方でした。これが、おそらく「div構造」といわれる方法なのだろうと認識しましたが間違っていたらすみません。 他のフレーム未使用のサイト様も、外部cssは不明ですがhtmlの内容(div idや、メニューの画像などにh1、h2などを使用しているところ)が同じだったので、同じ構造なのだと思います。 長々と書いてしまいましたが、質問したいこと↓ 画像の例ようなデザインのサイトを作る場合、(私の知る限りで)4つの方法のうちどれが一番、閲覧者様に優しいか。また、デメリットが少ないか。 クリックの度に点滅~を避けるとするならば、c以外の部分を読み込まない1と2の方法が楽でしょうし私自身はとても便利だと感じます。 ただ、フレーム(特にアイフレーム)は相当なフレーム嫌の方も多いと聞き、調べている最中、フレームの使用を徹底批判するような文章も見かけました(古いものだと思われますが)。 seo対策にも不利のようですし、ブラウザによっては表示が崩れるという問題もあるので「フレームはやめておいたほうがいいのでは?」と悩みはじめたのが、この質問の発端です。 div構造で書く方法だと、私自身がそのような書き方でhtmlを作成したことがないため勉強の時間が必要ですが、フレームよりも見る人の抵抗が少ないということならば色々調べてどうにかしようかとも考えています。 分かりにくい上長文で申し訳ないですが、回答よろしくお願い致します。
回答: 時代の波に乗るなら4をおすすめしますが、ブラウザの表示差を払拭するには結構な知識が必要になってきます。 でも静的ページでこの方法を取ると、テンプレートやライブラリ、置換機能の付いてるソフトがないと更新が手間だったり。 一番手っ取り早いのはインラインフレームですね。 よっぽどブラウザが古くなければ対応してますので、cssより楽です。 インラインフレームならcの部分だけ読み込むということも可能ですので、理想の動作にも近いのでは。 確かにフレーム嫌いの人もいますが、あんまり気にしすぎない方が良いですよ。