フレームを使わないでそれっぽく見せる

フレームって、見る人にとっても、
サイトを運営・更新していくうえでも、とってもべんりですよねー。

でも、検索エンジン対策を考えると、やっぱり、
つかうのはちょっとためらいがちになっちゃうよね。。。

サイト運営者としては、
フレームで、メニュー部分と、ページの内容を分けてしまえば、
メニューのリンク先などを変更するとき、
フレームセットのファイルだけ、変更すればいいわけだから、
かっなり、楽なんだけどねっ。

見る人にとっても、メニューが移動しないので、
好きなときに、好きなページにいけるし、
わざわざスクロールして、ページ上部に戻る必要もないし。

こういうふうに考えられる方も、けっこう多いんじゃないでしょうか？

わたしも最初のサイトは、
「フレームって、なんてべんりなんだっ♪」
と、つかいまくってたもんですよ。

見に来てくれてるかたも、フレームは見やすいといってくれたし、
なんも問題はなかったはずなんですが、
検索エンジンには不利だと知ってから、フレームの使用を控えるようになりました。

う〜ん、、、ざんねん。

で、前置きが長くなっちゃったけど、
今回ここで紹介する方法は、
「フレームセットを使わないで、フレームっぽく見せる」
方法です。

あくまで、見る人だけにフレームっぽく見せる方法なので、
さきほどいったような、運営者のメリットは、、、、、ないっす。（涙）

メニューの更新には、１ページづつ開いて修正してかないといけないです。
（Ｄｒｅａｍｗｅａｖｅｒのテンプレート機能をつかえば、これも解決するんだけど、たっかいからね〜）


その方法では、「ｏｖｅｒｆｌｏｗ」というスタイルシートをつかいます。

よくみかけません？
スクロールバーのついた、ボックスみたいなの。








これを、大きくつかうことで、フレームのような効果を生み出してしまおう、
という、ちょっと苦肉な策的なアイデアです 。

じっさいに、わたしはインテリアハートというサイトで、これを使っています。

ちょっと図解で説明すると、


こんな感じになってます。

ページの内容は、この「ｏｖｅｒｆｌｏｗ」を設定したボックスの中にあり、
スクロールしていっても、まわりの、枠みたいのは動かないで、
設定したボックスのみスクロールしていきます。

枠が動かないってことは、当然そこにある、メニューも動かないので、
見る人にとっては、フレームっぽいでしょっ。

もし、フレームつかいたかったんだけど、つかえないって方がいたら、
この方法を検討してみては、いかがでしょーかっ！


えらく長い説明になっちゃったけど、
最後に「ｏｖｅｒｆｌｏｗ」の説明と、つかい方を解説して、しめたいと思います。


「ｏｖｅｒｆｌｏｗ: scroll」→スクロールバーつきのボックスをつくる要素。width、height属性でその範囲を決定する。
　　　　　　　　　 （「ｏｖｅｒｆｌｏｗ」は正確には、ボックス内からはみ出た時の処理をどうするか、というものだけど、
　　　　　　　　　　ここでは、スクロールすること前提としてるので、こういった説明をしてます。）


設定の種類は、

じっさいの設定方法は、ＣＬＡＳＳで設定すると良いですよ。


こうやって、ＣＬＡＳＳで定義してあげてから、
<DIV>に適用してあげれば、ＯＫっすっ！

設定の詳しい方法は、レイアウト講座であつかってますので、
そちらを参考にしてねっ☆