CSS簡易リファレンス − 知っていれば便利なプロパティ
overflow − 指定範囲をはみ出た部分の表示方法を指定。
overflowは、指定範囲をはみ出てしまった部分の表示方法を指定するプロパティです。これを利用し「擬似インラインフレーム」を作ることが可能です。
widthの値
- scroll
指定範囲にスクロールバーを表示させ、はみ出た部分はスクロールして見ることができます。 - auto
指定範囲をはみ出た場合のみスクロールバーを表示させ、はみ出た部分はスクロールして見ることができます。 - hidden
指定範囲をはみ出た部分が非表示になります。
HTMLの記述例
<div style="width:100px;height:50px;background:#ffffff;overflow:scroll;">指定範囲にスクロールバーを表示させ、はみ出た部分はスクロールして見ることができます。</div>
<div style="width:100px;height:50px;background:#ffffff;overflow:auto;">指定範囲をはみ出た場合のみスクロールバーを表示させ、はみ出た部分はスクロールして見ることができます。</div>
<div style="width:100px;height:50px;background:#ffffff;overflow:hidden;">スクロールはせずに、指定範囲をはみ出た部分が非表示になります。</div>
<div style="width:100px;height:50px;background:#ffffff;overflow:scroll;">指定範囲にスクロールバーを表示させ、はみ出た部分はスクロールして見ることができます。</div>
<div style="width:100px;height:50px;background:#ffffff;overflow:auto;">指定範囲をはみ出た場合のみスクロールバーを表示させ、はみ出た部分はスクロールして見ることができます。</div>
<div style="width:100px;height:50px;background:#ffffff;overflow:hidden;">スクロールはせずに、指定範囲をはみ出た部分が非表示になります。</div>
ブラウザでの表示例
指定範囲にスクロールバーを表示させ、はみ出た部分はスクロールして見ることができます。
指定範囲をはみ出た場合のみスクロールバーを表示させ、はみ出た部分はスクロールして見ることができます。
overflowを指定していない場合、IEでは枠がテキスト等に併せて自動的に広がり、Firefoxではテキストが枠を飛び出してしまいます。