制作者の活動(PR)。

アイドル女優・堀北真希ちゃんにうさぎの耳を付けたら可愛いだろうなと思って作った制作者のオリジナルキャラクタ
主な作品

創作キャラクタのイラスト例とアニメーション動画

フレームについて。

ウェブサイトでしばしば使われるフレームですが、これは問題点が多いため、解説を忌避しておりました。

フレームについて・目次。

フレームとは。

ウェブページでは、しばしば画面の左側にメニューと右側のメイン画面に分割したページを見掛けます。

その多くはフレームと呼ばれる手法を用いて実現しています。

フレームとは、画面を分割する機能の事です。分割された画面にはそれぞれにリソースが表示されます。

例えば、左フレームにメニューを表示させたウェブの場合、閲覧者がそのメニュー頁から見たい項目を選択する度に右側のメインのフレームにコンテンツを表示させる事になります。

この方法だと左フレーム用のメニューを作っておくだけで、メインフレームに表示させるべきコンテンツにはナヴィゲーションの為のリンクを置く必要が無くなるという事で、好んで使われると言う訳です。

実際にフレームを使うには。

実際にフレームを使うには、以下のような手順を踏みます。

フレームセットを用意する。

まず、フレームの枠組みとなる文書(フレームセット文書)を用意します。

この文書はフレームセット専用の文書型であるXHTML 1.0 フレームセットを用いたものとなります。

具体的には以下の通りとなります。

<?xml version="1.0" encoding="文字コード"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html lang="ja" xml:lang="ja">
<head>
        (<head>要素の内容は通常のHTML文書と変わりません。)
    </head>

<!-- フレームセット。 -->
<frameset cols="左フレームの幅,*">
    <frame id="左フレームに付ける名前" name="左フレームに付ける名前" title="左フレームの説明" src="左フレームに表示させるメニュー文書のURI" />
    <frame id="右フレームに付ける名前" name="右フレームに付ける名前" title="右フレームの説明" src="右フレームに表示させる表紙文書のURI" />

    <!-- フレーム非対応向け。 -->
    <noframes>
        <body>
            <h1>サイトの名称</h1>
                (フレーム非サポートブラウザへのメニュー画面かメニューへのリンク)
            </body>
        </noframes>
    </frameset>
</html>

XHTML 1.0 フレームセットは通常のHTML文書(XHTML 1.0 ストリクトなど)とは文書型宣言が異なります。

  1. <frameset>要素で、フレームの分け方を指定します。横分割の場合はcols属性で左から順番に幅を指定します。残りの幅を割り当てる場合には幅の値として「*」を指定します。尚、縦分割の場合はrows属性で上から順に高さを指定します。
  2. 各フレームの本体となるのが<frame>要素です。親要素の<frameset>要素でcols属性を指定して横分割とした場合は左から順に記述します。rows属性で縦分割を指定した場合は上から順となります。id属性及びname属性にてフレームに名前を付けてやり、src属性で一番始めに表示させるリソースのURIを指定します。

  3. <noframes>要素はフレーム機能を実装していないブラウザ向けのページの本体です。この中に<body>要素を入れてやります。きちんと書いた表紙ページをこの中に入れるのが望ましいのですが、フレームを用いていないメニュー画面へのリンクで済ませると言う方法もあります。

フレームに組み込まれる文書を用意する。

続いて、フレームに組み込まれる文書を用意します。

文書型は仕様上は何でもいいのですが、トランジッショナル文書型を利用するようにしましょう。

XHTMLでのトランジッショナル文書型はXHTML 1.0 トランジッショナルのみであり、従ってXHTML 1.0 トランジッショナルを用いる事になります。

XHTML 1.0 トランジッショナルの文書型宣言は以下の通りです。

<?xml version="1.0" encoding="文字コード"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

次に、メニューページの<a>要素には、以下のようにtarget属性を追加します。

<a href="…" target="右フレームの名前"> … </a>

<a>要素にtarget属性を指定する事で、別フレームに当該リソースを表示させる事が出来ます。

コンテンツページには<noframes>要素で代替ナヴィゲーションを与える。

続いて、メニューを含む全てのコンテンツページ(フレームセット文書を除く全ての文書)の<body>要素直下の任意の箇所に、ナヴィゲーションなどを<noframes>要素で記述します。

これは本来フレームに嵌め込まれている筈のページをフレームに嵌めずに閲覧した場合に限り表示させるものです。

具体的には、以下のようにすれば良いでしょう。

