HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


HTMLタグボードトップ >> 今すぐ使える!便利ツール >> スタイルシート(CSS)辞典 >> サイズ/配置/視覚 >> ボックスからはみ出した部分の表示方法を指定する

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

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プロパティをそれぞれ指定 サンプル