HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

登山・アウトドア・スポーツ専門店【ICI石井スポーツ】 [PR]

● フレームの構造

ウィンドウの左側や上側などにメニューのためのページを表示するなどで、 ウィンドウを複数に分割して表示する方法を、フレームを使ったページなどと呼びます。 このようなページを作成するためには、 フレーム分けするためのファイルを用意する必要があります。
フレーム内に表示されるそれぞれのページは、通常のページと同じように作成しておきます。 閲覧者がフレーム分けするためのファイルにアクセスすると、ウィンドウを設定したフレームに分割して、そこにファイルの内容を表示します。
フレーム分けするためのファイルは以下のように記述します。
ただし、検索サイトなどの検索でフレームの一部として表示されるべきページにダイレクトでアクセスされる可能性があります。 この場合、通常のページと同じように表示されます。 そのため、直接表示しても問題のないようにページを作成する必要があります。
≫≫サンプル参照

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>フレームを使用したページ</TITLE>
</HEAD>
<FRAMESET rows="90,*">
<FRAME noresize src="title.htm" name="title" scrolling="no" frameborder="0" noresize>
 <FRAMESET cols="150,*">
 <FRAME noresize src="menu.htm" name="menu" frameborder="0">
 <FRAME noresize src="main.htm" name="main" frameborder="0">
 </FRAMESET>
</FRAMESET>

<NOFRAMES>
<BODY>
<P>
このページはフレームを使用しています。<BR>
<A href="menu.htm" target="_self">メニューページ</A>
フレームを表示できない場合は<BR>
<A href="main.htm" target="self">こちらにアクセスしてみてください。</A>
</P>
</BODY>
</NOFRAMES>
</HTML>

フレームを設定したページに使用する文書型宣言は、フレーム機能を使用出来る宣言をします。
その後HTML要素とHAED要素を記述し、、BODY要素の代りFRAMESET要素を記述します。
FRAMESET要素には属性によってフレームの構造を設定します。

rows属性は、ウィンドウを水平方向にフレーム分割する設定です。
属性値にはピクセルやパーセント、相対長をカンマで区切って並べ、区切った数だけ下方にフレームが増えます。 初期値は100%で、一つの行を表示することを意味します。
cols属性は、ウインドウを垂直方向にフレーム分割する設定です。
属性値にはピクセルやパーセント、相対長をカンマで区切って並べ、区切った数だけ右方にフレームが増えます。 初期値は100%で、一つの列を表示することを意味します。

FRAMESET要素内に、 実際のフレーム設定を行なうためのFRAME要素を記述します。 この要素は IMG要素IMG要素が画像を表示するために置かれる要素のように、 HTMLページを表示するために置かれる空要素です。
使用する属性はIMG要素と同じsrc属性でフレームに表示するページを設定し、 name属性でフレームの名前を設定し、ハイパーリンクのターゲットとするなど、 IFRAME要素で使用する属性と同じです。
・noresizeを要素
ただしIFRAME要素と違い、フレームの大きさを閲覧者が自由に変えられます
それを抑制したければnoresizeを要素内に記述します。 この記述がされたフレームウインドウはサイズの変更が出来なくなります。 これは制作者にとってはレイアウトを崩されないための有効な手段となりますが、 閲覧者に不便を感じさせることになるかもしれません。

┏━━━━━━━━━━━┓<FRAMESET>
┃           ┃
┃           ┃<FRAME src="title.htm">
┠──┬────────┨<FRAMESET>
┃  │        ┃
┃  │        ┃
┃  │        ┃<FRAME src="menu.htm">
┃  │        ┃
┃  │        ┃<FRAME src="main.htm">
┃  │        ┃
┃  │        ┃
┃  │        ┃</FRAMESET>
┗━━┷━━━━━━━━┛</FRAMESET>

