• HTML

HTMLでスクロールバーを表示させる方法

投稿日:2020年12月17日（最終更新日:2022年01月28日）

HTMLで表示させるスクロールバーとは？

HTMLとCSSを用いることでサイト内のコンテンツを一部だけ見えるようにし隠れた部分をスクロールして見るようにすることが可能です。

通常

スクロールバーを表示

HTMLとCSSの記述の仕方

スクロールバーを表示させたい要素に対し、CSSで表示する高さや幅を指定した上で、overflowプロパティでscrollを指定します。

CSSのoverflowプロパティについて詳しくはこちら

#scrollbar{
  height:200px;
  overflow-y:scroll;
}
<p id="scrollbar">
吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
</p>

まとめ

スクロールバーを表示させる以外にも別ページとして作成したり、PDFデータを用意してを開けるようにするなど、 見せ方は他にも存在します。サイトを見る人が一番見やすい方法を選ぶことが大切です。