2020/05/12 (更新日: 2020/05/13)

【HTMLだけ】ページ内にスクロールバーのボックスを設置する方法

HOW TO

こんにちは、ゾノです。

本記事では、HTMLだけでページ内にスクロールバー付きのボックスを設置する方法を解説します。簡単にコピペで実装可能なので、ブログやLPなどで、どうぞお試しください。

【HTMLだけ】ページ内にスクロールバーのボックスを設置する方法

HTMLだけで、ページ内にスクロールバーのボックスを設置する方法は下記のとおりです。

HTMLコードをコピペする
ボックスの幅を調整する

HTMLコードをコピペする

実装のイメージは、こんな感じです。

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

下記がソースコードです。

<div style="border: 1px solid #F0F0F0; width: 90%; height: 160px; overflow: auto;">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>