11.フレーム・フレーム♪

今回はフレームというものをやります。
#要望も多いですし・・・(笑)
フレームというのは、ページを2つに分けて表示しているページの事です
私のページもそうですね
フレームは約束事が少しい多いです。
少し気合入れていきましょう♪


タグ説明
<frameset>〜</frameset>フレームの設定をしますよぉーというタグです
以下に紹介するタグを使って、フレームを完成させていきます。
<frameset border=(数字)>〜</frameset>フレームの境界線の太さをあらわします。
数字の部分は、直接「1」としても「+1」としてもいいです。
デフォルトは私のページの太さです。
<frameset bordercolor=(色の指定)>〜</frameset>フレームの境界線の色の指定です。
指定の仕方は、今までどおり「直接指定」「RGB指定」どちらでもかまいません。
指定なしは灰色です
<frameset frameborder=(数字)>〜</frameset>フレームの境界線を表示するかどうかです
表示するなら「1」を、しないなら「0」を入れます
<frameset cols=(数字)>〜</frameset>フレームを横に区切る場合の割合の指定です。
数字の部分は直接「100」としてもいいですが「ピクセル」での指定ですので
「50%」と「パーセンテージ」で指定した方がわかりやすいと思います
<frameset rows=(数字)>〜</frameset>フレームを縦に区切る場合の割合の指定です。
数字の部分は直接「100」としてもいいですが「ピクセル」での指定ですので
「50%」と「パーセンテージ」で指定した方がわかりやすいと思います
<frame src="(URL)">フレームに表示させるページの指定です。
「main.html」としても「http://easter.ne.jp/○○/main.html」としてもかまいません。
<frame name="(名前)">そのフレームの部分に指定する名前です。
リンクで「target」指定するときに必須です。
<a target="(名前)">リンク先をフレーム内に指定するときに使います。
名前の部分は「frame name」で指定した名前にします。
また、フレーム内に表示されたくない場合は「_top」を指定
新しいブラウザに表示させるならば「_blank」を指定します。
<noframes>〜</noframes>フレームが表示できないブラウザの際、
中の内容が表示されます

一応ここに「target」と「name」の補足を作りました。
まだ「わからない」という人は見てね♪


次にサンプルとその表示結果です。
今回は3つサンプルがあります。
フレームは「フレームを指示するページ」・「フレームによって呼び出されるページ」
用意しなければなりません。
ですので気をつけてください。



その1(フレーム本体)ファイル名は「sample10_1.html」

<html>
<head>
<title>サンプルそのじゅのいち♪</title>
</head>
<frameset cols="15%,85%">
<FRAME src="sample10_2.html" name="menu">
<FRAME src="sample10_3.html" name="main">
<NOFRAMES>
このページはフレーム対応のブラウザで見てください
</noframes>
</frameset>
</html>


その2(メニュー部分)ファイル名は「sample10_2.html」

<html>
<head>
<title>サンプルそのじゅのにぃ♪</title>
</head> <body> <a href="profile.html" target="main">自己紹介</a> <br>
<a href="bbs.html" target="main">掲示板</a> <br>
<a href="link.html" target="main">リンク</a>
</body>
</html>


その3(メイン部分)ファイル名は「sample10_3.html」

<html>
<head>
<title>サンプルそのじゅのにぃ♪</title>
</head> <body> <h1>サンプルのサイト♪</h1><br><br>
<a href="profile.html">自己紹介</a> <br>
<a href="bbs.html">掲示板</a> <br>
<a href="link.html">リンク</a>
</body>
</html>



表示のサンプルです

まず、フレーム可のブラウザ



次にフレーム不可のブラウザ





というわけで、今回の「第11回フレーム♪」を終わります。
この時点でフレームは基礎中の基礎なので他のサイトでも勉強して見てください
いつか上級編も作りたいと思います
次は「テーブル上級編」の予定

戻る 超簡単なHP作成講座 進む

女の子お絵かき掲示板ナスカiPhone修理