ＨＴＭＬを覚えたい～フレーム編（画面の分割）・実践ページ

管理人が勉強しながら覚えるためのページです　もしよかったら参考にしてね♪ 　◆ ホームページを作ってみよう Ⅲ ◆

◆　ＨＴＭＬを覚えたい～フレーム編　◆　⇒　画面を分割するタグの記述を覚えるためのお勉強ページで～す♪

◆　ＨＴＭＬを覚えたい～フレーム編（フレームで画面をヨコ２つに分割）　◆　⇒　お勉強ページと実践ページが一緒に見れます♪

※ ヨコ上を４０％、ヨコ下を６０％の比率にしてますが、フレームをドラッグして見たい方のページの画面を大きくしてご覧ください

お知らせ ・・・ 07/06/17 ようやくフレーム編の実践ページができました♪　リンクテキストをクリックしてサンプルページを見てね♪

※　管理人のブラウザはＩＥ６（ Internet Explorer 6 ）なので、ページの内容はそのブラウザで見た状態で説明しています

※ この実践ページでは、フレーム非対応ブラウザ用のタグの記述は省略しています

☆　07/06/17　ページの一番下から、この表のＴＯＰへジャンプするようにしました

★ ＨＴＭＬの本を参考にしています

項　　　目

　 タ　グ　の　記　述と実際に試したサンプルページ

　◆　タ　テ２つに分割

　　　属性・・・ＣＯＬＳ

　　　属性値・・・％ or ピクセル数

タテ

２分割

　　◆　ヨコ２つに分割

　　　属性・・・ＲＯＷＳ

　　　属性値・・・％ or ピクセル数

ヨコ２分割

　◆　タテ２つに分割する設定とヨコ２つに分割する設定をしてみました

　　　　　分割の比率は、左４０％右６０％に指定して試してみました　　　　

　　　★　ヨコに分割する場合は、属性を≪ ＲＯＷＳ ≫に変えます <frameset rows="～,～">

　　　★　<frame src="～" name="～">のタグは、分割した画面の数の記述が必要です

　　　　　　　画面が３つだったら３つ、５つだったら５つ分を記述します

　　　　　　フレーム（画面）の任意の名前も、自分でわかりやすいように変えてくださいね

　　　★　分割する画面のサイズの比率やピクセル数の指定は、「，」（カンマ）で区切って記述します

◎ ヨコに３分割の場合・・・ rows="～,～,～"　　◎ タテに５分割の場合・・・ cols="～,～,～,～,～"

　　　★ 左の画面を固定して、右の画面は画面サイズに合わせて変わるようにする場合

　　　　　　画面サイズに合わせて変わる方に、数値の代わりに「＊」（アステリスク）を入れます

　　　　　　　　　　　　　　　＜ＦＲＡＭＥＳＥＴ　ＣＯＬＳ＝” ピクセル数 ，＊” ＞

　　　　★　タテ２つに分割設定したページ　★　　　★　ヨコ２つに分割設定したページ　★

※　タテ分割ではフレーム（枠）だけ表示するために、それぞれの画面に表示するページのＵＲＬは入れていません

　--------------------- 以下が、タテ２分割設定ページのソースと説明 ------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>

<title>フレームで画面をタテ２つに分割</title>

</head>

<frame src="" name="left"> ←　 src="ここに、左に表示するページのＵＲＬが入ります"

<frame src="" name="right">　←　 src="ここに、右に表示するページのＵＲＬが入ります"

</frameset>

</html>

　◆　画面を３つに分割

　　ヨ　コ２つ （上）

タ　テ２つ （下の左右）

　　　属性・・・ＲＯＷＳ（横）

　　　属性・・・ＣＯＬＳ（縦）

　　　属性値・・・％ or ピクセル数

　◆　「ヨコ２つ・タテ２つ」計３つの画面に分割する設定をしてみました

　　　　　　　※ ヨコに２つに分割し、ヨコに分割した一方をタテ２つに分割する設定をする事になります

　　　　　ヨコに２分割して、ヨコ上を１５０ピクセルに指定、ヨコ下の画面は画面サイズに合わせて変わるように設定

　　　　　ヨコ下の画面のタテの分割比率は、左３０％、右７０％に指定して試してみました　　　　　

　　　　★　「ヨコ１つ・タテ２つ」計３つの画面に分割設定したページ　★　←　ここをクリックして見てね♪

　　　　　　　　　　　※　ここではフレーム（枠）だけ表示するために、それぞれの画面に表示するページのＵＲＬは入れていません

　--------------------- 以下が、分割設定ページのソースと説明 ------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>

<title>フレームで画面を「ヨコ１つ・タテ２つ」の３つに分割</title>

</head>

<frameset rows="150,*">　　←　この部分が、画面をヨコに分割する設定の開始タグ

　<frame src="" name="top">　←　 src="ここに、ヨコ上に表示するページのＵＲＬが入ります"

　<frame src="" name="left">　←　 src="ここに、ヨコ下の左に表示するページのＵＲＬが入ります"

　<frame src="" name="right">　←　 src="ここに、ヨコ下の右に表示するページのＵＲＬが入ります"

　</frameset>

</frameset>　　　←　この部分が、画面をヨコに分割する設定の終了タグ

</html>　

　◆　画面を４つに分割

　　ヨ　コ２つ （上下）

タ　テ４つ （上下の左右）

　　　属性・・・ＲＯＷＳ（横）

　　　属性・・・ＣＯＬＳ（縦）

　　　属性値・・・％ or ピクセル数

　◆　「ヨコ２つ・タテ４つ」計４つの画面に分割する設定をしてみました

　　　　　　　※ ヨコに２つに分割し、ヨコに分割した上下をそれぞれタテ２つに分割する設定をしました

　　　　　ヨコに２分割して、ヨコ上を２５０ピクセルに指定、ヨコ下の画面は画面サイズに合わせて変わるように設定

　　　　　ヨコ上の画面のタテの分割比率は、左右５０％ずつに指定しました

　　　　　ヨコ下の画面のタテの分割比率は、左３５％、右６５％に指定して試してみました　　　　　

　　　　★　「ヨコ上をタテ２つ・ヨコ下をタテ２つ」計４つの画面に分割設定したページ　★

　　　　　　　　　　　※　上記の設定ページでは、実際はそれぞれの画面に表示するページのＵＲＬを入れていますが

　　　　　　　　　　　　　　ＨＴＭＬソースを分かりやすくするために、下記のソースではＵＲＬを省いています

　　　　　　　　　　　　　　ソースの構成が分かりやすいように、色分けしてあります♪

　--------------------- 以下が、分割設定ページのソースと説明 ------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>

<title>フレームで画面を４つに分割</title>

</head>

<frameset rows="250,*">　←　この部分が、画面をヨコに分割する設定の開始タグ

　<frameset cols="50%,50%">　　 ----------------------------------

　<frame src="" name="topl">　　　この間の記述が、ヨコ上をタテに２分割する

　<frame src="" name="topr"> 　設定のタグの記述

　</frameset>　　　　　　　　　　　　----------------------------------

　<frameset cols="35%,65%">　　　----------------------------------

　<frame src="" name="left">　　　この間の記述が、ヨコ下をタテに２分割する

　<frame src="" name="right">　　設定のタグの記述

　</frameset>　　　　　　　　　　　　----------------------------------

</frameset>　　　←　この部分が、画面をヨコに分割する設定の終了タグ

</html>

ここからは、タテに３つに分割した設定ページを使って、いろいろなタグを追加して試してみました♪

※ ここでは、実際にそれぞれの画面にページを表示する設定をしています　　

★ マウスポインタを、それぞれのサンプルページのフレーム境界線に当ててみると分かりやすいよ♪

マウスポインタの形が「 ←→ 」（両矢印)の時はドラッグして画面の大きさを変えられるけど、形が変わらない場合はドラッグできません

　◆　フレームの境界線を

非表示にする

　　属性：ＦＲＡＭＥＢＯＲＤＥＲ

境界線の有無を指定する属性値

　表示　・・・　ＹＥＳ　ｏｒ　１

