スマホでリンクをタップした際のハイライトの表示を変更する | MJ-WAVE.COM
リンクをタップした際、iOSのMobileSafariでは薄いグレー、 Androidではオレンジの枠でハイライトされます。 その色や表示を変更してみようというエントリーです。 iOSの場合 iOSの場合はハイライトの薄いグレーの色を変更したり、消したりできます。 ちなみにiOS4では使えなかった:hoverはiOS5でタップ時に適用されます。 まずはハイライトの色を変更する場合。a要素に下記のプロパティを適用するだけです。 a { -webkit-tap-highlight-color: red; } ハイライトの色を消す(ハイライトさせない)場合は、値をrgbaで記述して消します。 a { -webkit-tap-highlight-color: rgba(0,0,0,0); } デフォルトのハイライトを消して、:hoverでオリジナルのタップ時アクションが付与できます。 a {-we
iOS・Androidのハイライト表示の指定について。
今回は iOS・Androidのハイライト表示の設定について 紹介します。 （以下 iOS→iOSのMobile Safari、Android→Androidの標準ブラウザ） リンクをタッチした時に出る(iOSでは)影だったり、(Androidでは)枠。 その色が設定出来るんです。 今回はCSS３を使った方法とjsを使った方法を紹介したいと思います。 iOS・Androidのハイライト表示の設定について まず初めに。 今回CSS３とjsを使う方法を紹介しますが、iOSとAndroid同じ記述で同じ動きをするものはｊｓを使用するもの、のみになります。 CSS３を使用する方法では、iOSとAndroid別々の方法を紹介しています。 それでは。 CSS３を使ったハイライト表示の指定 まず、CSS３でハイライト表示の設定をするにはこの記述をします。 -webkit-tap-highlight-co
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
