Snow-Materia > フレームのソースの書き方


本文

前書き

世の中には フレームを使うな! って嫌がるひともいますが、 意味のあるフレームを使ってるならベンリだし、 使ってもいいときもあると思うのです。

ギャラリーでただ画像だけ置いて、ひとつひとつに target="_blank" ってやられるよりはずっといい。

でもちらほらこういう意見も。

  • ただ、フレームページのHTMLソースはちゃんと書こうぜ。 DOCTYPE宣言とか。
  • このページはフレーム対応ブラウザじゃないと見れません ってコメントだけのはダサい。
  • フレーム対応ブラウザじゃなければどこにもいけないって、 ・・・つまり見るなってこと?
  • 目次も書くか、せめてメニューへのリンクくらい貼っといてよ。

ってことで、フレームページのHTMLのソースの書き方を、ちょっと紹介してみます。 あくまで例です。 内容は適当に変えてください。

サンプルソース

HTML4.01 Frameset のサンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja"> 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>サイトのタイトル</title>
</head>
<frameset cols="20%, *" rows="*" title="このページはメニューページとメインページで構成されています。">
    <frame name="menu" src="menu.html" title="メニューページ" frameborder="1" scrolling="auto">
    <frame name="main" src="main.html" title="メインページ" frameborder="1" scrolling="auto">
    <noframes>
        <body>
            <h1>サイトのタイトル</h1>
            <ul>
                <li><a href="menu.html">メニューページ</a></li>
                <li><a href="main.html">メインページ</a></li>
            </ul>
            <p>
                コンテンツの各ページへは、上記のリンクからご覧ください。
            </p>
            <p class="attention">
                このサイトではフレームが使用されているため、
                各ページが正しくリンクされていない場合は、
                お使いのブラウザではうまく見られないことがあるかもしれません。
                申し訳ありませんが、ご了承ください。
            </p>
        </body>
    </noframes>
</frameset>
</html>

XHTML1.0 Frameset のサンプルソース

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>Site-Title</title>
</head>
<frameset cols="20%, *" rows="*" title="this frames the menu-page and the main-page.">
    <frame name="menu" id="menu" src="menu.html" title="Menu-Page" frameborder="1" scrolling="auto" />
    <frame name="main" id="main" src="main.html" title="Main-Page" frameborder="1" scrolling="auto" />
    <noframes>
        <body>
            <h1>Site-Title</h1>
            <ul>
                <li><a href="main.html">Main-Contents</a></li>
                <li><a href="about/">About</a></li>
                <li><a href="gallery/">Gallery</a></li>
                <li><a href="text/">Text</a></li>
                <li><a href="diary/">Diary</a></li>
                <li><a href="link/">Link</a></li>
            </ul>
        </body>
    </noframes>
</frameset>
</html>

後書き

できれば、フレームが使えないひと(使いたくないひと) のためのページもあったりするといいんですけど、 (no_frame.htmlとか) さすがにそこまでするひとは多くはいるまい。(笑)
でも、メニューページのリンクのリストを <noframes> 内にコピペするだけでも、 かなり親切だと思うのです。

ちなみに、以下のことを注意。


ページ情報
関連
目次
公開
2005.01.10