Sponsored Link
フレームページの作り方

HOME > フレームページの作り方

このページの最終更新日2003/10/11

■ フレームのページとは

フレームとは通常の画面とは違い、1画面の中にいくつかの画面を分割して表示することができます。最近ではソフトでも簡単にフレームページを作れるようですが、ここではHTMLの<frameset>タグを使った作成を紹介します。

◆ 横型フレーム
上部に項目（MENU)がありクリックすると、
内容のところだけが変わる
サンプルはこちら
MENU


内容
◆ 縦型フレーム
横に項目（MENU)があり クリックすると、
内容のところが変わる。このページのことです。
サンプルはこちら

M
E
N
U



内容
■ 最低３個のファイルで 構成されています

フレームページは、メニューや内容のページを囲む枠のことです。そのため最低でも「フレームページ」「メニューページ」「内容ページ」の3ページが必要になります。

メニューページ
 → フレームページ
 ← 内容ページ
　 　 ↓ 　 　
　 　 表示結果
 　 　
■ フレームの作成（フレームの定義)

◆ 以下のソースをコピーして下さい

エディター（メモ帳やワードパット）などにコピーして下さい
→プログラム→アクセサリ→メモ帳

<html>
<head>
<title>ホームページのタイトル</title>
</head>
<frameset cols="20%,*" rows="*">
<frame src="menu.htm" name="menu">
<frame src="naiyou.htm"name="naiyou">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>

◆ 書き換える場所

