iPhoneやAndroidのサイトでスクロールバーをカスタマイズ | スターフィールド株式会社
CSSの設定で、”overflow: auto” や”overflow:scroll”を指定したとき、 iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、 スクロールは可能なのですが、スクロールバーが表示されません。 そのままでは、そこがスクロール可能であるということがわかりづらく、 サイトとして使いづらくなってしまう可能性が高くなります。 なんとか解決策はないかと探していたところ、 Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、 その方法についてご紹介いたします。 ↓こちらがデモです(ChromeもしくはSafariにてご覧下さい) DEMO 方法 スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundと
translateプロパティでAndroid,iPhone端末で画像がちらつく件
あ、ども僕です。 最近、何かとスライダー的なやつを扱う機会が増えております。 よくあるスライダーですね。 こんな感じのやつですね。 画像がスーっと行くやつ。バナーなんかで良く見かけますよね。 これをスマフォンサイトでも実装しているのですが、マークアップは単純に <div class="slider"> <ul class="sliderLi"> <li><img src="yes.jpg" alt="no"></li> <li><img src="yes.jpg" alt="no"></li> <li><img src="yes.jpg" alt="no"></li> </ul> </div> こんな感じだったりします。 liの親要素であるulに-webkit-transform:translate(-350px,0px);などで 動かしてスライドしているかの様に実装するのですが、 スライ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
