CSSでコンテンツがはみ出た場合に、スクロールするようにする方法(スクロールボックスの実装方法)

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、CSSでコンテンツがはみ出た場合に、スクロールするようにする方法(スクロールボックスの実装方法)について解説します。

1 CSSでコンテンツがはみ出た場合に、スクロールするようにする方法
2 おすすめ書籍(HTML&CSS編)
3 プログラミング学習・エンジニア転職関連の情報
4 Twitterやってます！Follow Me！
5 最近の投稿

CSSでコンテンツがはみ出た場合に、スクロールするようにする方法

CSSでコンテンツがはみ出た場合に、スクロールするようにするには、次のようにします。

基準となる高さ(y軸)または、横幅(x軸)を指定する。
高さの場合はoverflow-y: auto; , 幅の場合はoverflow-x: auto; を指定する。

上記のように設定するだけで、指定の高さ、または指定の幅を超過した場合は、スクロールするようになります。

スクロールボックスは、次のようにページの中に埋め込まれたスクロールできるコンテンツのことです。

よく利用規約のコンテンツ表示などで使われているのを見かけますね。

それでは、スクロールボックスのSampleCode(HTML)実行イメージを観ていきましょう。

SampleCodeは、次のような内容になります。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scroll-Box-Test🔥</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
      }

      /* Scroll-Box-Style */
      .robotama-info-scroll-box {
        width: 50%;
        text-align: center;
        border: 1px solid;
        /* 1. 高さ(y軸)を指定する */
        height: 500px;
        /* 2. 500px の高さ(y軸)を超えた場合は、スクロールする  */
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <h1 style="text-align: center">
      CSSでコンテンツがはみ出た場合に、スクロールするようにする方法
    </h1>

    <div class="container">
      <div class="robotama-info-scroll-box">
        <h2>ロボ玉 (Robotama)とは？</h2>
        <p>
          説明しよう！！！
          <br />
          ロボ玉
          (Robotama)は、神聖グンマー帝国が開発した最新型のぷるぷるハムスターである！
          <br />
          世界最小・世界最弱のアニマル！
          とりえは、ただひたすらに可愛いこと！！！
          <br />
          そして、当ブログ『No Change No Life
          I/O』のマスコットキャラクターなのです。
          <br />
          簡単なロボ玉 (Robotama)のプロフィールは、次のとおり。
        </p>
        <div>
          <img
            src="https://masanyon.com/wp-content/uploads/2022/11/robotama-2-1024x768.jpg"
            alt="ぷるぷるロボ玉"
            width="300px"
            height="220px"
          />
        </div>
        <ol style="text-align: left">
          <li>神聖グンマー帝国出身のロボロフスキー・ハムスター</li>
          <li>ひまわりの種とハムチュールが好き</li>
          <li>世界最小・世界最弱のアニマル</li>
          <li>可愛いことだけが、存在価値</li>
          <li>いつもぷるぷるしている・・・</li>
          <li>飼い主に心を開くことはない・・・</li>
          <li>
            「神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！」と信じている。
          </li>
          <li>『No Change No Life I/O』のマスコットキャラクター</li>
        </ol>
      </div>
    </div>
  </body>
</html>