iframeとの組み合わせ
ビリナビ.comのトップページには、HTMLではない部分がいくつかあります。
Navigatorのそれぞれのカテゴリの登録数が表示されている部分。
簡易アンケートの部分。
掲示板最新記事の部分。
それぞれ、CGIで動かしているわけですが、CGIをHTMLに組み込むために<iframe>タグを使っています。
今まで沢山のサイトを作ってきましたが、iframeを使うのはこれが始めてです。
とても便利なのは分かっていましたが、Netscapeでは表示されない、セキュリティの脆弱性がある、ということでずっと使うのをためらってきました。
ただ、「最近のブラウザではiframeは問題なく使える」「セキュリティ性の非常に高いサイトでなければ問題ない」という記事を読み、使用してみることにしました。
また、amazonなどがiframeを使っているのも、かなりの後押しになりました。
やっぱり非常に使いやすいですねー。
今までは、CGIをHTMLに組み込むといえば、JavaScriptを使うのが定番でしたが、JavaScriptよりもよっぽど手軽で表示も正確です。
アクセス解析を見てみても、iframeが見れないブラウザで見ている人は少ないですが、JavaScriptをOFFにしている人は結構います。
Amazonから学んだ使い方を紹介しておきます。
トップページのNavigatorの例
HTML側
<IFRAME SRC="./navigate.cgi" HEIGHT="210" WIDTH="386" marginwidth="0" marginheight="0" border="0" frameborder="0" style="border:none;" scrolling="no">
<div id="navigator">
<TABLE ALIGN="center" BORDER="0" CELLSPACING="0" CELLPADDING="5" WIDTH="100%" CLASS="tbl">
<TR><TD>
<UL>
<li><a href="./01/html/">総合</a></li>
<li><a href="./02/html/">個人(男性)</a></li>
<li><a href="./03/html">個人(女性)</a></li>
<li><a href="./04/html/">ビリヤード用品</a></li>
<li><a href="./05/html/">サークル</a></li>
<li><a href="./06/html/">団体</a></li>
</UL>
</TD><TD>
<UL>
<li><a href="./07/html/">ブログ</a></li>
<li><a href="./08/html/">リンク集</a></li>
<li><a href="./09/html/">ビリヤード場</a></li>
<li><a href="./10/html/">ゲーム</a></li>
<li><a href="./11/html/">技術解説</a></li>
<li><a href="./12/html/">素材集</a></li>
</UL>
</TD>
</TR>
</TABLE>
</div>
</IFRAME>
<iframe>と</iframe>の間にはiframeをサポートしていないブラウザで見た場合に表示するものを入れておきます。
普通は空白でもいいんですが、ここはメニューなので万が一に備えて記述しています。
基本的に、罫線に囲まれた要素を表示する場合にも、iframe自体の枠線を使わないほうが良いです。
そちらのほうがデザインが崩れにくいので。(border="0" frameborder="0" style="border:none;")
これで、CGIから出力するHTMLの方に、同じ大きさの枠つきのボックスを表示させればOKです。
厳密には、iframeの幅、高さより枠線の幅だけ狭くした大きさを指定しておきます。
この場合は、
width: 384px;
height: 208px;
border: border:1px solid #000000;
のように指定しておけば大丈夫です。
IEでは、その他のブラウザより罫線の枠だけ小さいボックスを作成してしまいますが、このように記述しておけばiframeの中にきちんと収まります。
とりあえず論より証拠。
是非使って見てください。

