By U Zensen.

欲しいものはプログラミングで自分で作る。

【CSS】スマホでボタンを長押しした時に出る影を消す方法!!

2016 / 7 / 4 2016 / 8 / 7
CSS
スマホのボタンの影を消す

はじめに!!

こんにちは!ぴーすけです!

HTMLとCSSを使用してスマホ用のデザインをしている際に気がついたのですが、ボタンを長押しすると影ができますよね?

今回はその影を消す方法を調べたので報告いたします。

スポンサードリンク

影ってこれです!!

こういう影を消す

ちなみにこのボタンのある記事は前回書いたこちらです。JavaScriptでガチャを実装してみた記事です。

CSSで消せます!!

影消せた!

影を消したい要素に以下のスタイルを指定します。

CSS

-webkit-tap-highlight-color:rgba(0, 0, 0, 0);//ハイライトカラーを透明にする

これだけです!rgbaの値を変えれば、他の色にもできるみたいですが、Androidではうまくいかないようなので、下手に指定しないほうが良いかと思います。

ちなみに!!

ボタンに書いてある文字を選択されないようにするためには以下のスタイルを指定すれば良いみたいです。これはPCの場合も関係あるものなので、指定しておくと気持ちの良い、押し心地の良いボタンになると思います。

CSS

-moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; user-select: none;

まとめ!!

以上となります。スマホでボタンを作る時にはボタンの押し心地を考慮して作ったほうがいいと思います!

この記事の指定をしておけば、押し心地の良い気持ちいボタンになると思うので、ぜひやってみてください。

Pocket

コメント

コメントを残す