フレーム

フレームを使うとページを横に分割したり、縦に分割することができます。
このサイトも前バージョンでは横に分割していました。
(前バージョン:
[http://homepage2.nifty.com/hazi/2001/]
フレームページの仕組みは下のようになってます。
図を見てもらえば分かるように2つに分割する場合3つのhtmlファイルが必要になります。
a.htmlはブラウザ上では表示されません。
a.htmlにはb.htmlとc.htmlをどういう割合で表示するかを設定します。

フレームを設定する(上の図で言うとa.html)

下のように書いたファイル(a.html)を作ります。
cols="20%,80%"colsというのは横に20:80の割合で分割することを意味していて、
縦に分割するにはrowsにします。
3つ以上分割するにはcols="10%,20%,70%"のようにするだけです。

<html>
<head>
<title>タイトル</title>
</head>
<frameset cols="20%,80%">
<frame src="b.html">
<frame src="c.html">
</frameset>

<html>

下のように書くと、b.htmlのページの左右の余白が0pxに、上下の余白が50pxになります。

余白を指定する

<html>
<head>
<title>タイトル</title>
</head>
<frameset cols="20%,80%">
<frame src="b.html" marginwidth="0px" marginheight="50px">
<frame src="c.html">
</frameset>
<html>


リンク先を開くフレームを指定する

リンク先のターゲットを指定します。ここでは左側のフレームにリンクを貼り、右側にリンク先を開く指定について説明します。
まずは下のリンクをクリックして確認のページを開き、ターゲット指定・未指定の違いを確認してみてください。
確認ページ

(1)フレームに名前をつける。
まずはフレームに名前をつけてやります。以下の例では「right」と名前を付けてます。

<html>
<head>
<title>タイトル</title>
</head>
<frameset cols="20%,80%">
<frame src="b.html">
<frame src="c.html" name="right">
</frameset>

<html>

(2)リンクにターゲットを指定する。
ただ単に、<a href="abc.html">
と指定したのでは、リンクがあるフレームに開くだけです。
ターゲットを指定するには、下のようにします。

<a href="abc.html" target="right">

フレームを解除して開くには以下のようにターゲットを指定します。

<a href="abc.html" target="_top">

タグ辞典 HTML・CSSを網羅!!おすすめ!!↓
★★★★★
HTML(エイチティエムエル)+CSS
HTML(エイチティエムエル)+CSS handbook2nd edit

↓ぜひ感想をお願いします。(管理人が跳んで喜びます!!不満点などでも結構です。)
分かりやすかった 難しかった
メールアドレス:(書かなくてもいいです。)
感想・要望などあればひとことよろしくお願いします。
ぜひ作ったホームページのアドレスを教えてください!!
【これはおすすめ!!】エーハチネット
エーハチネット
自分のホームページにお店などの広告は掲載することで報酬がもらえます。その広告を紹介してもらえるサイトです。
詳しくは[広告で収入]で説明しています。