今回は、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でスクロール出来るブロックを作成する方法」