HP楽しもう!ちぃおんぷどっとこむ
初心者ホームページ作成講座ちぃ助の部屋
|
フレームに関してはものすごく質問が多いため
ちとわかりやすく変えてみました。
タグは若干変わっていますが、順番変わったりしただけですので同じです。
よくある質問。自分が書いたメモ帳が出てこない。
これ
を例題にする場合、
左フレームは、左フレームの上で「右クリック→ソースの表示」
右フレームは、右フレームの上で「右クリック→ソースの表示」
トップページは、ブラウザのツールバーの「表示→ソース」
で、自分の書いたメモ帳が出てきます。
| フレームっ。フレームつけたいじょー。 |
まず、知識として頭に入れて欲しいこと！！
このページを例題にしてみます。
ファイル名とか、あなたの決めたものでもかまいません。
最初はちぃ助のマネすることで覚えていくものなので、例題のとおりにやってみよう。
左のページ(menu.html)と右のページ(top.html)とまとめるページ(index.html)が必要なのです。
まず、自分で好きなようにあなたが考えたmenu.htmlとtop.htmlを作ってみてください。
そして
↓これは、index.htmlに書くタグです。index.htmlを早速作りましょう。
| 【↓同じことをやってね】 | 【↓解説】 | |
|
<HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <FRAMESET cols="20%,*" frameborder="NO" border="0"> <FRAME src="menu.html"name="menu"> <FRAME src="top.html" name="main"> <NOFRAMES> <BODY> <P>このページをご覧いただくにはフレーム対応のブラウザが必要です。</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> |
左右にフレームを組むばあい
大事なこと。 まず、1番のオレンジの方に貼ったリンクを 1番のあだ名をmenu 2番のあだ名をmain にしてみました。 あだ名は自分がわかりやすいものに変えてもＯＫ |
上のタグの説明です。
<frameset cols="20%,*" ・・・
これは、左が全体の「20％」のサイズで表示すること。「*」はあまった％の値。
好きな数字にいろいろ書き換えてみて、どうなるか確認しながらやってみよう。
name="top"
このファイルのあだ名はこれにしますよ！というタグです。これ書かないと、
左側にリンクしたものが、そのまま左に表示されちゃう（ＴＴ）
なぜあだ名をつけるか！それはリンクを設定するためなのですっ。
だって普通にリンクしちゃったらフレーム無視して
そのままそのページに表示されちゃうもんね。
リンクの貼り方
| <a href="ファイル名.html" target="あだ名"> |
つまり例にすると、
1）右と左のフレームで、
2） 左にリンクを貼って、右に表示させたい場合は
3）右につけたあだ名を、「target="ここ"」に書くのです。
そうすると、左に貼ったリンクを押すと、 右に表示されるのです。
ちなみに全画面で表示させる場合は
「target=_top>」となります。
これは、トップページに戻るというリンクを貼る際便利です。
例題
<a href="index.html" target=_top>トップに戻る</a>
フレームが対応していないブラウザは表示されてません は別に書き換えてしまってもOK
検索エンジンに表示されるために、ホームページ紹介文を書く人もいます
パソコンの画面ってね、解像度800×600の人もいれば、解像度1024×768の人もいるのです。
今は 1024×768が主流かな？
あなたのパソコンのデスクトップの上で、右クリック→プロパティー→設定のタブをクリックすると、
あなたの解像度がわかります。
つまり、いろんなサイズの人がいるから、あなたのパソコンで綺麗に表示されていても、
他の人が見ると、改行だらけの文字になってる可能性があるので、
こまめな気遣いが必要です。
応用編だ！
上下にフレームを組むばあい
2をdown.html（あだ名はdown） とした場合。 2枚のページを作成してください。 |
<HTML> |
|
2をmenu.html 3をmain.html とした場合。 3枚のページを作成してください。 |
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET rows="100,*" frameborder="NO" border="0"> <FRAME src="up.html" name="あだ名" scrolling="NO"> <FRAMESET cols="100,*"> <FRAME src="menu.html" name="あだ名"> <FRAME src="main.html" name="あだ名"> </FRAMESET> <NOFRAMES> <BODY> <P>このページをご覧いただくにはフレーム対応のブラウザが必要です。</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> |
|
| 1番をスクロールしないようにする場合scrolling="NO" 1番をスクロールする場合scrolling="AUTO" どちらでもかまわない場合は、「scrolling="NO"」を削除 |
||
2をmenu.html 3をdown.html とした場合。 3枚のページを作成してください。 →これは4枚目のメモ帳に書いてね |
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET rows="*,100" frameborder="NO" border="0"> <FRAMESET cols="100,*" frameborder="NO" border="0"> <FRAME src="menu.html" name="あだ名"> <FRAME src="main.html" name="あだ名"> </FRAMESET> <FRAME src="down.html" name="あだ名" scrolling="AUTO"> <NOFRAMES> <BODY> <P>このページをご覧いただくにはフレーム対応のブラウザが必要です。</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> |
|
| 3番をスクロールしないようにする場合scrolling="NO" 3番をスクロールする場合scrolling="AUTO" どちらでもかまわない場合は、「scrolling="AUTO"」を削除 |
||
たとえば、ちぃ助のもういっこのページの
http://chionpu.lovely.to/
こやつは、真中だけフレームですが、フレームではありません( ｀∀´)
IFRAMEスタイルシートを使ってるのだ( ｀∀´)
ちぃ助は、HTML専門なので、スタイルシートは各専門サイトにGO!だ！！
でもＨＴＭＬだけは完全にマスターしてからね！
