TOPページ >  ページ全体の構成 > ページをフレームで分割する

ページをフレームで分割する

ホームページなどのウェブサイトでは、ページを、複数のフレームに分割して表示することができます。ブログの場合でも、フレームの一部にブログを割り当てて表示することができます。

横方向にフレームを並べる(縦分割)の場合、下記のような形式になります。

<frameset cols="分割方法">
<frame src="ページURL" name="フレームの名前">・・・フレームの数だけ繰返し
</frameset>

縦方向にフレームを並べる(横分割)の場合、下記のような形式になります。

<frameset rows="分割方法">
<frame src="ページURL" name="フレームの名前">・・・フレームの数だけ繰返し
</frameset>
  1. 分割方法:分割方法を指定します。『cols』は縦分割、『rows』は横分割です。数値、またはページ全幅に対する割合で指定します。
    数値の場合、『 cols="200,*" 』などと単位なしで記述します。値はピクセル値になります。『*』は、残りの全部、という意味です。
    割合の場合、『 cols="30%,70%" 』などと % をつけて記述します。ウィンドウの大きさが変更されたりしてページの全幅が変化すると、それに合わせてフレームの幅も変わります。
  2. ページURL:分割されたフレームに表示するページのURLを指定します。絶対パスまたは相対パスで指定できます。
  3. フレームの名前:フレームに名前をつけます。ここで付けた名前が、リンク先のターゲット名になります。リンクしない場合は必要ありませんが、後々必要になる場合もありますので指定しておいたほうが良いでしょう。

使用例です。

サンプルとして、3つのページを用意しました。

これらのページを、フレームを使って1つのページで表示させます。

上記サンプルページ2分割のソースは、次のようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http:/www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>ブログでもだいたい使えるHTMLタグ リファレンス-フレームサンプルページ-</title>
</head>

<frameset cols="200,*">
<frame src="framesample_left.html" name="left">
<frame src="framesample_main.html" name="main">
</frameset>

</html>

上記サンプルページ3分割のソースは、次のようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http:/www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>ブログでもだいたい使えるHTMLタグ リファレンス-フレームサンプルページ-</title>
</head>

<frameset rows="100,*">
<frame src="framesample_banner.html" name="banner">
<frameset cols="200,*">
<frame src="framesample_left.html" name="left">
<frame src="framesample_main.html" name="main">
</frameset>
</frameset>

</html>

このように<frameset>タグを入れ子にしていくことで、ページをいくつでもフレームで分割して表示させることができます。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
フレームのサイズ変更を禁止する
フレームを区切る線の色を指定する
フレームを区切る線の太さを指定する
フレーム分割でスクロールバーの有無を指定する
フレーム非対応ブラウザへの配慮
ページをフレームで分割する
ページに使用する文字コードを指定する
HTML4.01のバージョンを指定する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス