Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

【初心者でもわかる】スクロールボックスの作り方と、スクロールバーの消し方

$
0
0

どうも7noteです。スクロール関連のCSS

ページ内にスクロールできる要素の作り方です。

スクロールボックスの作り方

共通のHTML

index.html
<divclass="box"><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>

縦向きスクロールボックス

style.css
.box{width:200px;/* 横幅を200pxに指定 */height:200px;/* 横幅を200pxに指定 */border:1pxsolid#000;/* わかりやすくボーダーを引く */overflow-y:scroll;/* 縦方向にスクロール可能にする */}

scroll-y.gif

横向きスクロールボックス

style.css
.box{width:200px;/* 横幅を200pxに指定 */height:200px;/* 横幅を200pxに指定 */border:1pxsolid#000;/* わかりやすくボーダーを引く */overflow-x:scroll;/* 横方向にスクロール可能にする */}.boxp{width:400px;/* 親要素よりも大きくする */}

scroll-x.gif

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

style.css
.box{-ms-overflow-style:none;/* IE, Edge 対応 */scrollbar-width:none;/* Firefox 対応 */}.box::-webkit-scrollbar{/* Chrome, Safari 対応 */display:none;}

bar-none.gif

まとめ

横スクロールさせる時は、中の要素のほうが大きくないと、自動的に文章が改行されてしまうので、子要素に横幅を指定します。
スクロールバーがでないと、スクロールできているかわかりにくかったりするのでUI的にはあまりよくないかもしれませんが、どうしても消したいときにはCSSで消せます。

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ


Viewing all articles
Browse latest Browse all 8691

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>