◆
ホームページを作ってみよう ��
◆
|
Ｈ Ｔ Ｍ Ｌを 覚 え た い 〜 フレーム 編 （ 画面の分割 ） |
管理人が勉強しながら覚えるためのページです。。 もし良かったら参考にしてね♪ ◆
ホームページを作ってみよう ��
◆
◆ フレーム 編 ・ 実 践 ページ ◆ ・・・ サンプルページを作って分かりやすくしたつもりで〜す (^ー^ゞ
お 知 ら せ
・・・ 07/06/17 画面を分割するフレームに関するタグを実際に試してまとめた実践ページをＵＰで〜す♪
このページの一番下に、実践ページをインラインフレームで表示しています。。。覗いてみてね♪
★ ＨＴＭＬの本を参考にしています
|
（ ＦＲＡＭＥＳＥＴ ） |
タ グ の 記 述 （ 要 素 属 性 ＝ ” 属 性 値 ” ） |
|
◆ フレーム作成の要点
|
◎ 画面が分割されたページを作るためには、以下の２つの作業が必要です
１．元のウィンドウ（分割されてない画面）を分割するための設定
※ この画面の分割を指定する設定は、≪ ジオクリエーター ≫では記述できないので、≪アドバンストＨＴＭＬエディタ≫や ≪ メモ帳 ≫などの、テキストエディタで作ります
※ ＨＴＭＬの種類 ・・・ ＨＴＭＬのバージョン「４．０１」の中には、厳密なものからフレームが使えるものまで３つの種類が あるんですが、フレームが使える規制のゆるい種類のＨＴＭＬを使います
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
※ 上記のＨＴＭＬソースを、一番上に記述します （ ＜ｈｔｍｌ＞の上です ）
２．分割されたそれぞれのウィンドウに表示する内容の設定
※ それぞれの画面に表示するページは、「１．」で作ったページにＵＲＬを指定するだけなので、いつもの作り方で作れます
例えば、画面をタテに２つに分割する場合は、分割設定のページと、左と右のページの合計３つのページを作る必要があります
※ 管理人は、≪ジオクリエーター≫以外、市販やフリーのＨＰ作成ソフトを使った事がないので分かりませんが もし作成ソフトを使っていてそれにフレーム作成の機能があるんだったら、このページは参考までに読んでくださいね
|
|
◆ フレーム定義の基本
|
＜ ＦＲＡＭＥＳＥＴ ＣＯＬＳかＲＯＷＳ＝”画面全体に対しての比率（％）かピクセル数”＞ ＜ ＦＲＡＭＥ ＳＲＣ＝”その画面に表示するページのＵＲＬ” ＮＡＭＥ＝”その画面の任意の名前”＞ ＜ ／ ＦＲＡＭＥＳＥＴ ＞
＜ ＮＯＦＲＡＭＥ ＞ ＜ ＢＯＤＹ ＞ フレーム非対応ブラウザで表示させる内容 ＜ ／ＢＯＤＹ ＞ ＜ ／ＮＯＦＲＡＭＥ ＞
|
|
◆ タ テ に分割
属性 ・・・ ＣＯＬＳ 属性値 ・・・ ％ or ピクセル数 |
＜ ＦＲＡＭＥＳＥＴ ＣＯＬＳ ＝ ” 画面全体に対しての比率（％） または ピクセル数 ” ＞ ＜ ＦＲＡＭＥ ＳＲＣ ＝ ” その画面に表示するページのＵＲＬ ” ＮＡＭＥ ＝ ” その画面の任意の名前 ”＞ ＜ ／ ＦＲＡＭＥＳＥＴ ＞
※ 画面を分割するための属性値の比率やピクセル数は、「 ，」 （カンマ）で区切って記述 ※ ＜ ＦＲＡＭＥ ＞の指定は、画面が２つの場合はの２つ、３つの場合は３つというように、分割した画面の数だけ記述します ※ ＮＡＭＥは、例えば２つに分割した場合、左の画面の名前を「ＬＥＦＴ」、右の画面の名前を「ＲＩＧＨＴ」みたいな感じで その画面に表示するページのＵＲＬを指定する時に、自分のわかりやすい名前を付けておくといいかも・・・
|
|
◆ ヨ コ に分割
属性 ・・・ ＲＯＷＳ 属性値 ・・・ ％ or ピクセル数 |
＜ ＦＲＡＭＥＳＥＴ ＲＯＷＳ ＝ ” 画面全体に対しての比率（％） または ピクセル数 ” ＞ ＜ ＦＲＡＭＥ ＳＲＣ ＝ ” その画面に表示するページのＵＲＬ ” ＮＡＭＥ ＝ ” その画面の任意の名前 ”＞ ＜ ／ ＦＲＡＭＥＳＥＴ ＞
※ 画面を分割するための属性値の比率やピクセル数は、「 ，」 （カンマ）で区切って記述 ※ ＜ ＦＲＡＭＥ ＞の指定は、画面が２つの場合はの２つ、３つの場合は３つというように、分割した画面の数だけ記述します ※ ＮＡＭＥは、例えば２つに分割した場合、上の画面の名前を「ＵＥ」、下の画面の名前を「ＳＩＴＡ」みたいな感じで その画面に表示するページのＵＲＬを指定する時に、自分のわかりやすい名前を付けておくといいかも・・・
|
|
記 述 例
|
★ ウィンドウ全体をタテに２つに、３０％と７０％の比率を指定して分割する場合
＜ ＦＲＡＭＥＳＥＴ ＣＯＬＳ＝”３０％ ，７０％”＞ ＜ ＦＲＡＭＥ ＳＲＣ ＝ ” ｈｔｔｐ 〜 ” ＮＡＭＥ ＝ ” ＬＥＦＴ ”＞ ＜ ＦＲＡＭＥ ＳＲＣ ＝ ” ｈｔｔｐ 〜 ” ＮＡＭＥ ＝ ” ＲＩＧＨＴ ”＞ ＜ ／ ＦＲＡＭＥＳＥＴ ＞ ※ 分割する画面のサイズの比率やピクセル数の指定は、「 ，」（カンマ）で区切って記述します
★ 一方を固定して、他方を画面サイズに合わせて変わるように設定する場合
画面サイズに合わせて変わる方に、数値の代わりに「＊」（アステリスク）を入れます
＜ ＦＲＡＭＥＳＥＴ ＣＯＬＳ＝” ２００ ，＊” ＞ （この記述では、ピクセル数を「２００」で指定しています）
|
|
◆ フレームの境界線
|
◆ フレームの境界線（ボーダー）を、表示するか非表示にするかを指定する
◎ 画面全体のフレームに対して境界線を指定する場合 ＜ ＦＲＡＭＥＳＥＴ ＦＲＡＭＥＢＯＲＤＥＲ ＝ ” 境界線の、表示または非表示を指定する属性値 ” ＞
◎ 分割されたそれぞれ個々のフレームに対して境界線を指定する場合 ＜ ＦＲＡＭＥ ＦＲＡＭＥＢＯＲＤＥＲ ＝ ” 境界線の、表示または非表示を指定する属性値 ” ＞
★ 境界線の有無を指定する属性値
表示 ・・・ ＹＥＳ または １ （数字の１）
非表示 ・・・ ＮＯ または ０ （数字のゼロ）
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
◆ フレームの境界線の太さ （サイズ）
※ この指定ができるのは、＜ ＦＲＡＭＥＳＥＴ ＞タグだけ （画面全体のフレームに適用）
＜ ＦＲＡＭＥＳＥＴ ＢＯＲＤＥＲ ＝ ” 境界線の太さを指定する属性値 ピクセル数 ” ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
◆ フレームの境界線の色 （カラー）
※ 対象となるのは、「表示」指定されている境界線、太さが指定されている境界線です
◎ 画面全体のフレームに対して色を指定する場合 ＜ ＦＲＡＭＥＳＥＴ ＢＯＲＤＥＲＣＯＬＯＲ ＝ ” カラーネーム または ＃数値 ” ＞
◎ 分割されたそれぞれ個々のフレームに対して色を指定する場合 ＜ ＦＲＡＭＥ ＢＯＲＤＥＲＣＯＬＯＲ ＝ ” カラーネーム または ＃数値 ” ＞
|
|
◆ フレームのスクロール
|
◆ フレームごとのスクロールを、許可するか禁止するかの指定
スクロール ・・・ 画面の範囲よりページが長かったり幅が大きい場合に、画面の右端や 画面の下に付くバー（スクロールバー）で、ページを下や横にずらすこと
※ この設定は、個々のフレームごとに、スクロールさせるかさせないかを指定します
＜ ＦＲＡＭＥ ＳＣＲＯＬＬＩＮＧ ＝ ” ＹＥＳ または ＮＯ または ＡＵＴＯ” ＞
★ スクロールを指定する属性値
スクロールを許可 ・・・ ＹＥＳ （スクロールができるように指定）
スクロールを禁止 ・・・ ＮＯ （スクロールができないように指定）
スクロールをブラウザが判断 ・・・ ＡＵＴＯ （ＳＣＲＯＬＬＩＮＧを指定しない場合は、初期設定でブラウザが判断します）
|
|
◆ フレームのサイズ固定 フレーム（画面）の サイズ変更を禁止
|
◆ フレーム（画面）ごとのサイズ変更を禁止して、画面のサイズを固定
★ フレームの境界線にマウスポインタを当てて、ポインタの形が「 ←→ 」（両矢印の形）になった時にドラッグ すると、画面のサイズを変える事ができますが、これを禁止する指定です
＜ ＦＲＡＭＥ ＮＯＲＥＳＩＺＥ ＞
※ ＳＣＲＯＬＬＩＮＧでスクロールを禁止して、ＮＯＲＥＳＩＺＥを追加してサイズ変更を禁止すると そのフレームの画面に表示される内容は、完全に固定されます
|
|
◆ フレームの中に表示 するページの余白 |
◆ フレーム（画面）の中に表示するページの、余白（マージン）を指定
＜ ＦＲＡＭＥ ＭＡＲＧＩＮＨＥＩＧＨＴ ＝ ” ページ上下の余白サイズの属性値 ピクセル数” ＞
＜ ＦＲＡＭＥ ＭＡＲＧＩＮＷＩＤＴＨ ＝ ” ページ左右の余白サイズの属性値 ピクセル数” ＞ ※ 余白サイズの属性値は、ピクセル数で指定します
◎ 上下、左右の両方を指定する場合の記述
＜ ＦＲＡＭＥ ＭＡＲＧＩＮＨＥＩＧＨＴ ＝ ” ページ上下の余白サイズの属性値 ピクセル数” ＭＡＲＧＩＮＷＩＤＴＨ ＝ ” ページ左右の余白サイズの属性値 ピクセル数” ＞
|
|
◆ インラインフレーム ページの一部にフレームを 組み込む |
◆ ページの中の一部に、フレームを組み込む （インラインフレーム）
この方法は、≪ 今日のお勉強・ＨＴＭＬ編〜インラインフレームの設置 ≫で、詳しく説明しています
上 ↑ のテキストをクリックして、ご覧くださいね♪
|
アクセスしないで、ページをのぞいてみよぉ〜♪
インラインフレーム非対応ブラウザの方は、こちらをクリックして見てね♪ ⇒ ◆ フレーム 編 ・ 実 践 ページ ◆