スクロールボックスを設置する

スクロールボックスの形式は3通りありますが、今回のサンプルではそのうちの1つ、overflowを使ったスクロールボックスを使用します。

ついでなので、他の2つも同時に紹介します。

textareaを使う

1つめは、<textarea></textarea>の間にスクロールボックス内に記述したい文章を入れて表示させる方法です。

ボックスの大きさは、cols（横幅）とrows（縦幅）で指定することができます。

<textarea name="contact" cols="65" rows="7">
2008.1.1 ホームページ作成講座を公開しました。
　　・
　　・
</textarea>

iframe（インラインフレーム）を使う

2つめは、iframeタグを使用し、別に作ったhtmlファイルをフレーム内に表示させる方法です。

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

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

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

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

overflowを使用する（今回使用）

最後は、overflowを使う方法で、これを使ってサンプル内に更新履歴のスクロールボックスを表示させます。

overflowは、他の2つと違って、cssファイル内に記述するタグで、ある任意のブロックレベル要素のタグに対して、height（高さ）を指定し、そのheightからもれた部分をどうするか指定します。

p.list	{
　　　　overflow:visible; */　領域を広げて表示する　*/
　　　　overflow:hidden; */　隠す　*/
　　　　overflow:scroll; */　スクロールバーをつける　*/
　　　　overflow:auto; */　ブラウザに任せる　*/
　　　　}

overflowを適用するブロックレベル要素として、新しくhtmlファイル内のulの後に、pタグを記述します。

　略
　・
<li class="c1"><a href="#">Lesson6</a></li>
</ul>
<p id="b5">
　2005/1/2　　ホームページ開設
　2005/1/2　　画像をアップしました
　2005/1/2　　第一回リニューアル
　2005/1/2　　第二回リニューアル
　2005/1/2　　ホームページ閉鎖
</p>
</div>
　・
　略

p#b5をdiv#a2の左上を基点に絶対配置させた後、overflowを指定したいので、heightを指定し、overflowの値はautoとします。

これにより、heightで指定した高さを超えた文章があるときは、自動的にスクロールバーが出現し、スクロールボックスができます。

p#b5 {
	position:absolute;
	top:105px;
	left:20px;
	font-size:13px;
	color:#999;
	background:#fff;
	width:220px;
	height:30px;
	overflow:auto;
	border:solid 1px #ccc;
	}

これで完成！サンプルはコチラ→サンプル（ホームページ作成講座）

Lesson7～positionを使ったレイアウト～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>