初心者向けホームページ作成講座
フリーソフトでホームページを作ろう!
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
t-1.png(323 byte)

フレームページの作成

(更新日 08/11/19)

 フレームとはホームページでは複数のページを分割して表示する方法の事を指します。どのような物かは実際にサンプルを見て下さい。フレームの特徴は、右側と左側や上と下などでそれぞれ違うページを表示できる他、インラインフレームを使えば指定のサイズで小窓のように別ページを表示する事もできます。ここでは通常のフレームに関して説明していきます。

フレームの作成ウィザード

frame-1.png(1514 byte)

 フレームは左右2分割の場合、土台になるページと左側のページ、右側のページと全部で3ページ必要になります。土台になるページは通常表示される事はありませんが、左右に表示するページの指定などをするのに必要です。では、まず土台になるページを作ります。「新規作成」で新しいページを出して特に何も編集せず、保存しておきます。これをフレームの土台にします。ここからツールバーの「フレーム作成」ボタンをクリックします。

frame-2.png(5436 byte)

■まず最初に分割タイプを選択します。ここでは左右2分割を例に設定していまが、複雑な構造のフレームを指定できます。

■フレームの定義ファイルは、先程作っておいたファイルを指定します。「上書きするか」と聞かれるので「はい」を選択します。

frame-4.png(3973 byte)

■フレームのタイトルを記入します。タイトルは通常のページに付けるタイトルと同じでファイル名ではありません。

■フレーム未対応のブラウザへ表示は、フレームが表示できないウェブブラウザで開いた時に表示される内容です。

frame-6.png(5443 byte)

■左側と右側の比率を設定します。比率は後で変更出来るので感覚で設定しておいて良いと思います。

■また図をクリックしてフレームに使用するページや境界線、名前の指定ができます。

 最後に「作成」をクリックすればフレームの土台になるページの設定は一旦終了です。今度は左側に表示するページと右側に表示するページを作ります。通常通りに作って良いのですが、先程指定したフレームの幅を意識しながら作りましょう。最後に作成した土台のページをalphaEDITで読み込んで「HTMLソース」を表示します。

 HTMLソースを開くと下のようになっている筈です。赤文字の部分にそれぞれのフレームで表示するページのファイル名を入れます。「name」の部分はフレームの名前で、リンクのターゲットを指定する時に使います。ここでは、左側のフレームに「hidari」、右側に「migi」と設定していますが、「left」「right」でも「menu」「main」でも英字であれば問題ありません。

<html>
<head>
<title>フレームページ</title>
</head>
<frameset cols="150,*">
  <frame name="hidari" src="left_frame.html">
  <frame name="migi" src="frame.html">
  <noframes>
    <body>
    <p>このページはフレームを使用しています</p>
    </body>
  </noframes>
</frameset>
</html>

 これで形式上、フレームページの完成です。

ポイント

 フレームでやっかいなのはリンクの動作ですが、もし左側のフレームにあるリンクで右側のフレームにページを表示させたい場合は、ここでは右側のフレームに「migi」という名前を付けているので、リンクのターゲットの部分に「migi」と入れます。逆に左側のフレームに表示させたければここでは「hidari」になります。リンクでフレームを解除してページを表示する場合は、ターゲットに「_top」を指定しておくか、新規ウインドウを開く「_brank」を使います。

広告
t-2.png(196 byte)