スマホのボタンタップUIをCSSとJavaScriptを使って良い感じにしてみる | TENPURA - 1→10design Lab -
スマートフォンのボタンのタップUIは、 iPhoneとAndroidではデフォルトのUIが異なります。 iPhoneでは黒く透過し、Androidでは黄色い枠がつきます。 VIEW DEMO ※ スマホで見て下さい。 iPhoneではデザインに余り影響が出ないのでいいですが、Androidは濃い色がついてしまうので、黄色を使っていないサイトのデザインでしたら、どう見ても不自然に目立ってしまします。 大半のスマートフォンサイトはこういったUIのままリリースされているのが現状です。 そういったデフォルトのタップUIを消すには下記のCSSを記述すれば消えます。 body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color:
iPhone/Androidなどwebkitのa:hover後、もとの状態に戻らないバグを修正したい - ハリーかつき・旧技術ブログ
従来のロールオーバーは 1)cssのa⇔a:hoverで背景を切り替える 2)JavaScriptでonmouseout⇔onmouseoverで背景もしくはimg srcを切り替える の二つの方法で実装可能だが、これをそのままスマートフォン向けに実装すると、下記のような不具合が起きる。 ・ボタンの色が変わったまま戻らない ・ブラウザのバックボタンで戻った際に色がノーマル時に戻っていない （ホバー時のままになっている） これは現状、cssではどうにもならない。Javascriptでonclick系のイベントハンドラの代わりにontouch系を用い、下記のように対応するほかない。 最後のwindow.addEventListenerはブラウザのBackボタンで戻ったときにrolloverで変化した画像もしくは背景色が残っていた場合クリアするための記述。 function smartPhone
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
