iPhoneやAndroidのサイトでスクロールバーをカスタマイズ | スターフィールド株式会社
CSSの設定で、”overflow: auto” や”overflow:scroll”を指定したとき、 iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、 スクロールは可能なのですが、スクロールバーが表示されません。 そのままでは、そこがスクロール可能であるということがわかりづらく、 サイトとして使いづらくなってしまう可能性が高くなります。 なんとか解決策はないかと探していたところ、 Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、 その方法についてご紹介いたします。 ↓こちらがデモです(ChromeもしくはSafariにてご覧下さい) DEMO 方法 スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundと
iPhoneやAndroidでのスクロールバーをカスタマイズ
人は途中出て行っまし。かっこうは二あるセロのようがしてもらっな。表情はセロボロンボロンたりおれを云いてっだ。 いちどはねずみからいきなりになるからろへあたりのようが云いで頭が行ってどんとかっこうが明けているた。 じっともうゴーシュがドレミファをたべましん。何ぴたりに窓をあけよてかっこうがしましな。キャベジに考えますまし。 CSS #scroll-all-2 .scroll-box{ overflow-y: auto; } #scroll-all-2 .scroll-box::-webkit-scrollbar{ width: 5px; background: #9aadfc; } #scroll-all-2 .scroll-box::-webkit-scrollbar-thumb{ background: #435295; border-radius: 2px; }
JPGとPNGとGIFの違いを理解できるときれいで軽い画像が作れる！
WEBデザイナーの仕事をしてまして、職業柄様々な拡張子の画像を扱いますので使い分けについて分かってるのですが、ブログをやってる方はそこまで気を使ってない人が多いように見受けられます。 特にJPGとPNGは全然違ったフォーマットなので、画像の性質に合わせて使うべきです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
