スクロールボックスの作成

>>ホームページの作り方TOP　>>スクロールボックスの作成

■スクロールボックスの作成

スクロールボックス（広義）の作り方は大きく3通りあります。

ひとつは、span>textareaでくくる方法です。ボックス範囲はcolsとrowsで指定できます。

もうひとつは、overflowを使う方法です。 textareaにはできない文字の大きさや背景色を変える事ができます。ある任意のボックスに対しheightを指定し、そのheightからもれた部分を visible(領域を広げて表示)するか、hidden(隠す)か、scroll(スクロールバーをつける)か、auto(ブラウザに任せる)ます。

p.list {
　　　　overflow:visible;
　　　　overflow:hidden;
　　　　overflow:scroll;
　　　　overflow:auto;
　　　　}

最後は、iframe（インラインフレーム）を使って、別に作ったページをそのまま表示させる方法があります。

フレーム構造はブラウザによってはうまく表示されないことがあるので好ましいとはいえませんが、一番？融通が利く方法です。

<iframe src="rireki.html" frameborder="0" marginwidth="0" marginheight="0" width="220" height="114" scrolling="yes">what's new</iframe>

flameborderはフレームの枠線の太さで、marginはフレームの上下左右の余白を調整できます。

iframeと/iframeの間に入れる文章は、表示されなかった場合に出る文字であり、基本的にはフレーム未対応の人のために、「フレーム対応のブラウザで見てください」などと書くのがよいでしょう（サンプルは適当です）。

表示させるhtmlファイルはフレームの大きさに合わせて作成しましょう。

今回は2番目の方法を使って先ほどのサンプルを修正してみます。

CSSファイルのp.list部分をすべて消して、下のように新しく書き換えます。

p.list {
　　　　border:solid 1px #ccccff;
　　　　height:40px;
　　　　width:380px;
　　　　overflow:auto;
　　　　background-color:#eeeeee;
　　　　font-size:12px;
　　　　text-align:left;
　　　　padding-top:4px;
　　　　margin-top:4px;
　　　　margin-left:20px;
　　　　}

するとこのようになります。→サンプル

ホームページの作り方（HP作成法）を解説

STEP1

STEP2

STEP3

STEP4

STEP5

STEP6

STEP7

■スクロールボックスの作成