https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

フレームのページを作る

フレームタグはページを分割したい時に用います。ページを 上下や左右に分割したりすることでコンテンツが多いページでも 閲覧しやすいホームページを作ることができます。

■フレームのオプション

フレームタグのオプションで基本的なものをいくつか挙げてみます。

オプション 説明
bordercolor フレームの枠の色を指定します。
src フレームのソースのURLを示します。
name フレーム名を指定します。
scrolling scrolling="yes"、scrolling="no"でスクロールバーを表示するかしないかを指定します。
height フレームの高さを指定します。
width フレームの幅を指定します。
frameborder フレームの枠の有無を指定します。frameborder="yes" frameborder="no" frameborder="1"のように指定します。

■フレームセットのオプション

次にフレームセットのオプションをいくつか挙げてみます。

オプション 説明
cols ページを縦に分割します。比率はCOLS="18%,80%"、 COLS="*,20%"のように指定し逆にcols="100%,*"と *を数字の後ろにもってくるとframeborder="1"としてもフレームが見えない ページになってしまいます。
rows ページを横に分割します。指定の仕方はcolsと同じ要領でできます。
border フレームの枠のサイズを指定します。
bordercolor フレームの枠の色を指定します。
frameborder フレームの枠の有無を指定します。frameborder="yes" frameborder="no" frameborder="1"のような指定をします。

■フレームのページを作る

では上記のオプションを用いて縦に分割された基本的な ページを作ってみます。 まず、フレームページ本体のファイルを作ります。

ソース frame.html

<HTML>
<HEAD>
<TITLE>MyHomePage</TITLE>
</HEAD>
<FRAMESET COLS="100,*">
<FRAME SRC="menu.html" name="hidari">
<FRAME SRC="main.html" name="migi">
</FRAMESET>
</HTML>

次に左のページのファイルを作ります。

ソース menu.html

<HTML>
<HEAD>
<TITLE>メニュー</TITLE>
</HEAD>
<BODY bgcolor="khaki">
<p>メニュー</p>
<p><A HREF="nikki1.html" TARGET="migi">日記1</A></p>
<p><A HREF="nikki2.html" TARGET="migi">日記2</A></p>
<p><A HREF="nikki3.html" TARGET="migi">日記3</A></p>
</BODY>
</HTML>


TARGET="migi"はメニューの項目(日記1~3のページ)を右側のページ に表示するということでありname="migi"に対応しています。

次に右のページのファイルを作ります。

ソース main.html

<HTML>
<HEAD>
<TITLE>メイン</TITLE>
</HEAD>
<BODY bgcolor="blue">
ようこそわたしのホームページヘ
</BODY>
</HTML>

次にメニューの日記1、日記2、日記3のファイルを作ります。

ソース nikki1.html

<HTML>
<HEAD>
<TITLE>日記1</TITLE>
</HEAD>
<BODY>
今日は晴れだった。
</BODY>
</HTML>


ソース nikki2.html

<HTML>
<HEAD>
<TITLE>日記2</TITLE>
</HEAD>
<BODY>
今日は雨だった。
</BODY>
</HTML>


ソース nikki3.html

<HTML>
<HEAD>
<TITLE>日記3</TITLE>
</HEAD>
<BODY>
今日は雷だった。
</BODY>
</HTML>

以上で全部で6つのファイルができました。 これらをまとめると下記のようなフレームページができます。

サンプルページ

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

インラインフレームを作る

HTMLタグ一覧のページに戻る