　非表示　・・・　ＮＯ　ｏｒ　０ （ゼロ）

※　ＦＲＡＭＥＢＯＲＤＥＲを指定しないで

画面を分割した場合は、初期設定で

「表示」されます（ＹＥＳまたは１と同じ）

　◆　フレームの境界線を非表示にしてみました

　　　　　※ ブラウザによっては、薄いグレー（白？）のラインが残って表示されることもあるそうです

　　　　　　　ちなみに、管理人のブラウザ「ＩＥ６」ではこのラインが表示されました

　　◎　画面全体のフレームに対して境界線を非表示に指定する場合

　　　　　　　＜ＦＲＡＭＥＳＥＴ　ＦＲＡＭＥＢＯＲＤＥＲ＝ ” ＮＯ　ｏｒ　０ （ゼロ） ” ＞　

　　　　　　　　　★　画面全体のフレームを非表示　★ 　　

<frameset rows="150,*" frameborder="no">

</frameset>

　　◎　分割されたそれぞれ個々のフレームに対して境界線を非表示に指定する場合

　　　　　　　＜ＦＲＡＭＥ　ＦＲＡＭＥＢＯＲＤＥＲ＝ ” ＮＯ　ｏｒ　０ （ゼロ） ” ＞　

　　　　　　　　　★　個々のフレームを非表示　★　

<frame src="" name="top" frameborder="no">

</frameset>

　◆　フレームの境界線の太さ

（サイズ）

属性：ＢＯＲＤＥＲ

属性値：ピクセル数

　境界線の太さの指定ができるのは、＜ＦＲＡＭＥＳＥＴ＞タグだけ！ （画面全体のフレームへの適用のみ）

＜ＦＲＡＭＥＳＥＴ　ＢＯＲＤＥＲ＝ ” 境界線の太さを指定する属性値ピクセル数 ” ＞

この実践ページでは、境界線の太さを「５０ピクセル」にしてみました

　　　　　　　　　★　全体のフレーム境界線の太さを「５０ピクセル」に指定　★

<frameset rows="150,*" border="50">

</frameset>

　　　　　　　　　★　全体のフレーム境界線の太さを「０（ゼロ）ピクセル」に指定　★

<frameset rows="150,*" border="0">

</frameset>

※　完全に境界線（フレーム）を消したい場合は、この「０（ゼロ）ピクセル」指定がいいかも・・・

いろいろ試しましたが、管理人のブラウザでは、この指定で完全に境界線（フレーム）がなくなりました

表示しているページの背景色で境目が分かるようにしています

　◆　フレームの境界線の色

（カラー）

属性：ＢＯＲＤＥＲＣＯＬＯＲ

　　　　属性値：カラーネーム

または、＃数値

　境界線の色を指定できるのは、「表示」指定されている境界線、太さが指定されている境界線

この実践ページでは、太さを５０ピクセル、色を「黒」と「黄色系」に指定してみました

　　◎　画面全体のフレームに対して色を指定する場合

＜ＦＲＡＭＥＳＥＴ　ＢＯＲＤＥＲＣＯＬＯＲ＝ ” カラーネームまたは＃数値 ” ＞

　　　　　　　　　★　全体のフレーム境界線の色を指定　★

<frameset rows="150,*" border="50" bordercolor="black">

</frameset>

　　◎　分割されたそれぞれ個々のフレームに対して色を指定する場合

＜ＦＲＡＭＥ　ＢＯＲＤＥＲＣＯＬＯＲ＝ ” カラーネームまたは＃数値 ” ＞

　　　　　　　　　★　個々のフレーム境界線の色を指定　★

<frame src="" name="top" bordercolor="black">

<frame src="" name="left" bordercolor="#cccc00">

</frameset>

　◆　フレームのスクロール

スクロール　・・・　画面の範囲よりページが長かったり幅が大きい場合に、画面の右端や画面の下に付くバー（スクロールバー）で、ページを下や横にずらすこと

　　属性： ＳＣＲＯＬＬＩＮＧ

スクロールを指定する属性値

スクロールを許可　・・・　ＹＥＳ

スクロールを禁止　・・・　ＮＯ

