文系人間再生学

リンク      トップ

タグ

インラインフレーム

<IFRAME>

基本構造
<iframe src="frame_left.htm" width="30%" height="90" border="1">
  フレームに対応していないブラウザに対してのコメントなどを書く。
</iframe>
scrolling=""
    auto・・・必要に応じてスクロールバーを表示。(デフォルト)
    no ・・・スクロールバーを表示しない。
    yes ・・・スクロールバーを常に表示。

【使用例】

    scrolling="auto"     scrolling="no"


スクロールバーを片方だけ表示させるには、呼び出されるページの方を、BODYの大きさを指定するか、ボーダーなしのテーブルで全体をフレームの大きさ以下に囲む。

スクロールバーの太さを変える。

フレームに表示されるページにスタイルシートを適用して、zoomプロパティで拡大率を変更するとスクロールバーの太さも拡大・縮小される。
ただし、IE5.0以上でのみの対応なので、ネットスケープなどの他のブラウザのために別ページを用意し(効果がかからなかった場合、拡大したまま表示されてしまう。)、JavaScriptかCGIを利用してブラウザを判別してページを選択表示しなければならないだろう。
下記の例では、iframeタグの属性にname="flm"とフレームに名前をつけ、呼び出されるページ(zoomを使用していないHTML)のhead内で、Javascriptを利用し、JavascriptがオンでIE5.0以上のブラウザのみzoomを使用したページに移動させている。
<script type="text/javascript">
<!--
if (navigator.appVersion.indexOf("MSIE") > 0){
if (parseInt(navigator.userAgent.charAt(30)) >= 5)
{top.flm.location.href="frame_zoom.htm";}
}
// -->
</script>

インラインフレームを使用せずに同様の効果を出す方法。

@overflowを使用する方法。


<DIV" style="width:168px;height:60;overflow:auto;border:solid 4px #DD88be;">
  文章・・・
</DIV>
テーブルのセル内で併用するなど応用できる。
overflowを使用する
overflowを使用する
overflowを使用する
overflowを使用する

Aテキストエリアを使用する方法。

<textarea name="sample" rows="4" cols="30">
  文章・・・
</textarea>

しかし、この方法だとユーザーにバックスペースキーを押されると文字が消えてしまう。