Home > 2-6.フレームで分割

2. Edit Website

<< 戻る | 進む >>

2-6.フレームで分割

ここまでで、Webサイトに画像を載せる方法も分かりました。残るは、この「フレーム」機能 です。フレームは諸事情により厳密には非推奨とされていますが、やはりビギナーがサイトのメニューなどを作る時に 最も簡単な方法なので、敢えて紹介します。

必須項目ではありませんが、サイトに独立したメニューを表示したい方はチャレンジしてみてください！

フレーム機能とは？

いきなり「フレーム」と言われてもピンとこないと思いますが、昔のHTMLでは簡単に画面を分割する方法として よく使われてきた機能です。フレームを使うと、例えば左側のスペースに「メニュー」があり、 右側の大きなスペースに「文章(コンテンツ)」が表示される、という設計ができるようになります。

代表的なパターンは次の通り、タテ型分割とヨコ型分割があります。(タテヨコの組み合わせも出来ますが、実装がちょっと複雑になります)


さて、このようにフレーム分割を行うには、最低でも3つのHTMLファイルが必要になってきます。

論より証拠、これまで見てきた「楽しく貧乏!」のページを、さっそくフレームを用いて改良してみましょう。 この中で、index.htmlの役割がいままでと大きく変化している事に注目してください。

▼ファイル名：menu.html →

▼ファイル名：main.html →

▼ファイル名：index.html →


いままで1つで済んでいたファイルが、突然3つに増えて難しくなったと思われるかも知れませんが、 冷静によく見ると、そんな事はありません。まずは、これら3つのファイルをよく見比べてみて、 それぞれがどの働きを担っているのか、よくご覧になってください。

お気づきになったと思いますが、ここでフレーム機能が有効になっているのは、index.htmlを プレビューした時ですね。そうなんです、このindex.htmlが、他の2つのページをくっつける 「のり」の役割を果たすようになっています。

★ フレーム版index.htmlの解説
<frameset cols="20%,*" border=0 framespacing=0 frameborder=0> index.html最初の一行です。これは「これからフレーム機能を使うよ」という宣言になります。 cols="20%,*"という所で、「タテ型分割(cols)」「左スペースは画面の20%の広さ」 「右スペースはその残りの広さ(=80%)」というレイアウトを命令しています。
※ちなみにヨコ型分割の場合は、colsではなく rowsになります。
<frame src="menu.html" name="menu" scrolling="no"> <frame src="main.html" name="main"> ここでは、分割した画面の「左側スペース」と「右側スペース」にどのファイルを読みこませるか を記述しています。ルールとしては、「ヨコ分割の場合：左→右」「タテ分割の場合：上→下」 の順番に上から下へと記述していきます。従って、最初は左側のスペースにmenu.html を読込むこと、次の行では右側のスペースにmain.htmlを読込む事を指示しています。

ここで、それぞれの分割スペースにname属性がある事に注目してください。例えばname="main" というのは「これから右側のスペースはmainと呼びますよ」という宣言になります。このname属性は リンクをクリックした後、どのスペースに新ページを表示したいかという時に必ず必要になってきます ので、覚えておいてくださいね。(例えばリンクを記述するとき、<a href="XXX.html" target="main"> と記述すれば、必ず右側のスペースに表示されるようになります。詳しくは次をどうぞ)

★ フレーム版menu.htmlの解説

新しく作ったmenu.htmlは色を全体的に変更した他、文字の大きさを小さくしたりしましたが、一番大事なのは 次の一行です。
<a href="mylink.html" target="main">5.貧乏リンク集</a> 気付きましたか？今までのリンクと違い、target="main"と書いてありますね。これを書かないと、 リンクをクリックした時に、新しいページが左側の狭いスペース(menu)に表示されてしまいます。ここでは クリックしたら右側のスペース(main)に表示して欲しいので、このような記述が必須となります。

★ フレーム版main.htmlの解説

こちらmain.htmlには新しいテクニックは使われていません。ただ、お気づきになったと思いますが、 main.htmlは、私達がこれまでindex.htmlとして扱ってきた内容を殆どそのままコピーしただけです。 簡単ですね！


フレーム機能まとめ

いかがでしたか？最初は戸惑うかも知れませんが、使い始めるとたいへん便利なのが分かると思います。 フレーム機能は訪問者にとって使い勝手が良いですし、管理者である貴方のファイル整理の手間も 軽減してくれます。なにしろ今回の例ではメニューとコンテンツが左右別々に管理できるので、 突然メニューを変更したくなったとか、コンテンツを増やすことになったという時に 対応がしやすくなります。

この便利なフレーム、このように2分割のシンプルな形でも使えますし、上級者になると「入れ子構造」を 使って3分割、4分割、というワザも使えます。しかしそこまで行くとかなり奥が深いので、今は2分割 くらいでフレーム機能を楽しく満喫しましょう♪

>> 上にもどる
<< 戻る | 進む >>