ブログ等のWeb上でボックスからはみ出した部分をスクロールバーで表示させる方法！

Web上のボックス内データが多過ぎる…
スクロールバーで表示させたい!!

設定情報を指定してやる!?

　このブログの冒頭のPC操作をしている画像の右横にスクロールバーが表示されていますが、画像が大きすぎて其のまま表示させようとすればボックスの縦幅が大きくなってしまうのでスクロールバーでスクロールすることにより全体を表示させているのですが・・・どの様な指図をすれば表示させられるのか書いてみようと思います。

ボックス縦横のサイズのみ

スクロール・スクロール・スクロール・スクロール・スクロール・スクロール・スクロール・スクロール・

　

<div style="width:140px;height:140px;background-color:#ccffcc;border:solid 2px red;">スクロール・スクロール・スクロール・スクロール・スクロール・スクロール・スクロール・スクロール・ </div>

　例えば、左の画像のようにボックスの横幅を140px、縦幅を140pxとだけ指定の場合・・・と書いたらボックスからはみ出してしまいます。

overflowプロパティ使用

スクロール・スクロール・スクロール・スクロール・スクロール・スクロール・スクロール・スクロール・

　

<div style="width:140px;height:140px;overflow:scroll;background-color:#ccffcc;border:solid 2px red;">スクロール・スクロール・スクロール・スクロール・スクロール・スクロール・スクロール・スクロール・ </div>

　スクロールバーを表示させるには、スタイルシート(CSS)にoverflowプロパティ(設定情報)を使用して値にscrollを使用すれば表示できるんです。

　今回紹介したoverflowプロパティ(設定情報)は、要素の内容がボックス内に収まらない時に、はみ出た部分をどうするかを決める時に使用するんですが、値のscrollと同じく、基本的にはスクロールバーを表示するautoも使用できるのですがこのautoの場合、ブラウザによって動作が変わってしまうことがあるようなんです。
　是非活用してみて下さいね。