インラインフレームは IE の独自機能として登場しましたが、MARQUEE や BLINK のように、いまいち使われているとは言えませんでした。 しかし、既に次期 HTML では廃棄されると予告されている(私は OBJECT が取って代わると予想しています)とはいえ、HTML 4.0で正式採用されて知名度が上がりました。 今回はそのインラインフレームを使ってメニューを埋めこみます。
01 <IFRAME src="200101-1menu.html" frameborder=0>
02 <P>
03 ここにはインラインフレームとして<A href="200101-1menu.html">メニュー</A>が埋めこまれています。
04 </P>
05 </IFRAME>
IFRAMEはFRAMEとほぼ同じ属性が使えますが、noresize がなく、align があります。align は IMG や TABLE のものと同じです。 ここではフラットな感じになるように frameborder=0 とし、フレーム枠を非表示にしています。
IFRAMEの要素はインラインエレメントで、ブラウザがインラインフレームに対応していないときに代用されます。 この例では3行目がこれにあたり、ここではインラインフレームがあることと、埋めこんだファイルへのリンクを要素としています。
フレームを使ったページの HTML のバージョンは4.0以上であり、同時に Frameset とする必要があります。
バージョン3.2ではまだフレームが使えませんし、使えるようになった4.0でも Frameset 以外の物では定義されていません。
このファイルの場合は4.01 Frameset となっています。なお、4.0よりも4.01を使うことが推薦されています。
4.01におけるそれぞれの DOCTYPE 宣言は次の通り。
01 IFRAME
02 {
03 width:400px; /* 幅 400ピクセル */
04 height:200px; /* 高さ 200ピクセル */
05 border-style:solid; /* ボーダーの種類 平坦 */
06 border-color:#A0A0A0; /* ボーダーの色 */
07 border-width:4px; /* ボーダーの太さ 4ピクセル
08 }
CSS を使って、インラインフレームをフラットなデザインにしています。 重要なのは、border-style です。このプロパティによってボーダーのデザインを変更し、その周辺と上手く馴染むようにしています。