2008 . 04 « 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 » 2008 . 06

フレーム応用2

応用編は大体わかってきたでしょうか？



ここからはさらにカッコイイHPフレームを作ってみましょう



まずはサンプルを見てください







「ここをクリック」というところを押したらどうなりましたか？


なんと！右側だけが変化しました！


これは右側フレームに名前が付いていて「ココをクリックされたら右側に表示しなさいよ〜」


と命令をするタグが組み込んであるからなんです

一見難しそうに感じますがコレがまた実に簡単！




<HTML> <HEAD>
<TITLE>ここにタイトル</TITLE> </HEAD>
<FRAMESET cols="左側%,右側%" frameBorder=0> <FRAME src="左側のファイル名" frameborder="no">
<FRAME src="右側のファイル名" name="フレームの名前" frameborder="no"> <NOFRAMES>
<BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P>
</BODY> </NOFRAMES>
</FRAMESET> </HTML>




このフレームの名前というところに注目してください

例えばこのフレームの名前を"migi"だとしましょう

そのときは左側のフレームで表示したいURLに

<a href="リンクしたいURL" target="migi"></a>
　

としてください






フレームの名前＝ターゲットの名前ですので　�Ｊ�割以上するときは

ターゲットを間違えないようにしましょう






また、ターゲットを指定しないままにするとこんな目にあいます



ｶﾞｶﾞｶﾞ━Σ(llﾟωﾟ(llﾟдﾟll)ﾟ∀ﾟll)━ﾝ!!!
2008/05/21 |  フレーム  | コメント : 0  | トラックバック : 0    

フレーム応用1

だいたいの分割の方法はわかったでしょうか？

ではここから応用編行きたいと思います

テキストエリアでコピーしたものをそのまま使い

ファイルを作ってももちろん例題のような色は付いていません





そこで一つづつやってみましょう。

例に�∧�割のもので説明します（一番需要が多いので）

まずサンプルを見てください
これは　z_fm_00.html　というファイルに

右z_fm_02.html

左z_fm_03.htmlというファイル計��つを使っています。

判りやすいよう　右に1番　左に2番と表示してあります

ただ、このままだとフレームの真ん中の線をドラッグすると自由自在に左右に動きます

せっかく作ったのに見栄えが悪くなるのも悲しいのでこの境界線を動かないように


設定してみましょう。



コピーしたファイルを今一度見てください

<HTML> <HEAD>
<TITLE>ここにタイトル</TITLE> </HEAD>
<FRAMESET cols="左側%,右側%" border=1 borderColor=gray frameBorder=1 frameSpacing=1> <FRAME src="左側のファイル名" NORESIZE frameborder="no">
<FRAME src="右側のファイル名" name="フレームの名前" NORESIZE frameborder="no"> <NOFRAMES>
<BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P>
</BODY> </NOFRAMES>
</FRAMESET> </HTML>



NORESIZEと入れるだけで動かなくなります


サンプルページ



