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

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

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

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

共通のHTML

index.html

<div class="box">
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

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

style.css

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

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

style.css

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

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

style.css

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

まとめ

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

おそまつ！

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