Edited at

【CSS】オーバーフローしたコンテンツの表示

More than 5 years have passed since last update.


hidden

ボックスの横幅と高さを widthheight プロパティで指定すると、ボックス内にコンテンツが収まらないケースが出てきます。

これは overflow プロパティの値が初期値の visible で処理される為です。 overflow プロパティの値を hidden にすると、オーバーフローしたコンテンツを隠すことが出来ます。ただし、隠した部分は観覧できなくなります。

<div id="hidden">

<h2>HAM SANDWICHES</h2>
<p>焼きたての手作りパンで新鮮なハム、トマト、チーズ、レタスを挟んだサンドイッチです。マスタードをピリッときかせたマヨネーズソースがおいしくて、お店の近くを通るたびに買い込んでしまいます。</p>
</div> <!-- /#hidden -->

#hidden {

border: solid 2px orange;
background: lemonchiffon;
width: 360px;
height: 120px;
padding: 10px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}



scroll

オーバーフローしたコンテンツを隠した状態で観覧できるようにする為には、 overflow プロパティの値を scroll にします。すると、ボックスにスクロールバーが表示され、インラインフレームの形でコンテンツを観覧できるようになります。

ただし、コンテンツの分量と関係なく、常に縦横にスクロールバーが表示されます。

<div id="scroll">

<h2>HAM SANDWICHES</h2>
<p>焼きたての手作りパンで新鮮なハム、トマト、チーズ、レタスを挟んだサンドイッチです。マスタードをピリッときかせたマヨネーズソースがおいしくて、お店の近くを通るたびに買い込んでしまいます。</p>
</div> <!-- /#scroll -->

#scroll {

border: solid 2px orange;
background: lemonchiffon;
width: 360px;
height: 120px;
padding: 10px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
overflow: scroll;
}



auto

スクロールバーを必要に応じて表示する為には、値を auto と指定します。すると、コンテンツがオーバーフローしている縦方向のスクロールバーのみが表示されます。

<div id="auto">

<h2>HAM SANDWICHES</h2>
<p>焼きたての手作りパンで新鮮なハム、トマト、チーズ、レタスを挟んだサンドイッチです。マスタードをピリッときかせたマヨネーズソースがおいしくて、お店の近くを通るたびに買い込んでしまいます。</p>
</div> <!-- /#auto -->

#auto {

border: solid 2px orange;
background: lemonchiffon;
width: 360px;
height: 120px;
padding: 10px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
overflow: auto;
}



overflow-x, overflow-y

overflow プロパティの設定は、横方向と縦方向の設定を個別に指定することもできます。その場合、 overflow-xoverflow-y プロパティを利用します。

たとえば、overflow-x プロパティの値を scrolloverflow-y プロパティの値を hidden にすると、横方向はスクロールバーが表示され、縦方向はスクロールバーを隠した表示となります。

<div id="x-y">

<h2>HAM SANDWICHES</h2>
<p>焼きたての手作りパンで新鮮なハム、トマト、チーズ、レタスを挟んだサンドイッチです。マスタードをピリッときかせたマヨネーズソースがおいしくて、お店の近くを通るたびに買い込んでしまいます。</p>
</div> <!-- /#x-y -->

#x-y {

border: solid 2px orange;
background: lemonchiffon;
width: 360px;
height: 120px;
padding: 10px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
overflow-x: scroll;
overflow-y: hidden;
}