FRAMESET - みる会図書館


検索対象: HTMLデザイン辞典
13件見つかりました。

1. HTMLデザイン辞典

し A 0 U T Windows e フレームを定義する 2.0 以上 3.0 以 2.0 以上 住 3.0 以上 フレームは、プラウザのウインドウをいくつもの枠 ( = フレーム ) に分割 し、それぞれに別の HTML を表示できるようにする機能です。また、各フ レームごとに内容を入れ替えることができるので、ページをより構造的な ものにし、アイデア次第でページの使い勝手の面からもデザイン的な面か らも様々な効果的な使い方を可能にします。 ページをフレーム構造にするにはまず、フレーム構造を定義するための HTML ファイルと、その他にそれぞれのフレーム内に表示するⅡ TML ファ イルをフレームの数だけ用意します。もちろんひとつの HTML ファイルを 複数のフレームに表示することも可能です。 下記の例では画面を左右に 50 % すっ 2 つのフレームに分割しています。そ して 2 つの HTML 、 left. html と right. html をそれぞれのフレームに表示しま す。このフレーム構造は以下の 3 つのファイルから構成されます。 index. html: フレームを定義したファイル、定義を行うだけで画面には 表示されません left. html : ⅲ dex. html で指定している左側のフレームに表示するファイル right. html : index. html で指定している左側のフレームに表示するファイル index. html では、ますく FRAMESET>—</FRAMESET> タグによってフ レーム分割方法を定義しています。そして <FRAMESET>—</FRAMESET> の中ではく FRAME > タグを使って個々のフレームに関する指定を行います。 また </FRAMESET> の後に続く <NOFRAMES>—</NOFRAMES> では フレーム未対応のプラウザで表示する内容を記述しておくとその内容が表 示されます。こでは META タグを使ってフレーム未対応プラウザ用のペ ージに移動するようにしています。 Netscape Comれtuれ icatO ′ Mic ′ 0S0 lntemet ExpIorer Macintosh 3-1 1 -1 フレームの基本記述法 レイアウト 109 HTML DESIGNS

2. HTMLデザイン辞典

<FRAMESET> 属性一覧 ウインドウを縦に分割 ROWS ウインドウを横に分割 COLS フレームの境界線の表示 / 非表示 FRAMEBORDER フレームの境界線の太さを指定 (Netscape Navigator 用 ) BORDER フレームの境界線の太さを指定 (lnternetExplorerM) FRAMESPACING フレームの境界線の色を指定 BORDERCOLOR また <FRAMESET>—</FRAMESET> タグの中で個々のフレームを設定 するためのく FRAME > タグの属性は以下の通りです。 SRC 属性によってフ レームの中に表示するⅡ TML ファイルを指定します。 NAME 属性はリンク 等によりフレームの内容を入れ替えるときに、入れ替えるフレームを名前 で指定するために必要になるので、任意の名前を記述しておきましよう。 レイアウト <FRAME> 属性一覧 フレーム内に表示する HTML の URL を指定 SRC フレーム名 NAME フレームの境界線を固定 NORESIZE スクロールバーの表示 / 非表示を指定 SCROLLING フレーム内のマージン ( 左右 ) を指定 MARGINWIDTH フレーム内のマージン ( 上下 ) を指定 MARGINHEIGHT 112 HTML DESIGNS

3. HTMLデザイン辞典

SOURCE index. html く H T M L > く H E A D > く T I T L E > Frame く / T I T L E > く / H E A D > <FRAMESET ROWS="50,*,50" BORDER=O FRAMEBORDER=O F R AM E S P A C I N G =O > <FRAME SRC="header. html" NAME="header" SCROLLING=NO> <FRAMESET COLS = " 80 , ☆ , 80 " BORDER=O FRAMEBORDER=O F R A M E S P A C I N G =0 > <FRAME SRC="side. html" NAME="side1 " S C R 0 L L I N G =NO > <FRAME SRC="body. html" NAME= <FRAME SRC="side. html" NAME="side2" S C R 0 L L I N G =NO 》 </FRAMESET> レイアウト NAM E="footer" S C R 0 L L I N G =NO > <FRAME SRC="footer. html" </FRAMESET> く N 0 F R A M E S > CONTENT="5;URL=noframe. html' く M E T A H T T P ー E Q U I V = " refresh " く / N 0 F R A M E S > く / H T M L > header. html く H T M L > く H E A D > く T I T L E > Header く / T I T L E > く / H E A D > く BODY BGCOLOR="#FFCCOO"> C E L L P A D D I N G = 0 く T A B L E B 0 R D E R = 0 H E I G H T = 100 % W I D T H = 100 % C E L L S P A C I N G = 0 > く T R > く T D > く F 0 N T F A C E = " Verdana " > header. html< / F 0 N T > く / T D > く / T R > く / T A B L E > く / B 0 D Y > HTML DESIGNS 122

