HTMLとCSSでスクロール出来るブロックを作成する方法

今回は、HTMLとCSSのみでスクロールが可能なブロックの作成について紹介していきます。コピペで超簡単に実装可能なのでぜひ参考にしてみて下さい。

下記の様なスクロールブロックをHTMLで作成していきます。もちろんワードプレスでも簡単に可能です。

スクロールブロックの記述

HTMLでの記述は「div」にクラスをつけてその中にテキストを記述していきます。下記をコピペしてテキストは任意のものに変更して下さい。もちろん<p>タグを入れてもOKです。

<div class="example">
・スクロールします<br>・スクロールします<br>・スクロールします<br>
・スクロールします<br>・スクロールします<br>・スクロールします<br>
・スクロールします<br>・スクロールします<br>・スクロールします<br>
・スクロールします<br>・スクロールします<br>・スクロールします<br>
・スクロールします<br>・スクロールします<br>・スクロールします<br>
・スクロールします<br>・スクロールします<br>・スクロールします<br>
・スクロールします<br>・スクロールします<br>・スクロールします<br>
</div>

CSSはdiv要素に「overflow: scroll;」を付けるだけでOKです。スタイルシートに下記をコピペでOKです。

<style>
div.example {
width: 100%; /*ブロックの幅*/
height: 200px; /*ブロックの高さ*/
background-color: rgb(244, 188, 119 ,0.4); /*ブロックの背景色*/
overflow: scroll; /*スクロール*/
}
</style>

ワードプレスの場合はカスタムHTMLに、上記のHTMLとCSSをそのままコピペでOKです。

スクロールバーを非表示にする方法

スクロールバーを消したい場合は、IEとEdgeには「-ms-overflow-style: none;」を指定。Safariとchromeには「div.example::-webkit-scrollbar」に対して「display:none;」を指定します。

div.example {
overflow: scroll; /*スクロール*/
-ms-overflow-style: none;    /* IE, Edge 対応 */
}
div.example::-webkit-scrollbar{
display:none;   /* Safari, chrome 対応 */
}

以上が「HTMLとCSSでスクロール出来るブロックを作成する方法」