サイズを指定した要素を縦スクロールさせる方法

CSS

今回は、「サイズを指定した要素を縦スクロールさせる方法」について紹介します。

サイズを指定した要素を縦スクロールさせる方法

完成形はこちら。

縦にスクロールできるのが分かると思います。

※ Google Chrome、Safari、Microsoft edge、Firefoxで動作を確認済み

HTML

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="box">
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
<h2 class="text">テキストが入ります</h2>
</div>
<div class="box"> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> <h2 class="text">テキストが入ります</h2> </div>
<div class="box">
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
    <h2 class="text">テキストが入ります</h2>
</div>

親要素boxの中に、textクラスを持ったテキストを複数用意します。

CSS

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.box {
padding: 20px;
height: 200px;
width: 500px;
margin: 0 auto;
border: 2px solid black;
overflow-y: scroll;
}
.text {
margin-bottom: 30px;
font-size: 30px;
}
.box { padding: 20px; height: 200px; width: 500px; margin: 0 auto; border: 2px solid black; overflow-y: scroll; } .text { margin-bottom: 30px; font-size: 30px; }
.box {
    padding: 20px;
    height: 200px;
    width: 500px;
    margin: 0 auto;
    border: 2px solid black;
    overflow-y: scroll;
}
.text {
    margin-bottom: 30px;
    font-size: 30px;
}

縦にスクロールさせるには、親要素であるboxに対して縦の高さを指定します。

今回はheight200pxを指定しました。

高さを指定することが出来たら、「overflow-y: scroll;」で200pxからはみ出した部分を縦にスクロールさせるようにします。

以上が、縦にスクロールさせる方法です。

まとめ

以上が、「サイズを指定した要素を縦スクロールさせる方法」でした。

□参考文献
https://developer.mozilla.org/ja/docs/Web/CSS/overflow

 

関連記事:

【有益】大学生におすすめの本まとめ20選【2020年最新版】 【ブログ運営報告】大学生がブログを1ヶ月続けた結果【PV数】 CSSを使って自動でナンバリングする方法 ストレングスファインダーの診断で強みを見つけよう【4つのステップ】