4. HTMLデザイン辞典

ロ ? ′ : ( ″ら : ヨ 0 聞・ PLUS - comic . トル TVe 物ⅵ・ら整 ; ゾな自 9 lconsPLUSLV) ′ 0 。、 , A - ′番 に 0 れ SPLUS 國「 h い p ノ / WW 物 . れ国 us 工 om W 引 00 を一 0 0 , に P しリ 5 - れ 0m を引こörr 朝 ( 000k , 3 いい . ! Ⅵは 0 けを「 000 ( u u 「を ! こ 0 5 ! 00 をこ 0r3 を当 0 リ「 0 日 ! 、一 0 既 He 「を当 Ou ⅱ朝日を一し 00 ら . 第 ! 00 い : き rn de レ t00 いい第 50 fonts rp ロ 0 ー れ五い MGRAPHIX WE 則曲に Sp 価 13a DigitaI Cameras' 物い 0 「 P し 55 ◇ IconsPLUS http://www.iconsplus.com/ "IconsPLUS" では上部フレームにタブ風のメニューを配置した上で、真中のメインフレー ムとテザイン的にうまく一体化させています。また一番下のフレームは広告表示専用とし て使用しています。 レイアウト ■フローティング型 これはウインドウの中に見かけ上、フレームが浮いているように見せる手 法です。まわりのフレームはそれを縁取る額縁のように見えます。構造と してはく F R A M E S E T > タグの R O W S 属性と C O L S 属性を使って く FRAMESET > を入れ子状に組み合わせることによって実現しています。 作例では上下に 3 分割したフレームのうち、真中のフレームをさらに左右 に 3 分割し、計 5 つのフレームを構成しています。 なお lnternet Explorer では、フローティングフレームを定義するためのタ グ <IFRAME) を実装していますが、 Netscape Navigator が対応していない ため、あまり普及しているとはいえません。そのため実際はこのような COLS と ROWS を組み合わせて実現する方法が安全といえます。 フレームの定義方法としては、ま $<FRAMESET ROWS= ゝによって ウインドウを上下に 3 分割し、 <FRAME> タグでそれぞれのフレームを定 義するのですが、真中のフレームの定義するとき <FRAME> タグではなく、 <FRAMESET COLS=' ~ " > を使ってフレームをさらに左右に 3 分割しま す。これにより上下 3 分割のフレームのひとつに左右 3 分割のフレームが 入れ子状態になります。 121 HTML DESIGNS

5. HTMLデザイン辞典

A C T 10 N 複数のフレームを入れ 替える 2.0 以上 3.0 以 2.0 以上 0 3.0 以上 Macintosh フレーム構造の上でリンクを作成するとき、く A > タグの TARGET="—" 属 性ではいちどにひとつのフレームしか書き換えることができませんが、 JavaScript を使えば複数のフレームを同時に書き換えることが可能です。 下記の例ではメニュー用のフレーム " frame3 " から項目を選択すると、タイ トルを表示している見出し用のフレーム "framel" と本文を表示しているフ レーム " frame2 ”が同時に書き換えられます。 Windows e M ic ′ 050ft lnternet ExpIorer Netscape Comれtuれ icatO ′ アクション ■フレーム定義 3 段積みのフレームとして、見出し用の " framel " 、本文用の " frame2 ' 、 メ ニュー用の " frame3 " を定義しています。 S 0 U C E く H T M L > く H E A D > く TITLE>MultipleFrame く /TITLE> く / H E A D > <FRAMESET ROWS = ” 48 ′☆′ 30 " BORDER="O" FRAMEBORDER="O" F RAM E S P A C I N G = “ 0 " > <FRAME SRC="header1. html" NAME="frame1" SCROLLING="no"> <FRAME SRC="body1. shtml" NAME="frame2"> <FRAME SRC="menu. html" NAME="frame3" SCROLLING="no"> く N 0 F R AM E S > く BODY > F 日 AME 対応のブラウザで御覧ください。く /BODY> </NOFRAMES> </FRAMESET> く / H T M L > 202 HTML DESIGNS

6. HTMLデザイン辞典

MARGINHEIGHT . FRAMESET.. ROWS . COLS . … 112 , 113 , 121 , 268 FRAMEBORDER . BORDER. FRAMESPACING BORDERCOLOR . H 日 . NOSHADE . SIZE . WIDTH ー M G . SRC. WIDTH HEIGHT.. HSPACE VSPACE.. BORDER . INPUT.. NAM E .. TYPE .. VALUE SIZE . SRC.. .. 112 , 270 … 109 , 112 , 268 ... 112 , 117 , 268 … 111 , 112 , 268 ... 112 , 268 .. 111 , 112 , 268 .. 111 , 112 , 268 ... 250 .. 258 … 106 , 258 .. 260 … 260 ... 220 , 221 , 258 .. 258 .. 46 , 47 , 258 .. 46 , 47 , 258 .. 46 , 48 , 258 .. 46 , 48 , 258 .. 258 .. 1 04 , 266 … 266 .. 266 .. 266 … 266 .. 1 04 凵 N K . REL .. TYPE .. HREF . SRC.. MAP.. NAME . META.. NAME . CONTENT . HTTP-EQUIV MULT ℃ OL . NOFRAMES . 0 OPTION. SELECTED . SCRIPT . LANGUAGE . SELECT . NAME . SIZE . ... 136 , 274 .. 136 , 274 … 136 , 274 .. 136 , 274 … 167 .. 1 72 , 175 , 178 , 256 .. 1 72 , 178 , 256 .. 236 ~ 239 , 241 , 248 .. 236 ~ 239 , 248 .. 236 ~ 239 , 241 , 248 .. 110 , 241 , 248 .. 106 , 260 .. 109 , 270 .. 209 , 266 .. 266 … 158 , 180 … 158 , 180 .. 210 , 266 .. 210 , 266 … 266 HTML DESIGNS

7. HTMLデザイン辞典

Macintosh Windows 旧 4 旧 4.5 ー NN2 NN3 NN4 旧 5 ー NN2 NN3 NN4 旧 3 旧 3 旧 4 く FORM > ~ く / FO 日 M > 内に記述し、複数行入力可能 なフィールドを作る 〇一〇〇〇 〇〇 〇一〇〇 高さ ( 行数 ) を指定する 〇〇 〇一〇 〇〇〇一〇〇〇 〇 〇 横幅 ( 半角文字数 ) を指定する 〇〇 〇 : 〇〇 識別の為のフィールド名を付ける 〇〇 〇〇〇一〇〇〇 フィールド内の改行を制御する 〇〇〇一〇 ・自動改行 ( 送信時に改行コードを含める ) 〇一〇 〇 〇 〇〇 〇〇 〇一〇 〇〇〇一〇〇〇 ・自動改行 ( 送信時に改行コードを含めない ) 〇 〇 〇〇 〇一〇 0 〇 〇〇 ・改行なし 〇〇〇一〇〇〇 〇一〇 〇 〇 〇〇 ファイルを検索する 〇〇〇一〇〇〇 〇一〇 〇一〇 〇 入力フィールドにあらかじめ表示するテキストを 〇〇 〇〇 〇〇 設定する 1 l}•-ä-l タグ対応表 フレーム定義の開始と終了 〇一〇 〇〇〇一〇〇〇 〇 ウインドウを縦に分割する ()= ピクセルまたは % ) 〇〇 〇一〇 〇 〇 ウインドウを横に分割する ()= ピクセルまたは % ) 〇〇〇一〇〇〇 〇〇 フレームの境界線の太さを指定する ()= ピクセル ) 〇 〇 X 〇 〇 X 〇 〇一 X 〇 〇 フレームの境界線の太さを指定する ()= ピクセル ) X 〇〇 〇〇 〇一 X X X X 〇一 フレームの境界線の表示 / 非表示を指定する 〇 : X X 〇 〇 〇〇 〇〇 〇〇 フレームの境界線の色を指定する X 〇 〇 〇 X 〇 〇一 X 〇 〇 く FRAMESET> く /FRAMESET> 内に記述し、各フレ ームを定義する フレーム内に表示する HTML の U 日 L を指定する フレームの境界線の表示 / 非表示を指定する フレーム名を付ける フレームのサイズ変更を禁止する スクロールバーの表示 / 非表示を指定する フレーム内のマージン ( 左右 ) を指定する ()= ピ クセル ) 〇一〇〇 〇〇〇一〇〇〇 〇〇 〇 〇 〇〇〇一 X 〇〇 〇〇 0 〇一〇 〇一〇〇 〇〇 〇〇 〇〇 〇一〇 〇〇〇一〇〇〇 〇〇 〇 〇 〇 : 0 〇 〇〇〇一〇〇〇 〇〇 〇〇 〇一〇〇 〇〇〇一〇〇〇 269 HTML DESIGNS

