枠からコンテンツがあふれる場合にスクロールバーを表示する - CSS

HTMLページで枠からコンテンツがあふれる場合にスクロールバーを表示する設定を紹介します。

概要

HTMLページの枠からコンテンツがはみ出す場合にスクロールバーを表示したい場合があります。
CSSのoverflow, overflow-x, overflow-y プロパティを利用するとスクロールバーの表示を制御できます。

書式

overflow:(値);

overflow-x:(値);

overflow-y:(値);

(値)には以下の値が設定できます。今回の用途では、autoを設定します。

値	意味
visible	スクロールバーは表示されません、コンテンツは枠をはみ出します。
hidden	スクロールバーは表示されません、コンテンツは枠でクリップされはみ出しません。
clip	スクロールバーは表示されません、コンテンツは枠でクリップされはみ出しません。
scroll	スクロールバーが表示されます。コンテンツは枠でクリップされはみ出しません。スクロールバーの操作でスクロールして表示できます。
auto	コンテンツが枠内に収まる場合はvisibleの動作になります。枠からはみ出す場合は、スクロールバーが表示されます。

実装例:横(x)方向

コード

以下のHTMLファイルとCSSファイルを作成します。

overflow-scroll-x.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="overflow-scroll-x.css" />
</head>
<body>
  <div class="Container">
    <div class="Frame">
      <div class="ContentText">あいうえお かきくけこ さしすせそ たちつてと なにぬねの</div>
      <div class="ContentText">はひふへほ まみむめも やゆよ らりるれろ わゐうゑを ん</div>
      <div class="ContentText">ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890</div>
    </div>
  </div>
</body>
</html>

overflow-scroll-x.css

.Container {
  display:flex;
  margin:2rem 2rem 2rem 2rem;
  border:1px solid #808080;
}

.Frame {
  width: 60vw;
  overflow-x: auto;
  white-space: nowrap;
  margin: 2rem 2rem 2rem 2rem;
  border: 1px solid #3bc700;
}

.ContentText {
  padding:1rem 0 1rem 0;
  font-size:1.2rem;
}

解説

コンテンツの枠の設定で、white-space: nowrap;を設定し、折り返しが起きないようにします。
この設定がない場合は、枠の幅に合わせてテキストが折り返されるため、枠からあふれることがないため、スクロールバーの表示は不要になります。
overflow-x: auto;の設定によりコンテンツの横幅が枠からあふれる場合にスクロールバーが表示されます。

.Frame {
  width: 60vw;
  overflow-x: auto;
  white-space: nowrap;
  margin: 2rem 2rem 2rem 2rem;
  border: 1px solid #3bc700;
}

実行結果

上記のHTMLをWebブラウザで表示します。下図のページが表示されます。

ウィンドウ幅を狭めます。コンテンツが枠からあふれない場合はスクロールバーは表示されません。

さらにウィンドウ幅を狭めると枠の幅がコンテンツの幅より狭くなるため、横スクロールバーが表示されます。

スクロールバーを操作すると枠の内部がスクロールしてコンテンツを確認できます。

実装例:縦(y)方向

コード

以下のHTMLファイルとCSSファイルを作成します。

overflow-scroll-y.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="overflow-scroll-y.css" />
</head>
<body>
  <div class="Container">
    <div class="Frame">
      <div class="ContentText">123</div>
      <div class="ContentText">456</div>
      <div class="ContentText">789</div>
      <div class="ContentText">012</div>
      <div class="ContentText">345</div>
      <div class="ContentText">678</div>
      <div class="ContentText">901</div>
    </div>
  </div>
</body>
</html>

overflow-scroll-y.css

.Container {
  display:flex;
  margin:2rem 2rem 2rem 2rem;
  border:1px solid #808080;
}

.Frame {
  width:100%;
  height: 60vh;
  overflow-y: auto;
  margin: 2rem 2rem 2rem 2rem;
  border: 1px solid #3bc700;
}

.ContentText {
  padding: 1rem 0 1rem 0;
  font-size: 1.0rem;
}

解説

コンテンツの枠の設定で、height: 60vh;を設定し、ウィンドウのサイズに合わせた高さを設定します。
この設定がない場合は、コンテンツの長さに合わせて枠のサイズが縦に長くなり、枠からあふれることがないため、スクロールバーの表示は不要になります。
overflow-y: auto;の設定によりコンテンツの長さが枠からあふれる場合にスクロールバーが表示されます。

.Frame {
  width:100%;
  height: 60vh;
  overflow-y: auto;
  margin: 2rem 2rem 2rem 2rem;
  border: 1px solid #3bc700;
}

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

Webブラウザのウィンドウの高さを狭めます。ウィンドウの高さに応じて、緑色の枠の縦のサイズが短くなります。

さらにウィンドウの高さを狭めると、コンテンツが枠のサイズより長くなり、スクロールバーが表示されます。

スクロールバーを操作すると枠の内部がスクロールしてコンテンツを確認できます。

CSSの設定により、枠からコンテンツがあふれる場合にスクロールバーを表示できました。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

枠からコンテンツがあふれる場合にスクロールバーを表示する - CSS

概要

書式

実装例:横(x)方向

コード

解説

実行結果

実装例:縦(y)方向

コード

解説

実行結果

関連するページ