dokidoki
logo
はじめに
インターネットとWWW
入門の前に
HTMLについて
〜ファイル名と拡張子〜
〜タグの記述方法とルール〜
用意するもの
主な操作の手順
入門
LESSON 1 文字を表示させる
2 簡単にレイアウトする
3 文字をデザインする
4 色を設定する
5 画像を表示させる
6 リンクする
7 テーブル(表)を作成する
8 フレームを作る
おまけ
公開する
用意するもの
FFFTPの使い方
Fetchの使い方
索引
タグ辞典
カラー見本表
HTML入門
Lesson8 フレームを作る
HTML例文---Lesson8-1 ページを左右に分割
<HTML>
<HEAD>
<TITLE>
フレーム
</TITLE>
</HEAD>
<FRAMESET COLS="160,*" BORDER="2">
<FRAME>
<FRAME>
<NOFRAMES>
<BODY>
このページはフレームを使用しています。
<BR>
フレームに対応したブラウザでご覧ください。
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
解説
フレーム機能でページを分割することができます。
<FRAMESET>〜</FRAMESET>タグのCOLS属性で左右のフレームの数と幅を指定します。
左右の幅は「,(カンマ)」で区切ります。「*(アスタリスク)」は特に指定しないで成りゆきにするという意味です。
フレーム機能に対応していないブラウザを使っている人のために、
<NOFRAME>〜</NOFRAME>タグを使って知らせます。フレーム未対応のブラウザで表示しようとすると、<NOFRAME>で囲った部分が表示されるようになってます。
HTML例文---Lesson8-2 フレームにリンクを設定
▼フレーム分割のファイル ファイル名「frame.html」※このファイルをブラウザで開きます。
<HTML>
<HEAD>
<TITLE>
フレーム
</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="menu.html" name="menu">
<FRAME SRC="main.html" name="main">
<NOFRAMES>
<BODY>
このページはフレームを使用しています。
<BR>
フレームに対応したブラウザでご覧ください。
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
▼右フレームへ表示させるファイル ファイル名は「menu.html」
<HTML>
<HEAD>
<TITLE>
フレーム
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#333333" LINK="#0000FF" VLINK="#9933FF" ALINK="#CC33FF">
<FONT SIZE="3" COLOR="#FF0000"><I>NEW</I> </FONT><FONT SIZE="2">愛媛県の朝倉村に、蛍を見に行きました。</FONT><BR>
<P>
<FONT SIZE="4" COLOR="#0066CC"><A HREF="kaigai.html" TARGET="main">海外</A></FONT><BR>
<FONT SIZE="2">海外に行くたびに、視野が広がり人生観がかわりますね。</FONT>
<P>
<FONT SIZE="4" COLOR="#0066CC">国内</FONT><BR>
<FONT SIZE="2">国内旅行は温泉付きにこだわります。</FONT>
</BODY>
</HTML>
▼左フレームへ表示させるファイル ファイル名は「main.html」
<HTML>
<HEAD>
<TITLE>
フレーム
</TITLE>
</HEAD>
<BODY BGCOLOR="#99CCFF" TEXT="#333333" LINK="#0000FF" VLINK="#9933FF" ALINK="#CC33FF">
<FONT SIZE="4" COLOR="#333333">左フレームの「海外」をクリックしてください。</FONT><BR>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
▼「海外」をクリックした時に左側に呼び込むファイル ファイル名は「kaigai.html」
<HTML>
<HEAD>
<TITLE>
フレーム
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFCCCC" TEXT="#333333" LINK="#0000FF" VLINK="#9933FF" ALINK="#CC33FF">
<TABLE BORDER="1" BORDERCOLOR="#000000">
<TR>
<TD rowspan="3">ヨーロッパ</TD>
<TD>イギリス</TD>
<TD>ロンドン市内観光</TD>
<TD>シェークスピア生家</TD>
</TR>
<TR>
<TD>フランス</TD>
<TD>パリ市内観光</TD>
<TD>ユーロディズニーランド</TD>
</TR>
<TR>
<TD>イタリア</TD>
<TD COLSPAN="2">ローマ市内観光</TD>
</TR>
<TR>
<TD>アジア</TD>
<TD>中国</TD>
<TD>天安門広場</TD>
<TD>万里の長城</TD>
</TR>

</BODY>
</HTML>
解説
この場合は「海外」という文字を押すと、右側の画面が変わるという設定をしています。 「frame.html」でフレーム分割の設定、<FRAME>タグのSRC属性で、分割したそれぞれの左右のフレームに表示させたいファイル名を指定します。さらにNAME属性では左右のフレームに名前をつけておきます。
「menu.html」ではリンク設定させたい文字に、<A>タグを使って指定します。
この時、HREF属性で呼び出したいファイル名「kaigai.html」を指定し、さらにTARGET属性で表示させたい場所、この場合は右側のフレームの名前「main」(ファイル「frame.html」に<FRAME>タグのNAME属性で設定)を指定します。

copyright