HTMLとCSSでスクロールボックスを簡単に実装する方法

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

今回は、HTMLとCSSでスクロールボックスを簡単に実装する方法について解説します。

1 HTMLとCSSでスクロールボックスを簡単に実装する方法
2 おすすめ書籍(HTML&CSS編)
3 プログラミング学習・エンジニア転職関連の情報
4 Twitterやってます！Follow Me！
5 最近の投稿

HTMLとCSSでスクロールボックスを簡単に実装する方法

スクロールボックスの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 {
            height: 300px;
            width: 50%;
            text-align: center;
            border: 1px solid;
            overflow-y: scroll;
        }
    </style>
</head>
<body>

    <h1 style="text-align: center;">HTMLと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>