髭仙人の漫ろ歩き
HTML
............................ unworldly man go for a ramble in the internet world ...
基本的なフレームの分割方法
 基本的なフレームの分割


 ウィンドウを下図のように、いくつかのフレームに分割することが出来ます。一般的にはタイトル部分、メニュー部分、コンテンツ部分のようにフレームを分割して使用します。

frameA.htm
の内容
frameB.htmの内容  <frameset cols="140,*">
  <frame src="frameA.htm">
  <frameset rows="120,*">
   <frame src="frameB.htm">
   <frame src="frameC.htm">
  </frameset>
 </frameset>
frameC.htmの内容

……………………………………………………………………………………………………………………

 フレームを2分割


 フレームを分割するのに縦方向と横方向がありますが、FRAMESETの属性「rows」でページが上下に、「cols」で左右に分かれます。それぞれサンプルを掲載しました。

縦方向に分割   sample11.htm
 <frameset rows="40%,60%">
  <frame src="sample11A.htm">
  <frame src="sample11B.htm">
 </frameset>

 

横方向に分割   sample12.htm
 <frameset cols="40%,60%">
  <frame src="sample11A.htm">
  <frame src="sample11B.htm">
 </frameset>

 

……………………………………………………………………………………………………………………

 フレームを3分割


 フレームを分割するのに最初に縦方向か横方向に分割し、次に横方向か縦方向2分割して3分割びしますが、それぞれサンプルを掲載しました。

最初に縦方向に分割   sample13.htm
 <frameset cols="140,*">
  <frame src="sample11A.htm">
  <frameset rows="120,*">
   <frame src="sample11B.htm">
   <frame src="sample11C.htm">
  </frameset>
 </frameset>

最初に横方向に分割   sample14.htm
 <frameset rows="120,*">
  <frame src="sample11A.htm">
  <frameset cols="160,*">
   <frame src="sample11B.htm">
   <frame src="sample11C.htm">
  </frameset>
 </frameset>

 

 
フレームに名前を付ける  
 フレームに名前を付け、そのフレームを選択


 フレームに名前を付けることによって、リンク時のターゲット(target)の指定ができます。

<FRAME src="a.html" name="A">

sample15.htm
 <frameset cols="40%,60%">
  <frame src="sample15A.htm" name="menu">
  <frame src="sample11A.htm" name="main">
 </frameset>

フレームの「main」を選択します
 <a href="sample11A.htm" target="main">内容(A)</a>

 

 
分割サイズ指定  
 分割サイズ指定のテクニック


 フレームを分割する場合、cols(横に分割)とrows(縦に分割)にフレームを分割の割合(ピクセル値やパーセンテージ)を、カンマ(,)で区切って指定します。アスタリスク(*)は残りのすべてを示します。

<FRAMESET cols="*,120">
<FRAMESET rows="30%,*">

数値で分割   sample16.htm
 <frameset rows="120,*">
  <frame src="sample11A.htm">
  <frame src="sample11B.htm">
 </frameset>

 

パーセンテージで分割   sample16A.htm
 <frameset rows="45%,*">
  <frame src="sample11A.htm">
  <frame src="sample11B.htm">
 </frameset>

 

 
ブラウザによるサイズ変更の有無  
 ブラウザによるサイズ変更の有無


 通常はブラウザでページを見た人の自由にフレームの分割サイズ変更をする事が出来ます。これを禁止するには、 noresize を付け加えます。

<FRAME src="a.html" noresize>

サイズ変更を不可   sample17.htm
 <frameset rows="120,*">
  <frame src="sample11A.htm" noresize>
  <frame src="sample11B.htm">
 </frameset>

 

 
スクロールバーの表示設定  
 スクロールバーの表示/非表示を設定する


 ページがフレーム内に納まらないと、自動的にスクロールバーが表示されます。このスクロールバーの表示を設定します。

scrolling="YES"  スクロールバー表示
scrolling="NO"   スクロールバー非表示
scrolling="AUTO" 自動表示

スクロールバーの表示   sample18.htm
 <frameset cols="140,*">
  <frame src="sample11A.htm" scrolling="YES">
  <frameset rows="120,*">
   <frame src="sample11B.htm" scrolling="NO">
   <frame src="sample11C.htm" scrolling="AUTO">
  </frameset>
 </frameset>

 

 
境界線の設定  
 境界線の表示と非表示


 フレームで表示したページの余白を設定できます。

frameborder="NO" 境界線を非表示にします。
frameborder="YES" 境界線を表示します。 border で境界線の太さを指定できます。

境界線を非表示   sample19.htm
 <frameset cols="140,*" frameborder="NO">
  <frame src="sample11A.htm">
  <frameset rows="120,*">
   <frame src="sample11B.htm">
   <frame src="sample11C.htm">
  </frameset>
 </frameset>

境界線を表示   sample19A.htm
 <frameset cols="140,*">
  <frame src="sample11A.htm">
  <frameset rows="120,*" frameborder="NO">
   <frame src="sample11B.htm">
   <frame src="sample11C.htm">
  </frameset>
 </frameset>

 

 
余白の設定  
 フレームの余白を設定


 フレームで表示したページの余白を設定できます。「marginheight」はフレームの上下の余白をピクセル単位で指定します。また「marginwidth」はフレームの左右の余白をピクセル単位で指定します。

marginwidth="1" 左右の余白指定です。
marginheight="2" 上下の余白指定です。

余白指定   sample20.htm
 <frameset rows="40%,60%">
  <frame src="sample11A.htm" marginheight="20">
  <frame src="sample11B.htm" marginwidth="50">
 </frameset>

 

 
実用的なフレームの紹介  
  2分割フレームの紹介


 最も簡単なホームページとして、右の「My Home Page」を紹介します。そのHTML文章の最も簡単な記述は、一般的には下記の通りです。

2分割フレーム   sample30.htm
<FRAMESET ROWS="110,*" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0" BORDERCOLOR="#FFFFFF">
<FRAME SRC="sample30A.htm" NAME="ad" MARGINWIDTH="0" MARGINHEIGHT="0" FRAMEBORDER="no" SCROLLING="no">
<FRAME SRC="sample30B.htm" NAME="item" MARGINWIDTH="0" MARGINHEIGHT="0" FRAMEBORDER="no">
<NOFRAMES>
<BODY>
<P>フレームに対応したブラウザでご覧下さい。</P>
</BODY>
</NOFRAMES>
</FRAMESET>

……………………………………………………………………………………………………………………

  3分割フレームの紹介


 最も簡単なホームページとして、右の「My Home Page」を紹介します。そのHTML文章の最も簡単な記述は、一般的には下記の通りです。

2分割フレーム   sample31.htm
<frameset rows="92,*" frameborder="no" framespacing="0" border="0">
<frame name="head" src="sample30A.htm" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
<frameset cols="200,*" border="0" frameborder="0" marginwidth="0" marginheight="0">
<frame src="sample30B.htm" name="navi" noresize marginwidth="0" MARGINHEIGHT="0">
<frame src="sample30C.htm" name="main" noresize marginwidth="20" marginheight="10">
</frameset>
<noframes>
<body>
<p>フレームに対応したブラウザでご覧下さい。</p>
</body>
</noframes>
</frameset>

 

 

 


Design by unworldly man Teizo AMMA
Email amma@beach.ocn.ne.jp
URL http://www.t-amma.com/