+
左右に分ける
<frameset cols="180,*" border="0" frameborder="0" framespancing="0">
<frame src="menu.html" name="menu" scrolling="auto">
<frame src="index.html" name="main" scrolling="auto">
</frameset>
フレームネーム
name="menu"
メニュー
日記
リンク
|
フレームネーム name="main"
メニューにあるリンクをクリックすると、
ここにそのリンクのファイルが表示される。
|
<frameset> でフレームの分け方と各フレームのサイズを決めます。
cols="180,* の場合、cols が左右に分ける事を意味していて、180,* は左側の幅が125pxで、
右側の幅は * になっているから残り全てとなります。
また値が2つなのでフレームは2つに分れます。3つに分ける場合は、 180,*,150 などとなり、
値は" , "カンマで区切ります。
+
上下に分ける
<frameset rows="60,*" border="0" frameborder="0" framespancing="0">
<frame src="menu.html" name="menu" scrolling="auto">
<frame src="index.html" name="main" scrolling="auto">
</frameset>
フレームネームname="menu"
メニュー 日記 リンク
|
フレームネーム name="main"
メニューにあるリンクをクリックすると、
ここにそのリンクのファイルが表示される。
|
上下に分けるのは、rows を使いその他は横の場合と同じです、分ける配分は、
上が60pxで下が残り全部の分け方になります。
+
左右上下 両方に分ける
フレームの分け方はテーブルの分け方と同じようなものですが、複雑になってくると意外に難しく感じるものです。
で、やはり cols と rows を使って縦横自在に分けるられます。
フレームの分け方は、「まず上下2つに分けて、
そのうち下側を更に左右2つに分けてみる」って感じで分けていけば分りやすいかも?
という事で、上の説明の3つ分けのフレームソースを書いてみます。
<frameset rows="60,*" border="0" frameborder="0" framespancing="0">
<frame src="title.html" name="head" scrolling="no">
<frameset cols="180,*" border="0" frameborder="0" framespancing="0">
<frame src="menu.html" name="menu" scrolling="auto">
<frame src="index.html" name="main" scrolling="auto">
</frameset>
</frameset>
上のタグで下のようなフレーム分けが出来ます。よく見かけるタイプですね。
フレームネーム name="head" ここにタイトルやカウンターを設置
|
フレームネーム
name="menu"
メニュー
|
フレームネーム name="main"
コンテンツを表示するメインフレーム
|
+
4つに分けてみましょう。
<frameset rows="60,*,40" border="0" frameborder="0" framespancing="0">
<frame src="title.html" name="head" scrolling="no">
<frameset cols="180,*" border="0" frameborder="0" framespancing="0">
<frame src="menu.html" name="menu" scrolling="auto">
<frame src="index.html" name="main" scrolling="auto">
</frameset>
<frame src="copy.html" name="foot" scrolling="no">
</frameset>
フレームネーム name="head" ここにタイトルやカウンターを設置
|
フレームネーム
name="menu"
メニュー
|
フレームネーム name="main"
コンテンツを表示するメインフレーム
|
フレームネーム name="foot" Copyright (C) でも書いておきましょう
|
+
5つに分けてみましょう。
<frameset cols="50%,700,50%" border="0" frameborder="0" framespancing="0">
<frame src="blank.html" name="blank1" scrolling="no">
<frameset rows="120,*,50" border="0" frameborder="0" framespancing="0">
<frame src="head.html" name="head" scrolling="no">
<frame src="top.html" name="main" scrolling="auto">
<frame src="copy.html" name="foot" scrolling="no">
</frameset>
<frame src="blank.html" name="blank2" scrolling="no">
</frameset>
フレームネーム blank1 余白
|
フレームネーム name="head"
|
フレームネーム blank2 余白
|
フレームネーム name="main"
コンテンツを表示するメインフレーム
|
フレームネーム name="foot"
|
フレームを使う場合、コンテンツの表示するする部分は大きく取った方が良いです。
またPCの画面領域はPCによってそれぞれ違うので、自分のPCに合わせた作りが他のPCでおかしく表示される場合もあるので、
%や*を上手く使って、色々なPCでどのように表示されるかを考えて作った方が良いです。
ちなみに自分のPCは画面領域を 1152×864 に常時なっていますが、時々1024×768を基準に作っていて、
それ以外の画面領域のPCを考えてないサイトを時々目にする事があります。
上の5つ分けのフレームは、両サイドに同じ幅で余白を置いてメインのページを常時センターに表示します。
なので cols="50%,750,50%" といった分け方になります。50%+50%で100%ですが、メインになるフレームを700px取っているので
残りを半分づつ分けて表示されます。
もし余白をpx単位で決めてしまうと、画面領域によっては半端な位置に配置されたり、
画面領域の小さいPCでは、横スクロールが必要なページになってしまいます。
また rows="120,*,50 は、ヘッダー部分を120px・フッダー部分を50pxとして、メインページを残り全部にしています。
これで色々な画面領域でおかしな表示にならないでしょう。フレームのどの部分をフリーサイズにしておくかが、
複雑なフレームを組む場合に重要になります。
ここで紹介しているフレームは、幅や高さに任意の数字を入れて使うことが出来ます。