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>
あいうえお
かきくけこ
さしすせそ