WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > overflow
overflow  ブロック要素  表示 

ボックスはみ出た部分の表示方法。

このエントリーをはてなブックマークに追加
幅や高さを指定したDIVなどのブロック要素の範囲内に文章等の内容が入りきらない場合に、はみ出た部分の表示方法を指定します。

書式

(例) overflow:hidden;

パラメーター

visible
　ボックスからはみ出して表示されます(初期値)。
　IEは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。
scroll
　入りきらない内容はスクロールして見られるようになります。
hidden
　はみ出た部分は表示されません。
auto
　ブラウザに依存します（一般的にはスクロールして見られるようになります）。

指定なし

<div style="width:100px;height:30px;border:1px solid #ccc;">あいうえお<br />かきくけこ<br />さしすせそ</div>
あいうえお
かきくけこ
さしすせそ

overflow:visible

<div style="width:100px;height:30px;border:1px solid #ccc;overflow:visible;">あいうえお<br />かきくけこ<br />さしすせそ</div>
あいうえお
かきくけこ
さしすせそ

overflow:scroll

<div style="width:100px;height:30px;border:1px solid #ccc;overflow:scroll;">あいうえお<br />かきくけこ<br />さしすせそ</div>
あいうえお
かきくけこ
さしすせそ

overflow:hidden

<div style="width:100px;height:30px;border:1px solid #ccc;overflow:hidden;">あいうえお<br />かきくけこ<br />さしすせそ</div>
あいうえお
かきくけこ
さしすせそ

overflow:auto

<div style="width:100px;height:30px;border:1px solid #ccc;overflow:auto;">あいうえお<br />かきくけこ<br />さしすせそ</div>
あいうえお
かきくけこ
さしすせそ