8. HTMLデザイン辞典

S 0 U R C E index. html く H T M L > く H E A D > く T I T L E > Frame く / T I T L E > く / H E A D > <FRAMESET COLS="50%,50%" FRAMESPACING=O> <FRAME SRC="left.html" NAME="menu"> <FRAME SRC="right. html" NAME="b0dy"> </FRAMESET> <NOFRAMES> <META HTTP—EQUIV="refresh' CONTENT="5; URL=noframe. html"> </NOFRAMES> く / H T M L > F R AM E B 0 R D E R =O B 0 R D E R =O 03 レイアウト left.html く H T M L > く H E A D > く T I T L E > Left く / T I T L E > く / H E A D > く B 0 D Y B G C 0 L 0 R = " #FFCCOO " > く T A B L E B 0 R D E R = 0 H E I G H T = 100 % W I D T H = 100 % c E L L p A D D 1 N G = 0 C E L L S P A C I N G = 0 > く T R > く T D > く F 0 N T F A C E = " Verdana " > Left. html< / F 0 N T > く / T D > く / T R > く / T A B L E > く / B 0 D Y > く / H T M L > right. html く H T M L > く H E A D > く T I T L E >Right く / T I T L E > く / H E A D > く BODY BGCOLOR="#FFFFFF"> く T A B L E B 0 R D E R = 0 H E I G H T = 100 % W I D T H = 100 % C E L L P A D D I N G = 0 C E L L S P A C I N G = 0 > 110 HTML DES 1 GNS

