WEB制作備忘録

HTML スクロールバー 付け方

長すぎる文面の時や
どんどん更新される新着情報など
長くなる〜というときに便利です。

まずdivでスクロール入れたい箇所を囲みます。
↓は例です。

<div class="index-news">
<h2>新着情報</h2><!--タイトル-->
<div id="newsevent"><!--各種新着情報などスクロールしたい箇所--></div>
</div>

もちろんこれだけでは動きませんので
CSSをつけます。

#newsevent {
	height: 120px;/*スクロールの高さ*/
	overflow-y: scroll;/*縦スクロール*/
}

あまりないですが
横スクロールがお好みなら
yをxにしてください。

CSSを書くのがめんどくさい人は↓

<div style="border: 1px solid #ccc; height: 300px; overflow: auto; width: 100%; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #fffcfc; margin: auto; padding: 10px;"> 
<!--各種新着情報などスクロールしたい箇所-->
</div>

以上忘れがちな情報でした!