[トップページへ] [←前のページへ] [→次のページへ]


HTML文書をメモ帳で作ってみよう・フレームについて

第01回:HTML文書をメモ帳で作ってみよう!

フレームとリンク先と具体的な作り方

フレームというものがあります。良くwebサイトで見かける、上下2分割や左右に分割されてメニューなどが表示されているものがそうですね。
今回はそれを解説しようと思います。

フレームを使用したページを作るには、少し下準備が必要です。
「ページを分割する情報を書いた」ページ・そして「分割したそれぞれのページ」です。

分割したそれぞれのページは、今まで作ったHTML文書と同じで、特に何かをする必要はありません。

では、「ページを分割する情報」を見ることにします。
今仮に分割する情報を書いたファイルを「index.html」、他の分割したページを「left.html」「right.html」としましょう。

<HTML>
<HEAD>
<TITLE>ページタイトル</TITLE>
</HEAD>

<FRAMESET cols="20%,*">
<FRAME SRC="left.html" name="leftside">
<FRAME SRC="right.html" name="rightside">
</FRAMESET>

</HTML>

太字の部分だけに注目してみましょう。フレームの記述をするのにはFRAMESET要素を使います。
「画面を分割します。分割する方法は横方向で、分割する割合は「20%と、残りすべて」ですよ」という事が書かれています。

次に、太字の間の部分を見ます。ここに「分割したそれぞれのページ」をどのように配置するかを書きます。
分割された画面に表示するHTML文書をSRC=に指定します。重要ですがNAME=に他のFRAME要素とそれぞれ異なる名前を書いておきましょう。後で役に立ちます。
この記述を分割した個数分、つまりFRAMESETで書いた分割数と合致するように書きましょう(^^;

これでフレーム表示に関して完了です。
後は「左のメニューのリンクをクリックすると、右のページが書き変わるようにしたい」というようにしたいこともあるでしょう。
そういった場合は、左ページ中のリンクの記述を以下のように書き直します。

<A HREF="other.html" TARGET="rightside">…</A>

もし左ページ中のリンクすべてが右ページの書き換えを期待する場合は、BASE要素を使うともっとスマートに書けます。

<HEAD>
<BASE TARGET="rightside">

</HEAD>

こう書くと、A要素のTARGET=に何も書かなくても「TARGET="rightside"」を書いたのと同じ事になります。
他にも、TARGET=に書くと特殊な動作をする記述が存在します。

<A HREF="other1.html" TARGET="_blank">新しいウィンドウを開いて表示します</A>
<A HREF="other2.html" TARGET="_parent">フレームの元になった部分を対象にします</A>
<A HREF="other3.html" TARGET="_self">A要素のあるページの部分を対象にします(デフォルト値)</A>
<A HREF="other4.html" TARGET="_top">ウィンドウ全体を対象にします(フレーム表示を破棄)</A>

こんなところですか。わからないところは掲示板とかに書いていただければ補足しますので…。

Author: tkm / せかんどすたいる

[トップページへ] [←前のページへ] [→次のページへ]