スタイルシートの技
iframe要素を使わずに擬似的なインラインフレームのを作成する
HTMLの中に別のHTMLを組み込む方法としてインラインフレームという方法があります。 インラインフレームは便利ですが、動作が重かったり、対応していないブラウザがあったり、 XHTML規格では定義されていない場合があったりする不安定な要素です。 これをスタイルシートで擬似的なインラインフレームを作成する事でどんな環境にも対応できるようにします。 インラインフレームに比べて、やや自由度は劣りますが、汎用性は上がります。
スタイルシートでは領域からはみ出てしまった場合に制御するスタイルシートが存在します。 スクロールバーを出したり出さなかったりできる「overflow」というものを利用します。 これを使うと、iframeの必要性もなくなります。 また、以前はブラウザ「Opera」では「overflow」に非対応なのが問題点でしたが、 最近のバージョンは対応したようで、 ほとんどすべてのブラウザにおいて利用価値が高いものとなっております。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>疑似インラインフレーム</title>
<style type="text/css">
*.logbox
{
border: solid 1px #808080;
width: 240px;
height: 120px;
padding: 0.5em;
overflow: auto;
}
q { color: #008000; }
</style>
</head>
<body>
<h1>疑似インラインフレームを作ってみよう！</h1>
<div class="logbox">
<p>OLY OLY OLY OH ! YELY YELY YELY YEAH !</p>
<p>THE UP-TOWN TOKIO SLAMIN' NIGHT !!</p>
<p>たりない頭なら 知恵を盗みゃいい</p>
<p>ちょうじりあわすなら うそも必要さ</p>
<p>WON'T BE LONG. WON'T BE LONG. もうすぐさ とどくまで</p>
<p>WON'T BE LONG. WON'T BE LONG. おまえのためにすべて</p>
<q>バブルガム・ブラザーズ - 「WON'T BE LONG」</q>
</div>
</body>
</html>
バブルガム・ブラザーズ - 「WON'T BE LONG」
このように指定できます。今回は、罫線は通常の実線で、幅が1ピクセル、色がグレーのボックスを作成した…という事になります。 そして、そのボックスの横幅は240ピクセル、縦幅は120ピクセルという事になります。 また、q要素という見慣れないものが出てきましたが、これは「quote」（引用）を表す要素です。 人様の文章を引用する時には黙って使わないで指定しましょう。「cite」属性でサイト先のURLなどを記載したりします。 この中にコンテンツを書いて行って、はみ出た部分は「overflow」が制御する事になります。「overflow」には以下の値があります。
"overflow"で指定できる値
- scroll
- スクロールバーを表示
- visible
- スクロールバーを表示（規定値）
- hidden
- スクロールバーを隠す
- auto
- スクロールバーの出る出ないを自動判別
この中で良く使われるのはおそらく「auto」でしょう。 「auto」は領域を計算して、はみ出ているようであれば自動的にスクロールバーを付加します。 勿論、この中でタグを使う事も可能ですので、擬似的なインラインフレームがこれで完成する訳ですね。 よく、更新情報に「textarea」要素を使っている方も見かけますが、こちらを使う事をオススメします。 また、「iframe」よりは読み込み速度は外部リンクへアクセスしないために高速です。 どうしてもiframe要素を使わなくてはならない！という時以外はoverflowで指定した方が無難です。 余談ですが、アフィリエイトの広告がiframe要素になっているものがありますが、 XHTML1.1で記述している人には利用できない要素なのでいい迷惑ですね。