ドリル式ホームページの作り方

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

ドリル式ホームページの作り方TOP  >>  Lesson7〜positionを使ったレイアウト〜  >>  スクロールボックスを設置する

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

スクロールボックスの形式は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を使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. divタグを理解する
  3. div骨格にコンテンツを挿入する
  4. 絶対配置と相対配置
  5. divのスタイルを指定する
  6. 他のタグのスタイルを指定する
  7. スクロールボックスを設置する

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.