【HMTL/CSS】overflow: scrollのスクロールバーをカスタマイズする
今回はHMTLとCSSでoverflow: scrollのスクロールバーをカスタマイズする方法について解説します。 この方法を知ることで、基本のデザインから見た目を変更することができ、サイトの雰囲気に合わせたスクロールバーを作成することができます。 一緒に理解を深めていきましょう。 最終的なコードと実装 最初に今回作成したスクロールバーに関するコードを全て載せます。 HTML <div class="container"> <article> <h2 class="title">タイトル</h2> <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </article> <article> <h2 class="title">タイトル</h2> <p cla
iPhoneやAndroidのサイトでスクロールバーをカスタマイズ ｜ スターフィールド株式会社
CSSの設定で、”overflow: auto” や”overflow:scroll”を指定したとき、 iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、 スクロールは可能なのですが、スクロールバーが表示されません。 そのままでは、そこがスクロール可能であるということがわかりづらく、 サイトとして使いづらくなってしまう可能性が高くなります。 なんとか解決策はないかと探していたところ、 Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、 その方法についてご紹介いたします。 ↓こちらがデモです(ChromeもしくはSafariにてご覧下さい) DEMO 方法 スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://spyweb.media/2017/09/15/hide-and-custom-scrollbar-design/