（)´д`(）ｹﾞｯｿﾘ・・・ できれば境界線も要りません！




そんな場合には



<HTML> <HEAD>
<TITLE>ここにタイトル</TITLE> </HEAD>
<FRAMESET cols="左側%,右側%" frameBorder=0> <FRAME src="左側のファイル名" frameborder="no">
<FRAME src="右側のファイル名" name="フレームの名前" frameborder="no"> <NOFRAMES>
<BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P>
</BODY> </NOFRAMES>
</FRAMESET> </HTML>


frameBorder=0とするだけでOKです




サンプルページ 無くなってるでしょ♪



ちなみに線は消さずに線の色だけを変えたいときは

<HTML> <HEAD>
<TITLE>ここにタイトル</TITLE> </HEAD>
<FRAMESET cols="左側%,右側%" border=1 borderColor=ここに変えたい色を指定 frameBorder=1 frameSpacing=1> <FRAME src="左側のファイル名" NORESIZE frameborder="no">
<FRAME src="右側のファイル名" name="フレームの名前" NORESIZE frameborder="no"> <NOFRAMES>
<BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P>
</BODY> </NOFRAMES>
</FRAMESET> </HTML>

2008/05/21 |  フレーム  | コメント : 0  | トラックバック : 0    

5分割

フレーム5つ分け×





うわぁ〜！

誰が使うんだこりゃ





っつわけでタグ↓。





ファイルだけでも6個必要です（汗）

<HTML> <HEAD>
<TITLE></TITLE> </HEAD>
<FRAMESET rows="15%,85%"> <FRAME src="上のフレームのファイルアドレス">
<FRAMESET rows="86%,14%"> <FRAMESET cols="10%,90%">
<FRAME src="真ん中左のファイルアドレス"> <FRAMESET cols="90%,10%">
<FRAME src="真ん中中央のファイルアドレス"> <FRAME src="真ん中右のファイルアドレス">
</FRAMESET> </FRAMESET>
<FRAME src="下のフレームのファイルアドレス"> </FRAMESET>
</FRAMESET> </HTML>




2008/05/21 |  フレーム  | コメント : 0  | トラックバック : 0    

4分割

フレーム四つ分け×





うわぁ〜！

めんどくさい！めんどくさいよこれは！



3つ割りや2つ割りと同じです。














中身はこんな感じ↓

土台のほかに4つのファイルが必要


<HTML> <HEAD>
<TITLE></TITLE> </HEAD>
<FRAMESET rows="100,*,100"> <FRAME src="上のファイルアドレス">
<FRAMESET cols="100,*"> <FRAME src="真ん中左側のファイルアドレス">
<FRAME src="真ん中右側のファイルアドレス"> </FRAMESET>
<FRAME src="下のファイルアドレス"> </FRAMESET>
</HTML>
2008/05/21 |  フレーム  | コメント : 0  | トラックバック : 0    

3分割

今度は3つに分けよう！







2個分けと同じ原理です。

名前を付けて上げる数を一個増やせばいいのです。






タグは↓。





↓中身はこんな感じ！

土台のほかに3つのファイルが必要だよ


<HTML> <HEAD>
<TITLE></TITLE> </HEAD>
<FRAMESET cols="100,*"> <FRAME src="左側のファイルアドレス">
<FRAMESET rows="100,*"> <FRAME src="右側上のファイルアドレス">
<FRAME src="右側下のファイルアドレス"> </FRAMESET>
</FRAMESET> </HTML>

2008/05/21 |  フレーム  | コメント : 0  | トラックバック : 0    

フレーム横割り

今度は横割りの説明。



縦割り読んでいる人で、すでにわかったって人はもう大丈夫でしょう。



縦割りだって横割りだって変わりません。



横割りも縦割りの説明で言った通り3つのファイルを使います











これですこれ。（笑



縦割りを横向きみたいにしただけ！（笑











これをタグにするとこれ↓





上を広くしたいときは上を70％とかくらいにすると頭でっかちなフレームになります
2008/05/21 |  フレーム  | コメント : 0  | トラックバック : 0    

フレーム基本

結構難問とされているフレーム。


フレーム使われているだけでなんだかＨＰがかっこよく見えるものです

しかしどうやってこのパソコン上でそのように作ればいいか・・

私も前まで全然分からなかったのです。



それでもやっていくうちに理解してきました。

それなので、ここではフレームの説明をします。



フレームは、必ず三つのファイルを使います。

縦に分けるときも、横に分けるときも。

�‥畋罎離侫．ぅ�

�∈犬離侫．ぅ�

�１Δ離侫．ぅ�





3個ぐらい分けるときは4個ファイルを使うし、

4個分けのフレームを作りたいときは5個ファイルを使います。

今の説明で分かった人はほとんど居ないと思います。（爆



なので。それを画像で説明します。まず、縦割りで2分割。



青と黄色と赤で示しています。



青＝土台。ここが心臓ですね　大事な部分です



黄色＝左のファイル。例としてはメニューを書いて、赤の方に表示させます。




赤＝右のファイル。黄色ファイル（左のファイル）からリンクされるとこっちに移る。





説明で言うとこんな感じ。



実際にはこんな感じ



これをタグにするとこれ↓。









<HTML> <HEAD>
<TITLE>ここにタイトル（タイトルを入れます）</TITLE> </HEAD>
<FRAMESET cols="左側%,右側%←足して100％になるようにしてください
" border=1 borderColor=gray frameBorder=1 frameSpacing=1
> <FRAME src="左側のファイル名(〜.html)　　" frameborder="no">
<FRAME src="右側のファイル名(〜.html)　" name="フレームの名前(表示させるときに必要です)　　" frameborder="no"> <NOFRAMES>
<BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P>
</BODY> </NOFRAMES>
</FRAMESET> </HTML>




例は右が20％左が80％です


2008/05/21 |  フレーム  | コメント : 0  | トラックバック : 0    
| ホーム |