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

Scroll-Box

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

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

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>

おすすめ書籍(HTML&CSS編)

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース(無料)

【IT道場】入校時0円! 就職目的プログラミングスクール

エンジニア転職なら100%「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

Twitterやってます!Follow Me!

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!

最近の投稿