HTML でフレームセットタグを使用するチュートリアル

フレームセットページは通常の Web ページとは多少異なります。依然として <HTML> と、タイトルやその他のスクリプトを含む <HEAD> タグで始まりますが、その内容は各ページのレイアウトデザインのみを表します。したがって、<BODY> 要素は不要になり、<frameset> タグのみが必要になります。

属性の紹介
border: フレームの境界線の太さを設定します。

bordercolor: フレームの境界線の色を設定します。

frameborder: フレームの境界線を表示するかどうかを設定します。設定値は0と1のみで、0は境界線なし、1は境界線を表示することを意味します。

cols: ページを垂直に分割します。値の表現方法は「30%、30（または30px）」の3通りあります。値の数はウィンドウの数を表し、値は「、」で区切られます。「30%」はフレーム領域がブラウザページ全体の領域の 30% を占めることを意味します。「30」は領域の水平幅が 30 ピクセルであることを意味します。「」は領域が残りのページスペースを占めることを意味します。たとえば、cols="25%,200,*" は、ページが 3 つの部分に分割され、左側の部分がページの 25% を占め、中央の水平幅が 200 ピクセル、ページの残りが右側の部分であることを意味します。

行: ページを水平に分割します。数値の表現方法と意味はcolsと同じです。

framespacing: フレーム間に確保する空白スペースを設定します。

使用法
次のコードを見てみましょう:

XML/HTML コードコンテンツをクリップボードにコピー

<フレームセット行= "*" 列= "180,*" フレームボーダー= 0 境界= 0 >
<フレーム src = "左.html" scrolling = "no" noresize > </ frame >
<フレーム src = "main.html" 名前= "main" > </フレーム>
</フレームセット>

このコードは、2 列のフレームセットが設定され、左の列の幅が 180 ピクセルであり、noresize は幅が固定されていることを意味します。

では、フレームナビゲーションを使用して特定のセクションにジャンプするにはどうすればよいでしょうか?次のコードは左側のナビゲーションフレームです。

XML/HTML コードコンテンツをクリップボードにコピー

<html>
<ヘッド>
<メタ文字セット= "utf-8" >
</ヘッド>
<本文 bgcolor = "#ffffd2" >
< ul >
< li > < a href = "./reg.html" target = "main" >ユーザー登録</ a > </ li >
< li > < a href = "./main.html" target = "main" >ホームページに戻る</ a > </ li >
< ul >
</本文>
</html>

これらのリンクは 2 番目のフレームを対象としています。 2 番目のフレームにはリンクされたドキュメントが表示されます。リンクがターゲットファイル内の指定されたセクションを指すナビゲーションフレーム。

この例を詳しく見てみましょう。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" >
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = UTF-8" >
< title > haorooms ブログフレーム標準デモ</ title >
</ヘッド>
<フレームセット行= "180,*" >
<フレーム名前= "トップフレーム" src = "トップフレーム.html" />
<フレームセット列= "50%,50%" >
<フレーム src = "左.html" 名前= "leftFrame" />
<フレーム src = "right.html" 名前= "rightFrame" />
</フレームセット>
</フレームセット>
</html>