スクロールをブラウザが判断

ＡＵＴＯ

　※ ＳＣＲＯＬＬＩＮＧを指定しない場合

初期設定でブラウザが判断します

　◆　左下画面のフレームのスクロールを禁止する設定を試してみました

　　　※　スクロール指定は、個々のフレームごとにスクロールさせるかさせないかを適用させる事ができます

＜ＦＲＡＭＥ　ＳＣＲＯＬＬＩＮＧ＝ ” ＹＥＳまたはＮＯまたはＡＵＴＯ” ＞

　　　　　　　　　★　左下画面のフレームのスクロールを禁止　★

※　このページの設定では、左画面はスクロールバーがなくなり、スクロールはできませんが

境界線をドラッグして、画面の大きさを変えることはできます

<frame src="" name="left" scrolling="no">

</frameset>

　◆　フレームのサイズ固定

フレーム（画面）の

サイズ変更を禁止

※　ＳＣＲＯＬＬＩＮＧでスクロールを禁止して、ＮＯＲＥＳＩＺＥを追加してサイズ変更を禁止すると、そのフレームの画面に表示される内容は、完全に固定されます

　◆　フレーム（画面）ごとのサイズ変更を禁止して、画面のサイズを固定

　　　　★　フレームの境界線にマウスポインタを当てて、ポインタの形が「 ←→ 」（両矢印の形）になった時にドラッグ

　　　　　　　すると、画面のサイズを変える事ができますが、これを禁止する指定です

＜ＦＲＡＭＥ　ＮＯＲＥＳＩＺＥ＞

　　　　　　　★　左下画面のフレームのサイズ変更を禁止　★

※　このページの設定では、左画面はスクロールできますが、境界線をドラッグして画面の大きさを変える事はできません

<frame src="" name="left" noresize>

</frameset>

　◆　画面のサイズ変更禁止

＆

スクロールも禁止

　◆　左画面のサイズ変更を禁止して、さらにスクロールも禁止してみました

　　　　　　　　　この場合、左の画面に表示される部分（内容）は、完全に固定されてしまいます

　　　　　　　　★　左下画面のサイズ変更禁止＆スクロール禁止　★

※　このページの設定では、左画面に表示される内容は、完全に固定されました

スクロールもできなくなり、境界線をドラッグして画面の大きさを変える事もできません

<frame src="" name="left" scrolling="no" noresize>

</frameset>

　◆　フレームの中に表示

するページの余白

属性：ＭＡＲＧＩＮＨＥＩＧＨＴ（上下）

属性：ＭＡＲＧＩＮＷＩＤＴＨ （左右）

　　余白サイズの属性値

ピクセル数

　◆　右下の画面の中に表示するページの、上下左右に余白（マージン）を指定してみました

　　＜ＦＲＡＭＥ　ＭＡＲＧＩＮＨＥＩＧＨＴ＝ ” ページ上下の余白サイズの属性値　ピクセル数”

　　ＭＡＲＧＩＮＷＩＤＴＨ＝ ” ページ左右の余白サイズの属性値　ピクセル数” ＞

　　　　　　　　★　右下画面の上下左右の余白を指定　★

このページの設定では、右下画面に表示されるページの上下（２００ピクセル）

左右（１００ピクセル）の余白を指定してみました　

※ ヤフーさんの広告の位置を、他のサンプルページと比較してもらうと分かります

<frame src="" name="right" marginheight="200" marginwidth="100">

</frameset>

　◆　インラインフレーム

ページの一部にフレームを

組み込む

　◆　ページの中の一部に、フレームを組み込む（インラインフレーム）

　　　この方法は、≪ 今日のお勉強・ＨＴＭＬ編～インラインフレームの設置 ≫で、詳しく説明しています

　　　　　　　　　　　　　　　上 ↑ のテキストをクリックして、ご覧くださいね♪

この表のＴＯＰへ

Ｈ Ｔ Ｍ Ｌを 覚 え た い ～ フレーム 編 （画面の分割）・ 実 践 ペ ー ジ

ＨＴＭＬを覚えたい～フレーム編（画面の分割）・実践ページ