超初心者でも大丈夫♪
フレームを作ってみよう

ブラウザに表示されるページ画面(ウィンドウ)を、いくつかのウィンドウ(フレーム)に分割することができます。その分割したフレームの中にHTMLファイルを指定します。 画面の左側にメニューがあって右側に内容が表示されるようなページで、左側のメニューの項目をクリックすると右側のウインドウ内にそれぞれの内容が表示されます。同じ画面でリンクメニューとリンク先のページを見れるので初心者には一度はトライしてみたい機能ですね。 画面を2つに分割すると右側と左側の各フレームに表示されるHTMLファイルそれぞれ1つずつと「フレームを割るだけ」の HTMLファイル1つ合計3つのHTMLファイルが必要となります。

フレームを使ったサンプル

サンプルを作りました。よろしければ、ソースを見て内容を変えて自分のWebページ作成の参考にしてください。

「目次」のナビゲーションバー
  1. 画面を2分割したい
  2. 画面分割その他
  3. フレームに表示されるファイルを指定したい
  4. 表示するフレームを指定したい
  5. 境界線の幅を変更したい
  6. 境界線の色を指定したい
  7. 境界線のないフレームを作りたい
  8. サイズ変更禁止,スクロール表示の有無を決めたい
  9. 余白を設定したい
  10. ウィンドウ内部に別のページを表示したい

小さな画像
フレームを使ってページを作る場合のメリットとデメリットを教えてください。

答え
見る側からするといつもメニューが表示されていて沢山あるページが把握できます。メニューの中にあるページをその画面ですぐに見ることができるメリットがあります。 デメリットは、分割に時間がかかったり、同時に複数のファイルを読むため表示に手間どります。あと表示する領域が狭いということです。また、フレームに表示された今見ているページをInternet Explorerの「お気に入り」に登録する場合、フレーム枠のURLが変わらないため、フレームのトップページの方に付いてしまい登録ができなかったりします。 今見ているページを登録する場合はページ上で右クリック→ショートカットメニュー→「お気に入りに追加」を行います。

「フレーム作成時の注意点」のナビゲーションバー

各ページにトップページへ戻るリンクを付けましょう。

検索サイト(Yahoo、Google、gooなど)から検索をしたとき検索結果にトップページが出ない時があります。フレーム内で表示されていたページが結果として独立して表示されることがあります。そのとき ページにトップページへのリンク指定がないと、そのページから次に行くことができません。 私は違うページも見たいので、そのページのブラウザのアドレスの最後尾を消しながら、トップページに辿り着くように工夫をする場合もあります。

各ページにトップページへ戻れるリンクを次のように指定します。
<a href="サイトのトップページのURL" target="top">HOME</a>
この指定でフレームのあるトップページに戻ることができます。

トップページを表示させる工夫
本文(body)が無いフレーム分割の情報だけが記述されているトップページは、検索ロボットからは収集されにくくなります。 そこで、 キーワード検索でトップページを表示させる工夫として検索されやすいように <noframes>タグでページ内容に合ったキーワードを含んだ文章を 記述します。

<noframes>
<body>
この部分に、サイトの内容に合った幾つかのキーワードを含んだ文章を記述します。
</body>
</noframes>

他サイトへのリンクは、読み込む画面を指定する target="_top"、target="_blank" を使いましょう。
他のWebページへのリンクが張ってある場合、特に注意が必要です。 そのリンク先のページを自分のフレーム(内容を表示している場所)に取り込まないことです。
  • target="_top"
    今のフレームを解除してその画面(いっぱい)に新しいページが表示されます。新しく表示された画面のメニューバーにある【戻る、矢印】をクリックすれば、元のフレーム画面に戻ります。

    例: <a href="リンク先のURL" target="_top">HTML教室 </a>

  • target="_blank"
    今のフレームのページはそのままで、新しいウィンドウ画面に表示されます。完全に独立したウィンドウで戻るボタンは灰色になります。デスクトップに画面が増えることになります。

    例: <a href="リンク先のURL" target="_blank">HTML教室 </a>

フレーム未対応のブラウザへの配慮をしましょう。
フレーム未対応のブラウザ(視覚障害者向けの音声ブラウザ、テキストブラウザ、フレームを表示しない設定にしている等)ではフレームが記述されたソースを読み込んでも何の表示もされません。 <noframe>タグを使ってメッセージを表示したり、別のHTMLファイル(代替ページ)を作りそのページへの誘導を指定して対応しましょう。<frameset>〜</frameset>タグ内に<noframes>〜</noframes>を入れます。フレーム未対応のブラウザには <noframes>〜</noframes> の間に記述した内容が表示され フレーム対応のブラウザではこの部分は無視され表示しません。
  • 例1:フレーム非対応のブラウザにメッセージを表示する方法 ( この方法はあまりにも不親切なメッセージと思いますが。)
    <noframes>
    <body>
    <p>
    このページを表示するには、フレームをサポートしているブラウザが必要です。
    </p>
    </body>
    </noframes>
  • 例2:フレーム非対応のブラウザにサイトの目次で誘導する方法
    <noframes>
    <body>
    <div align="center">
    <p> このページはフレームを使用しています。フレーム未対応の方は申し訳ありませんが、各リンクからお入りください。<br>
    <font color="red">戻る場合は全てブラウザの「戻るボタン」、または「戻る矢印」で戻って下さい。</font>
    </p>
    <ul>
    <li><a href="a.html">aのページへ</a></li>
    <li><a href="b.html">bのページへ</a></li>
    <li><a href="c.html">cのページへ</a></li>
    <li><a href="d.html">dのページへ</a></li>
    <li><a href="e.html">eのページへ</a></li>
    </ul>
    </body>
    </noframes>
  • 例3:フレーム非対応のブラウザに代替ページを誘導する方法
    <noframes>
    <body>
    <p>
    このページはフレームを使用しています。フレーム未対応の方は申し訳ありませんが、 <a href="aaa.html">こちら</a>からどうぞ。
    </p>
    </body>
    </noframes>

    代替ページ aaa.html は、フレーム未対応のための「目次」や「サイトマップ」にあたります。このページから各ページに直接リンクを張ります。通常各ページには target="_top" でフレームのあるトップページに戻るリンクが張っているので、「フレーム未対応の方は、戻る場合全てブラウザの「戻るボタン」、または「戻る矢印」で戻って下さい。」と一言記述しておきましょう。

Valid HTML 4.01 Transitional Valid CSS!

PageTop