スクロールボックスを設置する
スクロールボックスの形式は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を使ったレイアウト~
- XHTMLの骨格を記述する
- divタグを理解する
- div骨格にコンテンツを挿入する
- 絶対配置と相対配置
- divのスタイルを指定する
- 他のタグのスタイルを指定する
- スクロールボックスを設置する
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>