EXTRAFFIC

フレームタグ

階層メニュー ※ トップページから現在表示中のページまでの移動歴を表しています

  1. Top page
  2.  > HTMLタグリスト
  3.  > [ フレームタグ ]

Theme Designed by EXTRAFFIC It is 2008-8-20 22:51 that you displayed this page


フレームタグ

フレーム作成

<frameset cols="左右分割指定" frameborder="境界線表示指定"></frameset> <frameset rows="上下分割指定"></frameset>
<frame src="
ファイル名" frameborder="境界線表示指定"> <frame src="ファイル名" noresize>
このタグはブラウザ上で複数のHTML文書を表示させる指定をするものです。
通常の文書では
<head><body>のタグから構成されますが、フレームを設定する文書では<head><frameset>タグを用います。

上下左右分割指定サンプル
: ピクセル単位, パーセント, アスタリスク
ピクセル単位とは数字で指定する事です。
パーセントとはウィンドウサイズの表示比率を指定する事です。
アスタリスクとは上記で指定したサイズの残りを表示指定する事です。
境界線表示指定とは0, 1で指定します。 0は表示するになり、1は表示しないになります。
ファイル名とは実際に表示させるHTML文書のファイル名を指定するものです。
noresizeとは境界線を固定して分割場所を変更できないようにするものです。

分割指定では分割ごとにカンマ( , )で区切ります。 例えば
<frameset cols="120,*,120">〜</frameset>を言葉で説明すると…
「ウィンドウを左右中央3分割にして、左側フレームを120ピクセルで、右側フレームを120ピクセルで、中央フレームを残りのピクセルで表示。」となります。
下記のように記述します。

記述例
<html>
<head><title>フレーム作成</title></head>
<frameset cols="30%, 70%">
  <frameset rows="*, 100">
    <frame src="frame1.html" frameborder="1">
    <frame src="frame2.html">
  </frameset>
  <frame src="frame3.html" noresize>
</frameset>
</html>
▲ページトップへ

境界線指定

<frameset border="境界線幅指定" bordercolor="境界線色指定" ></frameset>
<frame src="
ファイル名" bordercolor="境界線色指定" marginwidth="左右マージンサイズ">
<frame src="
ファイル名" scrolling="スクロール指定" marginheight="上下マージンサイズ">
このタグはフレームタグで表示する境界線を指定するものです。
境界線幅指定とはピクセル単位で幅を指定するものです。
境界線色指定とは色指定値または色名で色を指定するものです。
左右上下マージンサイズとは境界線からのテキストなどの空白部分をピクセル単位で指定するものです。
スクロール指定とはファイル名ごとにスロールバーの表示あるいは非表示を指定するものです。
スクロール指定サンプル: auto=状況に応じて表示非表示を自動選択, yes=常に表示, no=常に非表示
下記のように記述します。


記述例
<html>
<head><title>フレーム作成</title></head>
<frameset cols="30%, 70%" border="5" bordercolor="blue">
  <frameset rows="*, 100">
    <frame src="frame1.html" frameborder="1" marginwidth="10">
    <frame src="frame2.html" marginwidth="10" marginheight="10">
  </frameset>
  <frame src="frame3.html" scrolling="yes" noresize>
</frameset>
</html>

▲ページトップへ

リンクフレーム指定

<frame src="リンク元ファイル名" name="フレーム名または場所指定"></frame>
<a href="
リンク先ファイル名" target="フレーム名または場所指定">〜</a>
このタグはリンク元からリンク先への場所を指定するものです。
リンク元ファイル名とはフレーム指定した文書ファイルに記述している移動元になるファイルを指定するものです。
リンク先ファイル名とは移動先のファイルを指定するものです。
フレーム名とはnameを指定したフレームにフレーム名をつけることで、targetを指定したフレームにのみリンク先を表示させるものです。
場所指定サンプル
: _blank=新しいフレームに表示, _self=同じフレームに表示, _parent=フレームを一段解除して表示, _top=新しいウィンドウに表示
下記のように記述します。


記述例
<html>
<head><title>フレーム作成</title></head>
<frameset cols="30%, 70%">
    <frame src="frame1.html" name="frame1">
    <frame src="frame2.html" name="frame2">
  </frameset>
</frameset>
</html>

<!--frame1.htmlファイル内容-->
<html>
<head><title>メニューリスト</title></head>
<ol>
<li><a fref="frame3.html" target="frame2">コンテンツ1</a></li>
<li><a fref="frame4.html" target="frame2">コンテンツ2</a></li>
<li><a fref="frame5.html" target="frame2">コンテンツ3</a></li>
<li><a fref="frame6.html" target="frame2">コンテンツ4</a></li>
<li><a fref="frame7.html" target="frame2">コンテンツ5</a></li>

</ol>
</html>
▲ページトップへ

インラインフレーム作成

<iframe src="ファイル名" 属性></iframe>
このタグはHTMLファイルの中にインラインフレームとして表示させるを記述するものです。
このタグは<body>タグ内で使用します。
ファイル名とは読み込むファイルを指定するものです。
属性サンプル: name, width, height, marginwidth, marginheight, scrolling, frameborder, align
nameとはフレーム名を指定するものです。
widthとはフレームの横幅を指定するものです。
heightとはフレームの高さを指定するものです。
marginwidthとはフレーム内左右の余白を指定するものです。
marginheightとはフレーム内上下の余白を指定するものです。

scrollingとはスクロール指定するものです。
スクロール指定サンプル
: auto=状況に応じて表示非表示を自動選択, yes=常に表示, no=常に非表示

frameborderとは境界線の表示非表示を設定するものです。
境界線表示指定
とは0, 1で指定します。 0は表示するになり、1は表示しないになります。

alignとはテキストの回りこみを指定するものです。

また<a href="ファイル名" target="フレーム名">〜</a>のようにtargetを指定すると複数のページをインラインフレーム内に表示することが出来ます。

下記のように記述します。


記述例
<html>
<head><title>インラインフレーム作成</title></head>
<body>
<ol>
<li><a fref="frame2.html" target="frame1">コンテンツ2</a></li>
<li><a fref="frame3.html" target="frame1">コンテンツ3</a></li>
<li><a fref="frame4.html" target="frame1">コンテンツ4</a></li>
<li><a fref="frame5.html" target="frame1">コンテンツ5</a></li>
<li><a fref="frame6.html" target="frame1">コンテンツ6</a></li>
</ol>

<iframe src="frame1.html" name="frame1" width="400" height="150">
こちらのページではインラインフレームを表示してます。<br>
未対応のブラウザをご使用の場合は
<a href="no_frame.html">こちらをクリックしてください</a>
</iframe>
</body>
</html>

<!--frame1.htmlファイル内容-->
<html>
<head><title>あ行</title></head>
<body>あいうえお
</body>

</html>
<!--frame2.htmlファイル内容-->
<html>
<head><title>か行</title></head>
<body>かきくけこ
</body>
</html>


▽このように別ファイルで作ります。

▲ページトップへ

ページ上部へ移動

Active Menu


テーマ表示切替


[35 テーマ]

Now Online

登録ユーザ0人と、ゲスト6人の
合計6人が訪問中です。
(1 人のユーザが HTMLタグリスト を参照しています。)
詳細を見る

今日 :
407
昨日 :
448
今月 :
8517
総計 :
212435


Login Form



AdSense + E.T.C


相互リンク倶楽部リンク集

Copyright (c) ExPiece 2006-2008

Theme Designed by EXTRAFFIC