スタイルシートでスクロール表示

overflow属性

今回はoverflowという属性について説明します。指定した段落（<div>～</div>）からあふれた文章を表示する方法を指定します。

 では実際にやってみます。まず基本となる枠を作ります。

<div style="width:400px;height:100px;border-left:1px solid black;border-top:1px solid black;border-bottom:1px solid black; border-right:1px solid black"></div>

よこ400px、たて100pxのボックス枠が表示されました。

次に文章を埋め込みます。埋め込む文章は今日の日記。

今日レンタルサーバのことを調べていて月額100円で借りられるレンタルサーバがあることを知った。ほんとはレンタルサーバにトライ！で扱うような話題なのだが、率直に残しておこうと思い今書いている。

nsfレンタルサーバ　と　バリューコア

どちらも100円、100MBから利用できるとのこと。nsfレンタルサーバは独自ドメインも使えるらしい。機会があったら使ってみたいとちょっと思った。そのうちちゃんと紹介しようと思う。

visibleの場合

<div style="width:400px;height:100px;overflow:visible;border-left:1px solid black;border-top:1px solid black;border-bottom:1px solid black; border-right:1px solid black">文章</div>

枠の大きさが広がってすべて表示されます。

hiddenの場合

<div style="width:400px;height:100px;overflow:hidden;border-left:1px solid black;border-top:1px solid black;border-bottom:1px solid black; border-right:1px solid black">文章</div>

枠からあふれる部分は表示されません。

scrollの場合

<div style="width:400px;height:100px;overflow:scroll;border-left:1px solid black;border-top:1px solid black;border-bottom:1px solid black; border-right:1px solid black">文章</div>

たて、よこにスクロールバーが表示されています。

autoの場合

<div style="width:400px;height:100px;overflow:auto;border-left:1px solid black;border-top:1px solid black;border-bottom:1px solid black; border-right:1px solid black">文章</div>

スクロールバーを必要に応じて表示します。この場合よこ方向は枠に収まっているため、スクロールバーが表示されません。

overflowを利用すると記事がすっきりしますよね。なんとなく出来るサイトって気がしません？