HTML & CSS

レシピ

エフィクト

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

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

この記事のポイント

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

目次

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

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

要素内のスクロールバー表示例
要素内のスクロールバー表示例

コード例

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

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

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

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

スクロール表示をしない通常の表示例
スクロール表示をしない通常の表示例

コード例

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

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

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

縦のスクロールバーが表示される

コード例

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

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

コード例

<style>
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;
}
</style>
<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」にします。

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

横スクロールバーのみ非表示

コード例

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

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。