Help us understand the problem. What is going on with this article?

【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;
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした