CSSによる擬似的なインラインフレーム

overflowを使用するとページ内にフレームがあるかのように見せることが可能です。

<div class="scroll">
<p>scroll</p>
<p>スクロールバーが表示されフレームがあるように見えます。</p>
<p>テキストはHTML内にあります</p>
</div>
.scroll{
width:300px;
height:100px;
background-color:
#ffeeee;
overflow:scroll;
}

フレームにしたいところをクラス（idでも可能）で括る
overflow:scroll;を設定することでスクロールバーが表示されます。

overflowには以下の4つが指定できます。

visible

ボックスからはみ出して表示されます。これが初期値です。

scroll

ボックスからはみ出た内容はスクロールして表示できる。常にスクロールバーが表示される。

hidden

ボックスからはみ出た部分は表示されません。

auto

ボックスからはみ出た内容はスクロールして表示できる。ブラウザにより対応が違う。

スクロールバーの表示、非表示

縦方向（y）または横方向（x）のスクロールバーを非表示にしたい場合はoverflow-y:hidden;またはoverflow-x:hidden;を使用します。css2.1ではなくcss3になります。

<div class="scroll2">
<p>scroll</p>
<p>スクロールバーが表示されフレームがあるように見えます。</p>
<p>テキストはHTML内にあります</p>
</div>
.scroll2{
width:300px;
height:100px;
background-color:
#ffeeee;
overflow:scroll;
overflow-x:hidden;
}

overflow-yとoverflow-xは上記とおなじ4つの指定が可能です。

また、divでボックスにしなくても直接p要素に指定することも可能です。

<p class="scroll3">scroll<br>
スクロールバーが表示されフレームがあるように見えます。<br>
テキストはHTML内にあります</p>
.scroll3{
width:300px;
height:60px;
background-color:#ffeeee;
overflow-y:scroll;
}

Copyright (C) 2009 ホームページ制作ねっとかんさい All Rights Reserved.