9. HTMLデザイン辞典

く T R > く TD> く FONT FACE="Verdana">right. htmI</FONT> く /TD> く / T R > く / T A B L E > く / B 0 D Y > く / H T M L > DISPLAV ーロ日 ロ Frame 当 朝 0 ロ ロ 0 0 0 初期設定 自飾、ス、物 拡丈 小 プリント メ - ル 更新 / 民るむ 中止 9 おに入リ 03 ー レイアウト right. html 厄代 . htm ー ロ - カルマシンソ - ン く FRAMESET > タグでフレーム構造を定義する際の属性には以下のような ものがあります。ます FRAMEBORDER によってフレームの境界線の表 示 / 非表示を決めましよう。必要であれば「 Yes 」または「 1 」、不要であ れば「 no 」または「 0 」を指定します。境界線を非表示にした場合でも、 まれに表示されてしまうことがあるため境界線の幅を設定する BORDER や F R A M E S P A C I N G 属性も 0 に設定するようにしてください 0 BORDERCOLOR ではフレームの境界線を表示しているときその色を RGB 値で指定することができます。 111 HTML DESI GNS

10. HTMLデザイン辞典

ーヘッタ十ボディ十フッタ型 これはウインドウを上下に 3 段のフレームに分割する例です。一般的には 一番上のフレームにサイトのタイトルやサイト名口ゴ、真中のフレームに コンテンツ、一番下のフレームにはナビゲーションメニューやコピーライ トを表記する、といったような構造によく用いられています。特にサイト 名などのロゴはどのページに移動しても決まって一番上に表示することが 多いので、このようにヘッダ専用の別フレームを用意しておけば、コンテ ンツ用のフレームの入れ替えやスクロールに関わらす常にロゴを表示させ ておくことができます。またメニューについても、常にフッタ部に表示さ せておくことで、いつでも他のページに移動することができるようになり ます。 フレームを上下に分割するためには <FRAMESET ROWS= ~ " > 属性を用 います。この場合、上と下フレームはピクセルで指定することによって高 さを固定し、真中のフレームはユーザー側のウインドウサイズの合わせて 伸縮するよう、数値を指定せず「 * 」 ( アスタリスク ) を記述しておきます。 またヘッダやフッタ部にスクロールバーが表示されてしまわないよう SCROLLING 属性を no に設定しています。これは SCROLLING 属性のデフ ォルト値が通常 Auto になっているため、もしフレーム内に表示する内容が フレームの大きさを超えた場合、スクロールバーが表示されてしまうのを 防ぐためです。 no にしておけば内容の大きさに関わらす、スクロールバー が表示されることはありません。 みレイアウト S 0 U 員 C E index. html く H T M L > く H E A D > く T I T L E > Frame く / T I T L E > く / H E A D > く F R A M E S E T R 0 W S = " 100 , ☆ , 1 00 " B 0 R D E R = 0 F R A M E B 0 R D E R = 0 F R A M E S P A C I N G = 0 > <FRAME SRC="header. html" NAME="header" SCROLLING=NO> <FRAME SRC="body. html" NAME="bOdy"> HTML DESIGNS