HTML TIPS & TRICKS 2001/01
インラインフレームを制する

QUESTION 1 メニューを埋めこめ!

 インラインフレームは 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 宣言は次の通り。

Strict 厳格な4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional 3.2から移行する期間のための制限の緩い4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset フレーム定義を含むファイルのための4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

CSS 定義


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 です。このプロパティによってボーダーのデザインを変更し、その周辺と上手く馴染むようにしています。


インラインエレメント
 エレメントは大きくブロックレベルエレメントとインラインエレメントに分けられ、次のものがインラインエレメントとして分類されている。
テキスト
タグを除いたすべてのテキスト
フォントスタイル
TT, I, B, U, S, STRIKE, BIG, SMALL
フレーズ
EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR
スペシャル
A, IMG, APPLET, OBJECT, FONT, BASEFONT, BR, SCRIPT, MAP, Q, SUB, SUP, SPAN, BDO, IFRAME
フォームコントロール
INPUT, SELECT, TEXTAREA, LABEL, BUTTON

トップページ