cols="20%,*" rows="*"

  • フレーム割合です デザインにあわせて変更します
  • 横フレームの場合は ( cols="*" rows="20％,*" ）と記入
  • ピクセルで指定もできます。
    •

    frame src="menu.htm" name="menu"

    MENUになるページのファイル名を英数半角で記入します。ここはここままでいいでしょう。そのかわりメニューになるページは「menu.htm」にしてください

    frame src="naiyou.htm"name="naiyou"

    ホームページ見た時に最初に出てくるページ（トップページ）のファイル名を英数半角で記入、こちらは通常道理作成してください。

    frame src="naiyou.htm"name="naiyou"

    TAGET（ターゲット名）を決める。これは「ページ」を操作するために名前をつけておきます。英数半角であればなんでもいいですが、その場合menu.htmのターゲットの指定も同じ名前にしましょう。

    書き換えができたら、htmlファイルとして保存して、ブラウザで確認してください。ページが分割していると思います。

    ■ メニューページの作成と ターゲットの指定

    メニューページは通常のホームページと同じように作成します。しかしリンクをクリックすると内容ページが変わるように指定しなければなりません。メニューをクリックしたら、内容ページが変わるようにターゲットの指定をします。上記で記述した「naiyou」がここで重要になります。

    ◆ メニューページ記述例

    【menu.htm】
    <html>
    <head>
    <title>ホームページのタイトル</title>
    </head>
    <body>
    <a href="リンク先のURL" target="naiyou">ページ１</a>
    </body>
    </html>

    ◆ 一括指定する場合

    ターゲットを一括指定にすると便利です。"naiyou"のところにはページの名前です。

    <base target="naiyou">戻る</a>

    ◆ その他の指定

    フレームページから、フレーム無しに戻る場合

    <a href="リンク先のURL" target="_top">戻る</a>

    この指定をしないと、フレームの中だけがページ移動してしまいます

    新しい窓を開くには

    <a href="リンク先のURL" target="_blank">戻る</a>
    ■ フレーム非対応の場合

    全てのブラウザがフレームに対応しているとは限りません。この場合に表示するコメントを記入しておきましょう。

    <noframes>コメントを記入</noframes>

    <html>
    <head>
    <title>ホームページのタイトル</title>
    </head>
    <frameset cols="20%,*" rows="*">
    <frame src="menu.htm" name="menu">
    <frame src="naiyou.htm"name="naiyou">
    </frameset>
    <noframes>
    <body>
    ごめんなさいフレーム対応のブラウザでご覧ください。
    </body>
    </noframes>
    </html>
    ■ 境界線の有無

    フレームボーダーの表示。MENUのページと内容のページの間に境界線ができます。

    <frameset cols="20%,*" rows="*">の中に、frameborder="yes"と記入

    表示の指定（yes、 no、 1、 0）

    <html>
    <head>
    <title>ホームページのタイトル</title>
    </head>
    <frameset cols="20%,*" rows="*"frameborder="yes">
    <frame src="menu.htm" name="menu">
    <frame src="naiyou.htm"name="naiyou">
    </frameset>
    <noframes>
    <body>
    ごめんなさいフレーム対応のブラウザでご覧ください。
    </body>
    </noframes>
    </html>
    ■ 境界線の太さ

    フレームボーダーのサイズ。境界線の太さを変更します。

    <frameset cols="20%,*" rows="*">の中に、frameborder="30"と記入

    frameborder="30"

    境界線の太さを指定（ピクセル数）

    <html>
    <head>
    <title>ホームページのタイトル</title>
    </head>
    <frameset cols="20%,*" rows="*"border="30">
    <frame src="menu.htm" name="menu">
    <frame src="naiyou.htm"name="naiyou">
    </frameset>
    <noframes>
    <body>
    ごめんなさいフレーム対応のブラウザでご覧ください。
    </body>
    </noframes>
    </html>
    ■ 境界線の色

    フレームボーダーの色の指定

    <frameset cols="20%,*" rows="*">の中に、bordercolor="#0000ff"frameborder="30"と記入

    bordercolor="#0000ff"＝ 色を指定

    <html>
    <head>
    <title>ホームページのタイトル</title>
    </head>
    <frameset cols="20%,*" rows="*"bordercolor="#0000ff" border="30">
    <frame src="menu.htm" name="menu">
    <frame src="naiyou.htm"name="naiyou">
    </frameset>
    <noframes>
    <body>
    ごめんなさいフレーム対応のブラウザでご覧ください。
    </body>
    </noframes>
    </html>
    ■ フレームごとにスクロールの有無を指定

    <frame src="ファイル名" name="ターゲットネーム">の中に scrolling="yes"と記入

    スクロールの有無の指定（yes no auto）

    <html>
    <head>
    <title>ホームページのタイトル</title>
    </head>
    <frameset cols="20%,*" rows="*">
    <frame src="menu.htm" name="menu"scrolling="no">
    <frame src="naiyou.htm"name="naiyou"scrolling="    yes">
    </frameset>
    <noframes>
    <body>
    ごめんなさいフレーム対応のブラウザでご覧ください。
    </body>
    </noframes>
    </html>
    ■ 最後に・・・。
    ■5画面フレーム

    ◆ 5画面フレームサンプル。

    ソース
    <html>
    <head>
    <title>5画面フレームサンプル</title>
    </head>
    <frameset rows="60,*,50">
    <frame src="ue.htm" name="ue">
    <frameset cols="160,*,100">
    <frame src="hidari.htm" name="hidari">
    <frame src="naiyou.htm" name="naiyou">
    <frame src="migi.htm" name="migi">
    </frameset>
    <frame src="sita.htm" name="sita">
    <noframes>
    <body>このぺーじはフレーム対応のブラウザで見て下さい。
    </body>
    </noframes>
    </frameset>
    </html>
    変更箇所
    <frameset rows="60,*,50"> 上下の窓の大きさ
    <frameset cols="160,*,100"> 左右の窓の大きさ
    <frame src="ue.htm" name="ue"> 上の窓のファイル名
    <frame src="hidari.htm" name="hidari"> 左の窓のファイル名
    <frame src="naiyou.htm" name="naiyou"> 内容になるページのファイル名
    <frame src="migi.htm" name="migi"> 右の窓のファイル名
    <frame src="sita.htm" name="sita"> 下の窓のファイル名

    Click Here! Click Here!