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

Programming

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

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました