Challenge HP
HP作成 スタイルシート apeskin サーバー HP作成ソフト アフィリエイト リンク BBS top
HPあれこれメニュー
はじめに
知っておきたい事
HTMLの基本
テーブル
レイアウト
画像
色々なこと
HTML4.01要素一覧
XHTML
テンプレート
エイプスキン
サイトマップ


IEツールバー
Googleツールバー
Infoseekツールバー
Yahoo!ツールバー
Windowsをお使いでしたら、IEツールバーを利用すると検索に便利。 ブラウザに組み込まれ、キーワード検索できます。




■ フレーム分けに使うタグの書き方
+ 左右に分ける

<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として、メインページを残り全部にしています。 これで色々な画面領域でおかしな表示にならないでしょう。フレームのどの部分をフリーサイズにしておくかが、 複雑なフレームを組む場合に重要になります。

ここで紹介しているフレームは、幅や高さに任意の数字を入れて使うことが出来ます。
 you style Copyright (C) 2003-2004 Challenge HP, All rights reserved.