サイズを指定した要素内にスクロールバーを表示する

最終更新日：2023-08-15
公開日：2018-08-13

要素の幅や高さを指定し、スクロールする形でコンテンツを表示させる設定方法を解説します。

この記事のポイント

要素内のスクロールバーの表示を制御する
縦スクロールバーと横スクロールバーを分けて制御する

スクロールバーを表示する

要素の中に入っているコンテンツが親要素の中に収まらない場合は、次のようにスクロールバーを表示することができます。
iframe要素の表示と似ています。

CSS コード例

section {
  overflow: scroll;
  margin: 50px auto 20px;
  padding: 25px;
  width: 300px;
  height: 200px;
  border: 2px solid #ccc;
}
h1 {
  min-width: 400px;
}

p {
  min-width: 400px;
}

figure {
  width: 400px;
}

HTML コード例

<section>
  <h1>サイズを指定した要素内にスクロールバーを表示する</h1>
  <p>要素の中で表示しきれないコンテンツは、スクロールバーを使って表示するように設定することができます。</p>
  <figure><img src="./images/pic_sample.jpg"></figure>
</section>

縦横ともにサイズオーバーしているときは、このように縦スクロールと横スクロールの両方を表示することもできます。
上記コードのoverflowプロパティで指定している「scroll」の値が、スクロール表示の指定に該当します。

スクロールバーの表示を制御する

先ほどのコードでoverflowプロパティを指定しなかった時の表示から確認します。
親要素のsection要素のサイズ指定は残して、子孫要素のサイズ指定のみすべて解除して表示してみます。

CSS コード例

section {
/*   スクロールの指定はコメントアウト */
/*   overflow: scroll; */
  margin: 50px auto 20px;
  padding: 25px;
  width: 300px;
  height: 200px;
  border: 2px solid #ccc;
}

/* 子孫要素のサイズ指定をすべてコメントアウト */
h1 {
/*   min-width: 400px; */
}

p {
/*   min-width: 400px; */
}

figure {
  width: 100%;
/*   width: 400px; */
}

HTML コード例

<section>
  <h1>サイズを指定した要素内にスクロールバーを表示する</h1>
  <p>要素の中で表示しきれないコンテンツは、スクロールバーを使って表示するように設定することができます。</p>
  <figure><img src="./images/pic_sample.jpg"></figure>
</section>

高さが親要素の範囲に収まらず、はみ出して表示されます。
横は成り行きとなります。

そこで、まずは縦のスクロールバーのみ表示してみます。

CSS コード例

section {
  overflow-y: scroll;
  margin: 50px auto 20px;
  padding: 25px;
  width: 300px;
  height: 200px;
  border: 2px solid #ccc;
}

/* 子孫要素のサイズ指定はすべてコメントアウト */
h1 {
/*   min-width: 400px; */
}

p {
/*   min-width: 400px; */
}

figure {
  width: 100%;
/*   width: 400px; */
}

HTML コード例


  <h1>サイズを指定した要素内にスクロールバーを表示する</h1>
  <p>要素の中で表示しきれないコンテンツは、スクロールバーを使って表示するように設定することができます。</p>
  <figure><img src="./images/pic_sample.jpg"></figure>
</section>

続いて、子孫要素のサイズ指定を戻します。

CSS コード例

section {
  overflow: scroll;
  margin: 50px auto 20px;
  padding: 25px;
  width: 300px;
  height: 200px;
  border: 2px solid #ccc;
}

h1 {
   min-width: 400px;
}

p {
   min-width: 400px;
}

figure {
   width: 400px;
}

HTML コード例

<section>
  <h1>サイズを指定した要素内にスクロールバーを表示する</h1>
  <p>要素の中で表示しきれないコンテンツは、スクロールバーを使って表示するように設定することができます。</p>
  <figure><img src="./images/pic_sample.jpg"></figure>
</section>

overflow-yプロパティもoverflowプロパティへ変更しました。
値はそのまま「scroll」です。
表示は次のように縦横の両方にスクロールが表示されます。

Note

上記コードではあえてoverflowプロパティを使っていますが、実はoverflow-yプロパティのままでも横に表示が収まらない場合は縦横ともにスクロールバーが表示されます。overflow-xプロパティを使っても同じです。

それぞれ個別にスクロールの設定を行うときのために、縦のoverflow-yプロパティと、横のoverflow-xプロパティが別々に用意されています。

スクロールバーを非表示にする

最後にスクロールバーを非表示に設定します。
スクロールバーを非表示にするには、値を「hidden」にします。

次の例では縦スクロールバーをそのまま表示にして、横スクロールバーのみ非表示にしています。

CSS コード例

section {
  overflow-x: hidden;
  overflow-y: scroll;
  margin: 50px auto 20px;
  padding: 25px;
  width: 300px;
  height: 200px;
  border: 2px solid #ccc;
}

h1 {
   min-width: 400px;
}

p {
   min-width: 400px;
}

figure {
   width: 400px;
}

HTML コード例

<section>
  <h1>サイズを指定した要素内にスクロールバーを表示する</h1>
  <p>要素の中で表示しきれないコンテンツは、スクロールバーを使って表示するように設定することができます。</p>
  <figure><img src="./images/pic_sample.jpg"></figure>
</section>

記事一覧