フレームは、ブラウザのウインドウをいくつかに区切って、それぞれに別のページを
表示させることができます。ただし、このフレームを使う方法はあまりおすすめできません。サイトのトップページである、index.html がフレームを分割させるだけのページになってしまうので、SEO的に不利だと言われています。また、特定のページをお気に入りに追加するのが難しい、検索サイトからトップページ以外のページに行ってしまうと、そのページからトップページに行けなくなる(すべてのフレームでトップへのリンクを張れば解決しますが)等の問題があります。
なので、よっぽどでなければ、フレームを使用するのはやめておきましょう。今は使わないのが主流です。
デザイン的にも・・・
こんなのもあるんだくらいに思っていてください^^;
ただし、フレームに対してインラインフレームは更新履歴などを表示する際には非常に役に立ちます。見たことがあるかもしれませんが、「3日で作るホームページ」のトップページで使用しています。
インラインフレームも本来使うべきではないとされていますが、
ほかに有効な代替がないので、気にせず使いましょう^^
こちらは、通常のタグと同じように、入れたいところに書き込みます。上にあるフレームとは別のものと考えてください。ページの中にフレームを作成します。
これはよく更新履歴などで使いますね。src でフレームに表示させるhtmlファイルを指定します。なので、インラインフレームに表示するための別のhtmlファイルを作る必要があります。
それから、幅と高さを指定します。
参考までに、
こうすると、下のようになります。これはnews.html のファイルを読み込んでいるということです。
また、枠線や、スクロールバーの表示、非表示が指定できます。
scrolling=""でスクロールバーの表示方法を指定します。
scrolling="no"でスクロールなし
scrolling="yes"で常にスクロール表示
scrolling="auto"で必要に応じてスクロール表示
frameborder="0"で枠線を非表示
また、title属性を指定することが推奨されています。
また、スクロールバーの色を変えることもできます
読み込まれる側のHTML内で指定する必要があります。
そのHTMLファイルのhead部分か、外部CSSに以下の記述をすればOKです。
<style type="text/css">
body {background-color:#ffffff;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #cccccc;
scrollbar-shadow-color: #cccccc;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #999999;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;}
</style>
<style type="text/css">
html {background-color:#ffffff;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #cccccc;
scrollbar-shadow-color: #cccccc;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #999999;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;}
</style>
ただ、読み込むファイルがDOCTYPE宣言をしていると、htmlで指定するわけだけど、
これだとIE6の場合、横スクロールが出てしまい、見栄えが悪くなります。
なので、読み込む側のファイルではなるべくならDOCTYPE宣言しないほうが良いでしょう。
おそらく新着情報や、お知らせなどのテキストのみのファイルになることがほとんどだと思うので、
DOCTYPE宣言はしなくても問題ないはずです。
DOCTYPE宣言しろと言ったりするなと言ったり。。。どっちやねん!^^;
こちらを使う機会はそうそうありませんが・・・。
というかできる限り使わないようにしましょう。
まず、ホームページのトップページである、 index.htmlにフレームの分割方法を書き込んでいきます。ここには<body>タグは使いません。その代わりに<frameset>タグを使います。 一般的な使い方として、フレームを左右に分けてみますね。左側が20%で残りが右側になります。値には%,ピクセル,* の三つが使えます。*は「残りすべて」と言う意味があります。 また、値は半角のカンマ「,」で区切って並べます。
cols は縦に分割するのに使います。値は左側から書き込みます。上の例では、左側が20%、右側はその残りすべてとなります。横に分割する場合は rows を使います。 値は上から順に指定します。 また、フレームに対応していないブラウザのために、<noframes>でコメントを書いておきます。
フレームは、ウインドウごとにHTMLファイルを指定する必要があります。要するに、一つのウインドウのなかに二つ以上のページを表示させるのがフレームという事です。 このファイルの指定も順番があります。rows では上から下、cols では左から右の順番でhtmlファイルを指定します。
frameborder の○の中に数字をいれます。1か0が入ります。デフォルト(初期値)では1になっていて表示されます。0が非表示なんですが、実際は表示されます。なので、完全に消したい場合は、<frameset>タグに次のソースを書き込みます。
これで、境界線は完全に消えます。
通常は境界線にマウスのポインタを合わせると、境界線を移動することができますが、これで、境界線は固定され、訪問者側も境界線を移動することができなくなります。 ただ、気をつけなければいけないのが、固定してしまうと訪問者側で不便になってしまう場合があるので、使う際は慎重に。
○には数字を入れます。値はピクセルで表されます。
色名または、RGB値で指定します。
marginwidth で横の間隔、marginheight で縦の間隔を指定します。数字で指定します。値の単位はピクセルになります。
○のなかには、
auto ・・・・ページに応じて、スクロールが必要ならスクロールします。指定なしではこれになります。
yes ・・・・スクロールが常に有効
no・・・・・スクロールを禁止します(※使い方要注意)
スクロールを禁止にすると、当然スクロールはできなくなります。なので、使い方は注意が必要です。
たとえば、左側にメニュー、右側が本文だとします。他のページをどのウインドウに表示するのかを指定する必要があります。これをしないと、フレームが解除されて、画面いっぱいに他のページが表示されてしまいます。まず、右側、左側のウインドウにそれぞれ名前をつけます。上の例では左がmenu 、右が main となります。当然他のページは、このmain に読み込ませなければいけません。
説明が下手で伝わらなかったらごめんなさい・・・。上のソースでは左側がframe1.htmlなので、このframe1.htmlのなかには各ページへのリンクを書き込むはずです。そこで、たとえば、sub1.htmlを読み込む場合は、target="main" を指定すれば、mainのウインドウに表示されるわけです。これを指定しないと、左側の狭いウインドウに他のページが表示されてしまいます。