<noframes>
    <ul>
        <li><a rel="start" href="表紙のURI">サイトの題名</a></li>
        <li><a rel="contents" href="コンテンツトップのURI">コンテンツ名</a></li>
        <li><a rel="chapter" href="コーナトップのURI">コーナ名</a></li>
        …
        <li><a rel="prev" href="前ページのURI">前ページ名</a></li>
        </ul>
    </noframes>

(以下、ページの本文)

ここでは、ページの冒頭に<ul>要素でナヴィゲーションリストをフレームに組み込まれていない場合のメニュー代わりとして記述しております。

勿論、実際にはページの末尾でも途中でも構いません。

但し、どのような場合にしてもフレームから外れている場合でも問題無く利用出来るような代替コンテンツを用意しておくようにしましょう。

フレームの問題点。

さて、フレームと言うものは、かなり便利そうなものに見えるかも知れません。

しかし、フレームにはさまざまな問題があります。

実質的な画面が狭くなる。

フレームを利用する場合、サブのフレームの領域がある事で、当然メインとなるフレームの大きさは全画面より小さなものとなります。

解像度の低い端末の場合、メインフレームが小さくなりすぎて閲覧に支障が出る恐れもあります。

場合に依ってはメニューフレームも入りきらなくなってしまう事もあるでしょう。

今日では横幅が千ピクセルズ以上あるものも少なくないとは言え、今も600ピクセルズ程度しかない端末も存在し得ますし、そもそも端末のスペックを無闇に決め付けると言う事自体が間違っています。

世の中にはどんな例外があるか分かったものでは無いからです。

携帯電話など、フレーム機能をサポートしない端末もある。

携帯電話でフレーム機能は使えません。

PCでもインターネットエクスプローラ 2.xには実装されていませんでしたし、テキストブラウザでは最も有名なリンクスもフレームは使えません。

つまり、フレームはHTMLの仕様としては必須のものとは言えないのです。

当然、フレームに対応しない端末の事も考えてやらなければなりません。

もちろん、PC向けのブラウザのほぼ十割が今ではフレームをサポートしていますが、オペラではフレーム機能をユーザの設定で使えなくする事も出来ます。

わざわざ使えなくするのはどうかと思うかも知れませんが、閲覧者側がどうしようと、制作する側は関知出来ない筈です。

フレームは重い。

実際にフレームセット文書を読み込むと、そのフレームセット文書にリンクされているリソースを併せて読み込まなければなりません。

二分割フレームなら、元のフレームセット文書と一緒に二つのフレーム用リソースを読まなければならなくなります。

つまり、単純に考えると三ページ分のリソースを読まなければならない事になります。

低スペックの端末だと、ハードウェアに負担が掛かり過ぎてしまう事もあります。

フレームの操作は複雑である。

通常ウェブブラウザではアンカーを指定した際、読み込んだリソースを表示させるのは当該アンカーを降ろされているページを表示しているウインドウ自身となります。

フレームを採用したウェブのナヴィゲーションの基本はメニューフレームに降ろされているアンカーを指定してメインのフレームに指定したリソースを表示させる…このためにはメニューフレームのアンカーに用いられている<a>要素に表示させたいフレームの名前を値に持つtarget属性を指定しなければなりません。

そうでないと、メニューを表示させているフレームの表示が代わってしまうからです。

フレームは意外に面倒である。

フレームによるサイトの作り方を上記で簡単に解説しましたが、フレームを安全に使うためにはフレームに嵌め込まれるべきリソースには<noframes>要素でナヴィゲーションなどを書いてやらなければなりません。

つまり、フレームを使えばナヴィゲーションが省略出来ると言うのは間違いで、実際にはフレームを使わなくても正しく利用出来るようなサイト作りが必要となる訳です。

結局、ノンフレームのサイト作りに較べて掛かる手間は変わらないどころか、フレーム関連の要素をマークアップする分だけノンフレームのサイトに較べて却って手間が掛かってしまうと言う訳です。

その他の問題点。

その他、ブラウザの実装上の問題もあります。

ブラウザのヴァージョンに依っては、フレームを用いたページからブラウザ操作で戻る場合、正常に前に表示していたページに戻れない場合があります。

特にフレームを用いたサイト内を何ページか移動した場合、ブラウザ操作で前に戻ろうとすると、フレームを用いたページの前に表示させていた別のリソースを表示したり、戻れなかったりする事もあります。

勿論、これらの実装は仕様とは関係ありませんが、やはりそう言う問題があると言う事を知っておくのは悪い事では無いでしょう。

結局のところ…。

フレームを使わない方が却って楽に使い勝手の良いサイトが出来ます。

だから、わざわざ教えたくはなかったのです。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com