Search

Overflow - オーバーフロー

  1. overflow〔コンテンツがボックスからあふれた場合の表示方法〕
  2. overflow-style〔あふれた要素のスクロール方法を指定〕
  3. overflow-x CSS3～〔X方向の表示方法〕
  4. overflow-y CSS3～〔Y方向の表示方法〕
  • a href='http://www.w3.org/TR/css3-box/'>CSS basic box model

overflow
コンテンツがボックスからあふれた場合の表示方法

unknown

overflow: [ visible | hidden | scroll | auto | no-display | no-content ]{1,2}

overflowプロパティは、ボックス要素からはみ出したコンテンツの表示方法を指定します。

  • デフォルト値： visible
  • 非置換ブロックレベル要素、非置換インラインブロックレベル要素
  • 継承：しない
overflowプロパティの値
値説明
visibleはみ出して表示する（デフォルト値）。
scrollスクロールバーを表示する。
hiddenはみ出した部分は非表示にする。
autoはみ出す場合は、自動的にスクロールバーを表示する。
inhrit親要素のスタイルを継承する。
※overflowプロパティは子要素に継承されません。親要素の値を子要素に継承する場合はinheritを指定してください。

更新履歴のように追記して文章が長くなる場合や長いサンプルスクリプトを表示する場合、そのまま表示してはボックスが長すぎて不恰好です。 scroll（スクロール）やauto（自動）を指定すれば、表示上のボックスの大きさは変えずに、はみ出す場合はボックス内にスクロールバーが表示されます。 これならページのレイアウトも崩れず、スペースもとりません。

visible（デフォルト値）
内容がボックスに入りきらない場合は、はみ出して表示されます。
//サイズ固定の場合
<style type="text/css">
.ovf1 {
overflow:visible;
width:200px; height:10em;
background-color:#e0f1f6;
border:1px solid #96b5d8;
}
</style>
<div class=ovf1>div要素に指定してみました。</div>
//AUTOを指定した場合
<style type="text/css">
.ovf1a {
overflow:visible;
width:auto; height:auto;
background-color:#e0f1f6;
border:1px solid #96b5d8;
}
</style>
<div class=ovf1a>div要素に指定してみました。</div>
scroll（スクロール）
内容がボックスからはみ出す場合、縦・横スクロールバーの両方が表示されます。ブラウザによってスクロールバーの表示のされ方が異なります。
//サイズ固定の場合
<style type="text/css">
.ovf2 {
overflow:scroll; width:200px; height:10em; background-color:#e0f1f6;
border:1px solid #96b5d8;
}
</style>
<div class=ovf2>div要素に指定してみました。</div>
//AUTOを指定した場合
<style type="text/css">
.ovf2a {
overflow:scroll; width:auto; height:auto; background-color:#e0f1f6;
border:1px solid #96b5d8;
}
</style>
<div class=ovf2a>div要素に指定してみました。</div>
hidden（非表示）
ボックスからはみ出した内容は非表示になります。
//サイズ固定の場合
<style type="text/css">
.ovf3 {
overflow:hidden;
width:200px; height:10em;
background-color:#e0f1f6;
border:1px solid #96b5d8;
}
</style>
<div class=ovf3>div要素に指定してみました。</div>
//AUTOを指定した場合
<style type="text/css">
.ovf3a {
overflow:hidden;
width:auto; height:auto;
background-color:#e0f1f6;
border:1px solid #96b5d8;
}
</style>
<div class=ovf3a>div要素に指定してみました。</div>
auto（自動）
ボックスから内容がはみ出す場合、IE、NN、FireFox では、縦スクロールのみ表示されます。
//サイズ固定の場合
<style type="text/css">
.ovf4 {
overflow:auto;
width:200px; height:10em;
background-color:#e0f1f6;
border:1px solid #96b5d8;
}
</style>
<div class=ovf4>div要素に指定してみました。</div>
//AUTOを指定した場合
<style type="text/css">
.ovf4a {
overflow:auto;
width:auto; height:auto;
background-color:#e0f1f6;
border:1px solid #96b5d8;
}
</style>
<div class=ovf4a>div要素に指定してみました。</div>

overflow-style
あふれた要素のスクロール方法を指定

unknown

overflow-style: auto | [scrollbar | panner | move | marquee] [, [scrollbar | panner | move | marquee]]*

overflow-styleプロパティは、ボックス要素からはみ出したコンテンツのスクロール方法を指定します。

  • デフォルト値： auto
  • 非置換ブロックレベル要素、非置換インラインブロックレベル要素
  • 継承：する
overflow-styleプロパティの値
値説明
scrollbar ボックスにスクロールバーを表示。
marquee ボックス内でコンテンツをスクロール。

WebKit：-webkit-marquee

<style type="text/css">
#d_overflowstyle {
	border: solid 1px #000;
	background:#000;
	color:yellow;
	margin:0 0 10px 0; padding:5px;
	white-space: nowrap; 
	overflow-style: marquee;
	overflow:-webkit-marquee;
</style>

<div id="d_overflowstyle">
	marqueeはモバイルでは効果的に使うけど、PCサイト上ではほとんどみかけないですよねｗ
</div>
marqueeはモバイルでは効果的に使うけど、PCサイト上ではほとんどみかけないですよねｗ

overflow-x CSS3～
X方向の表示方法

unknown

overflow-x: visible | hidden | scroll | auto | no-display | no-content

overflow-xプロパティは、ボックス要素からはみ出したコンテンツの横方向の表示方法を指定します。

  • デフォルト値： visible
  • 非置換ブロックレベル要素、非置換インラインブロックレベル要素
  • 継承：しない
<style type="text/css">
#d_overflowx div {
	border: solid 1px #000;
	background:#000;
	color:yellow;
	margin:0 0 10px 0; padding:5px;
	width: 200px; height: 50px;
}
#d_overflowx div.visible  {
	overflow-x: visible;
}
#d_overflowx div.scroll {
	overflow-x: scroll;
}
#d_overflowx div.hidden  {
	overflow-x: hidden;
}
#d_overflowx div.no-display  {
	overflow-x: no-display;
}
#d_overflowx div.no-content  {
	overflow-x: no-content;
}
</style>

<div id="d_overflowx">
	<div class="visible">[visible] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。</div>
	<div class="scroll">[scroll] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。</div>
	<div class="hidden">[hidden] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。</div>
	<div class="no-display">[no-display] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。</div>
	<div class="no-content">[no-content] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。</div>
</div>
[visible] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。
[scroll] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。
[no-display] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。
[no-content] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。

overflow-y CSS3～
Y方向の表示方法

unknown

overflow-y: visible | hidden | scroll | auto | no-display | no-content

overflow-yプロパティは、ボックス要素からはみ出したコンテンツの縦方向の表示方法を指定します。

  • デフォルト値： visible
  • 非置換ブロックレベル要素、非置換インラインブロックレベル要素
  • 継承：しない
<style type="text/css">
#d_overflowy div {
	border: solid 1px #000;
	background:#000;
	color:yellow;
	margin:0 0 10px 0; padding:5px;
	width: 200px; height: 50px;
}
#d_overflowy div.visible  {
	overflow-y: visible;
}
#d_overflowy div.scroll {
	overflow-y: scroll;
}
#d_overflowy div.hidden  {
	overflow-y: hidden;
}
#d_overflowy div.no-display  {
	overflow-y: no-display;
}
#d_overflowy div.no-content  {
	overflow-y: no-content;
}
</style>

<div id="d_overflowy">
	<div class="visible">[visible] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。</div>
	<div class="scroll">[scroll] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。</div>
	<div class="hidden">[hidden] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。</div>
	<div class="no-display">[no-display] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。</div>
	<div class="no-content">[no-content] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。</div>
</div>
[visible] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。
[scroll] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。
[no-display] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。
[no-content] サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2025 PHP & JavaScript Room All Rights Reserved.

pagetop