スクロールバーをつけて省スペース化

<p><p>タグなどにスクロールバーをつけることで、
小さなスペースに文章を掲載することができます。

CSSのoverflowという要素を利用します。

<style type="text/css">
p.box{
width:300px;
height:160px;
padding:10px;
background-color:#eee;
overflow: scroll;
}
</style>

とCSSを入力。HTMLは、

<p class="box">
これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。<br />
これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。<br />
<br />
これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。
これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。<br />
これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。<br />
<br />
これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。
</p>

です。

実行結果

これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。
これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。

これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。 これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。
これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。

これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。

更新情報の窓などに使えそうですね。

素材のトップへ

スポンサードリンク

スポンサードリンク

SOZAI | 素材

その他