今回は、「サイズを指定した要素を縦スクロールさせる方法」について紹介します。
サイズを指定した要素を縦スクロールさせる方法
完成形はこちら。
縦にスクロールできるのが分かると思います。
※ Google Chrome、Safari、Microsoft edge、Firefoxで動作を確認済み
HTML
<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
.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
