次はフレームによるレイアウトです。
フレームを構成するタグ
フレームを構成するタグは主に<frameset>、<frame>の２種類です。
<frameset>でフレームの宣言をし、<frame>で内容を明記します。
初めは上下に２分割しましょう。
以下の使い方で上下２等分します。サンプルソースをクリックするとサンプルが表示されます。
<frameset rows="50%,50%">
<frame src="sample_frame/header.html">
<frame src="sample_frame/footer.html">
</frameset>
サンプルソース１
framesetの属性rowsで分割方法を示します。
今回は上下２等分なので、50%を２つ並べてサンプルのように書きます。
frameの属性srcで分割したフレームに表示させるHTMLファイルを指定します。
縦分割なので上から表示させたい順番に指定します。
では、今度は左右に分割してみましょう。
左側の幅を150とし、右側の幅はその残りとします。
以下のサンプルソースをクリックするとサンプルが表示されます。
<frameset cols="150,*">
<frame src="sample_frame/menu.html">
<frame src="sample_frame/main.html">
</frameset>
サンプルソース２
横方向に分割するにはcolsで指定します。
縦分割では割合の指定だったのでパーセントで指定しましたが、今回は幅150なのでそのまま150を入れます。そのあとのアスタリスク（＊）は一般的にワイルドカードと言われ、いろいろな場面で汎用的に使われるのですが、今回の幅指定でも「残り全部」という意味で使用します。
右側の幅を150にしたい場合は、"*,150"にすれば目的の分割ができます。
縦分割と同様にHTMLファイルを指定するのですが、横分割の場合は左から表示させたい順番に指定します。
<frame src="sample_frame/header.html">
<frame src="sample_frame/footer.html">
</frameset>
サンプルソース１
<frame src="sample_frame/menu.html">
<frame src="sample_frame/main.html">
</frameset>
サンプルソース２
入れ子による分割
縦と横の分割を覚えたところで、その２つを組み合わせてみましょう。
考え方はテーブルと共通するところがあり、入れ子にすることで実現します。
テーブルサンプル３をフレームでやってみましょう。
以下のサンプルソースをクリックするとサンプルが表示されます。
<frameset rows="50,*">
<frame src="sample_frame/header.html">
<frameset cols="100,*">
<frame src="sample_frame/menu.html">
<frame src="sample_frame/main.html">
</frameset>
</frameset>
サンプルソース３
縦分割の下部を指定する部分に、またframesetで今度は横分割していることがお分かりになりますか？
次はもっと分割してみましょう。
ヘッダーとフッターがあり、もちろんメニューもあり、メインだけでなくサブコンテンツまで用意してみましょう。
以下のサンプルソースをクリックするとサンプルが表示されます。
<frameset rows="50,*,50">
<frame src="sample_frame/header.html">
<frameset cols="100,*,100">
<frame src="sample_frame/menu.html">
<frame src="sample_frame/main.html">
<frame src="sample_frame/sub.html">
</frameset>
<frame src="sample_frame/footer.html">
</frameset>
サンプルソース４
実際にフレームレイアウトを使ったサイトの多くは、分割した境界線の幅を変えたり消したりしています。
幅の指定は、frameborderを使い、消す時はframeborder=0で消えます。
<frame src="sample_frame/header.html">
<frameset cols="100,*">
<frame src="sample_frame/menu.html">
<frame src="sample_frame/main.html">
</frameset>
</frameset>
サンプルソース３
<frame src="sample_frame/header.html">
<frameset cols="100,*,100">
<frame src="sample_frame/menu.html">
<frame src="sample_frame/main.html">
<frame src="sample_frame/sub.html">
</frameset>
<frame src="sample_frame/footer.html">
</frameset>
サンプルソース４
リンクの設定
「タグで遊ぶpart２」でリンクの張り方（aタグ）について説明しました。
上のサンプルソースで、メニューの部分にリンクを張ったとしましょう。
説明通りのリンク設定をした場合、メニュー部分のページが移動してしまいます。
ここでイメージして欲しいのですが、メニューに張ったリンクをクリックしてページが移動して欲しいのは、メニュー部分ではなくメインコンテンツの部分のはずです。
したがって、フレームレイアウトではフレームレイアウトなりのリンクの張り方があります。
と言っても、aタグを使うことには違いありません。
違うのはtargetという属性を使うところです。
使い方は以下の通りです。
<a href="CCC.html" target="BBB">AAA</a>
このように記述することで、AAAと表示された文字をクリックすると、BBBという名前のフレームにCCC.htmlを表示することになります。
つまり、targetを使うことでクリックしたフレームとは違うフレームのページを切り替えることができる訳です。
ただし、ターゲットとなるフレームが特定されなければなりません。
そのためにframeタグの中でname属性を使って特定します。
以下にサンプルを用意しました。サンプルソースをクリックするとサンプルが表示されます。
<frameset rows="50,*,50">
<frame src="sample_frame/header.html">
<frameset cols="100,*,100">
<frame src="sample_frame/menu.html">
<frame src="sample_frame/main.html" name="main" >
<frame src="sample_frame/sub.html">
</frameset>
<frame src="sample_frame/footer.html">
</frameset>
フレーム宣言部分の抜粋
<tr><td><a href="staff.html" target="main">スタッフ紹介</a></td></tr>
<tr><td>採用情報</td></tr>
<tr><td>店舗情報</td></tr>
<tr><td>リンク</td></tr>
メニュー部分の抜粋
サンプルソースをご覧になってお分かりになるかと思いますが、スタッフ紹介にリンク設定してあるのですが、設定したstaff.htmlを用意していません。
サンプルなのでリンク先のファイルの内容にはまったく意味がないため用意しませんでした。
ターゲットフレームのページが移動するかどうかが今回のサンプルなので、リンクをクリックすることでメインフレームに"Not found"等が表示されればＯＫとします。
<frame src="sample_frame/header.html">
<frameset cols="100,*,100">
<frame src="sample_frame/menu.html">
<frame src="sample_frame/main.html" name="main" >
<frame src="sample_frame/sub.html">
</frameset>
<frame src="sample_frame/footer.html">
</frameset>
フレーム宣言部分の抜粋
<tr><td><a href="staff.html" target="main">スタッフ紹介</a></td></tr>
<tr><td>採用情報</td></tr>
<tr><td>店舗情報</td></tr>
<tr><td>リンク</td></tr>
メニュー部分の抜粋
