フレーム編




このページはHTML講座のフレーム編です。あと少しです!

さあフレーム編スタートです。 まずは基本です。
フレームを作ってみましょう。<frameset rowsまたはcols = "数字+%">〜</frameset> です。
ここでは以下のようにフレームをつくり3つのテーブルをつなげてみます。
frame1.html,frame2.html,frame3.htmlはあらかじめ作成しておきます。
実際にはframe0.htmlファイルを作成し、frame1.html,frame2.html,frame3.htmlに内容を書く形になります。
以下はframe0.htmlの中身です。frame0.htmlへ行ったら"右クリック→ソースの表示で確認してみよう。

<frameset cols="20%,80%">
<frameset rows="30%,80%">
<frame src = "frame1.html">
<frame src = "frame2.html">
</frameset>
<frame src = "frame3.html">
</frameset>

frame0.htmlへ

次は境界線です。<frameset frameborder="0または1"> になります。 0が非表示で1が表示です。
ソースです。

<frameset cols="20%,80%" frameborder="0">
<frameset rows="30%,80%">
<frame src = "frame1.html">
<frame src = "frame2.html">
</frameset>
<frame src = "frame3.html">
</frameset>

サンプル(境界線)へ

次は境界線に色をつけてみましょう。<frameset bordercolor="色"> です。
ソースです。

<frameset cols="20%,80%" bordercolor="yellow">
<frameset rows="30%,80%">
<frame src = "frame1.html">
<frame src = "frame2.html">
</frameset>
<frame src = "frame3.html">
</frameset>

サンプル(境界線(色))へ

次は境界線を固定してみましょう。<frame src ="ファイル名" noresize> です。
ソースです。

<frameset cols="20%,80%" bordercolor="yellow">
<frameset rows="30%,80%">
<frame src = "frame1.html" noresize >
<frame src = "frame2.html">
</frameset>
<frame src = "frame3.html">
</frameset>

サンプル(固定)へ

次はスクロールです。これはスクロールの有無を決めます。
<frame src ="ファイル名" scrolling="yes"> です。 yesはあり、noはなし、autoは自動。と三種類あります。
ここではyesを書きます。
ソースです。

<frameset cols="20%,80%" bordercolor="yellow">
<frameset rows="30%,80%">
<frame src = "frame1.html" scrolling="yes">
<frame src = "frame2.html">
</frameset>
<frame src = "frame3.html">
</frameset>

サンプル(スクロール)へ

次は非表示対応です。これはフレームに対応していないブラウザやユーザーがフレームを表示しないに設定 している場合に代わりに表示させるのもです。
<noframest>〜</noframest> を組み込みます。
ソースです。

<frameset cols="20%,80%" bordercolor="yellow">
<frameset rows="30%,80%">
<frame src = "frame1.html" scrolling="yes">
<frame src = "frame2.html">
<noframest>
このページはフレームを使っています。
</noframest>
</frameset>
<frame src = "frame3.html">
</frameset>

これはサンプルソースはありません。(各ブラウザの設定によるため) 作るときは念のため書いておきましょう。

最後はインラインです。このフレームは今までのフレームと違い、ページの間でも使用できます。
<iframe src="ファイル名">〜</iframe> です。 実行例です(このページにframe0を埋め込んでいます)。


以上でフレーム編終了です。次はいよいよラストです。