ボックスからはみ出した部分の表示方法を指定する

overflow

CSSの書き方

overflow:値 ;

CSSの詳細情報
プロパティ名 overflow 読み方 オーバーフロー
初期値 visible 意味 要素漏れの表示方法を指定
visible/hidden/scroll/auto
対象 ブロックレベルと置換要素
CSSレベル CSSレベル2 対応ブラウザ Windows MAC
継承 しない IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0(※)

解説

「overflow」プロパティは、ボックスから内容がはみ出した場合の表示方法を指定します。

「visible/hidden/scroll/auto」の4種類があります。

値(visible)

「overflow」プロパティの初期値は「visible」で、これはボックスからはみ出した内容も表示するようにします。

ただし、ボックスの「width」プロパティ「height」プロパティの両方でサイズを指定していた場合です。

「width」プロパティだけで、「height」プロパティを特に指定していない場合は、内容がボックスからはみ出さないように、ボックスは縦に伸張します。

値(hidden)

「overflow:hidden;」とした場合、ボックスから内容がはみ出た場合、その部分は表示されません。

値(scroll)

「overflow:scroll;」とした場合、ボックスのサイズは変わりませんが、要素の縦横にスクロールバーが表示されて、全体が見られるようになります。

値(auto)

「overflow:auto;」とした場合の表示方法は「全体が見られるようにすべきである」という曖昧な指定だけで、実際の挙動はブラウザに任されています。

ただし、多くのブラウザは、ボックスに「height」プロパティを指定していない場合は内容が収まるように要素の高さが自動的に伸張し、一方、「width」プロパティと「height」プロパティの両方を指定したボックスの場合は、「overflow:scroll;」と同じようにスクロールバーを出して内容を表示するようです。

InternetExplorerに不具合あり

InternetExplorerでは、「width」プロパティと「height」プロパティを指定しているボックスでも、内容がはみ出さずに、要素の高さが伸びてしまう既知のバグがあります。

詳しくは以下を参照してください。

CSS/HTMLサンプル

/* widthとheightプロパティを指定している場合 */
p { width:200px; height:20px; background-color:#ffdff9; }
p.vis { overflow:visible; }
p.hid { overflow:hidden; }
p.scr { overflow:scroll; }
p.aut { overflow:auto; }
/* widthプロパティのみ指定している場合 */
div { width:200px; background-color:#accbfd; }
div.vis2 { overflow:visible; }
div.hid2 { overflow:hidden; }
div.scr2 { overflow:scroll; }
div.aut2 { overflow:auto; }

段落要素とDIV要素にoverflowプロパティをそれぞれ指定 サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!