┏━━┯━━━━━━━━┓<FRAMESET>
┃  │        ┃
┃  │        ┃<FRAMESET>
┃  │        ┃
┃  │        ┃<FRAME src="menu.htm">
┃  │        ┃
┃  │        ┃<FRAME src="main.htm">
┃  │        ┃
┃  │        ┃</FRAMESET>
┠──┴────────┨
┃           ┃<FRAME src="title.htm">
┃           ┃
┗━━━━━━━━━━━┛</FRAMESET>

フレームを列で分割する場合は左から右の順に、行で分割する場合は上から下の順に表示されます。
上のようにFRAMESET要素を入れ子に記述することで、 自由にウィンドウを分割することが可能です。
例えばrows属性によって水平方向に分割したFRAMESET要素内に cols属性によって垂直方向に分割したFRAMESET要素を記述した場合、 水平方向に分割されたフレームの一つを、垂直方向に分割することができます。
両方の属性を同時に設定した場合ウィンドウは格子状になり、 左上から順に左から右へ表示されていきます。

<FRAMESET rows="25%,25%,25%,25%" cols="25%,25%,25%,25%">
<FRAME noresize src="gray.htm" name="gray" noresize>
<FRAME noresize src="blue.htm" name="blue" noresize>
 :
 :
<FRAME noresize src="blue.htm" name="blue" noresize>
<FRAME noresize src="gray.htm" name="gray" noresize>
</FRAMESET>
サンプルページ

左側にページメニュー、右側にメインウインドウを表示するフレーム構造のページでは、 ページメニューのA要素によるハイパーリンクのtarget属性を工夫する必要があります。
属性値を記述しなかったり、『_self』ではメニューウインドウが表示されているそのフレームにリンク先が表示されてしまいますし、 それ以外の『_blank』『_top』『_parent』でも問題あります。
この場合、各フレームには必ず名前を付け、 BASE要素またはA要素でリンク先を開くウィンドウのtarget属性を、 表示したいフレームの名前にする必要があります。
ハイパーリンク参照 /  サンプルページ

フレーム未対応ブラウザへの配慮

フレーム構造はHTMLとしては特殊な表示の仕方であり、 フレーム構造を表示できなかったり、表示しない設定をしているブラウザもあり得ます。
そのため、NOFRAMES要素を用いて、 非対応ブラウザがフレームページを開いてしまったときに代わりに表示する記事を記述します。 BODY要素から通常のHTMLページの容量で記述しますが、 通常、フレーム対応のブラウザで開きなおす事を促すか、代りのページへのハイパーリンクを用意しておきます。

フレーム構造のページは便利な分、弊害も有ります。
URL(アドレス)が示すことが出来るのは、ある一つのページ(ファイル)のみで、複数の資源(ファイル)を示す事が出来ません。
そのため、例えば、左側にメニュー、右側にその内容を表示したフレーム構造のページが有るとし、 その右側のフレームに初期以外のページを表示したフレーム構造の状態を、 履歴やブックマークに登録することは不可能です。 そのため、閲覧者が再度アクセスする場合は、一度初期のフレーム構造を開き、メニューをたどるか、 メニューの無い記事だけ状態を開くことになります。
なお、IEにおいてはフレーム構造のページを表示した状態で、右クリックをして作成できるショートカットは、 そのフレームに表示されたページへのショートカットです。 作成してみてメニューしか表示できない、あるいは記事しか表示できないと後悔しないように注意してください。
こういった場合は、アドレスを切って、ページを上がります。 ・・・つまり最後の『/』以降を削除します。
例えば『http://www.domain.co.jp/user/folder/webpage.htm』というURLだった場合、 最後の『webpage.htm』を削除して『Enter』します。
それでもダメなら『folder/』も消します。それでもダメなら・・・とやっていくと、道が開けるかも?。

<<前へ  |上へ|  次へ>>
1234567891011121314151617

広告掲載で簡単収入!!登録無料のアフィリエイトプログラムなら導入は安心。
Click Here! リンクシェア アフィリエイト紹介プログラム http://draft.j-a-net.jp/banner/NEXT アクセストレード
アフィリエイトプログラム比較

TOP] [HOME

更新日時:2014/08/09