はみ出たボックスの内容の表示方法を指定するoverflowプロパティ
overflow

 overflowプロパティは、ボックスの内容が入りきらない場合に、はみ出た部分の表示の仕方を指定するときに使います。

 <frame>タグを使わないで疑似フレームを表現にしたい場合に多く利用されます。

基本データ

構文 セレクタ{overflow: 値;}
継承 ×
「visible」「hidden」「scroll」「auto」「inherit」
効果 ボックスの内容が入りきらない場合に、はみ出た部分の表示の仕方を指定
初期値 visible
適用個所 再配置されていないブロックレベル要素、テーブルセル、インラインブロック要素

例:

<div style="width: 200px;overflow: scroll;">
<img src="/fwcr/design/cssref/images/gt.gif" width="376" height="50">
</div>

動作Webブラウザ

Internet Explorer IE 4以上
Firefox 全バージョン
Safari全バージョン
OperaOpera 6以上
Chrome全バージョン
iPhone/iPad 全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.overflow

jQueryを使った参照方法

$('【セレクタ】').css('overflow','【値】');
$('【セレクタ】').css({'overflow':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間