【最大10000ポイント】当たる!!質問投稿キャンペーン!

------例------
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を作成したことがないため勉強の時間が必要ですが、フレームよりも見る人の抵抗が少ないということならば色々調べてどうにかしようかとも考えています。

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

このQ&Aに関連する最新のQ&A

A 回答 (2件)

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


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

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

確かにフレーム嫌いの人もいますが、あんまり気にしすぎない方が良いですよ。
    • good
    • 0
この回答へのお礼

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

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

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


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

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

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

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

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

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

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング