【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
Hammer.jsを使って簡単にタッチジェスチャーを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 毎朝寒さで布団からなかなか抜け出せません、エンジニアのゆたろです。 みなさん、スマホのタッチジェスチャーの実装につまずいたことはありませんか？ 今回は、そんなときに便利なライブラリ「Hammer.js」をご紹介します。 hammer.jsを使ってみよう http://hammerjs.github.io/ まずは、上のリンクよりプラグインをダウンロードしちゃいましょう！ https://github.com/hammerjs/jquery.hammer.js ここではjQqueryプラグインとして使いたいので、jquery.hammer.jsも合わせてダウンロードしてください。 ダウンロードしたファイルとjQueryをHTMLに読みこませます。 <script src="jquery.js"></script> <script src="hammer.js"></script
[JS]スマホやタブレット向けの操作を楽しくするさまざまなアニメーションを実装できるスクリプト -Impulse
Bouncy Scrolling ※アニメーションGIFにしたらサイズがすごかったので静止画像です。 デモページには他にもたくさんのデモがあります。 Impulseの使い方 実装は各デモによってHTMLやJavaScriptが異なるので、「Pulldown Menu」で実装方法を紹介します。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ここは全デモ共通です。 <head> ... <script src="/scripts/impulse.js"></script> </head> Step 2: HTML ヘッダ、メニュー、コンテンツをそれぞれdiv要素で実装します。 <body> <div class="nav-header"> <div class="hamburger-menu-handle"></div> </div> <div class="pu
![[JS]スマホやタブレット向けの操作を楽しくするさまざまなアニメーションを実装できるスクリプト -Impulse](https://cdn-ak-scissors.b.st-hatena.com/image/square/b00ab7bf5a19e33db792ea0ed5fb6335ba4f97e7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090106.png)
高品質なものを探すのが難しい、タッチデバイスのジェスチャーをイラスト化したアイコン素材 -Touch Gesture Icons
タッチデバイスで人気が高いジェスチャーをイラスト化したアイコン素材を紹介します。 作者の方より、既存の30種類から新たに18種類のジェスチャーを追加したよ、と連絡を受けました。 Touch Gesture Icons ダウンロードできる素材のフォーマットは、PSDもベクターも揃っています。 .png（すぐ使う用） .psd（ウェブ制作用） .eps（紙用、いろいろ変更したい用） PNGは48, 64, 128, 256, 512pxの5種類のサイズが用意されており、PSDは.aiがスマートオブジェクトとして使われています。 利用にあたっては個人でも商用でも無料、とのことです。 詳しくはダウンロードファイルの「License.txt」をご覧ください。 ジェスチャーは、全部で48種類。 まずは、既存の30種類。タップ・ピンチ・スワイプなどが揃っています。
jQuery Finger
jQuery Finger unifies click and touch events by removing the 300ms delay on touch devices. It also provides a common set of events to handle basic gestures such as press, double tap and drag. Very small (< 0.5kb gzipped), it is focused on performance, is well tested and also supports jQuery delegated events. Getting started You can give it a shot by adding the script right after jQuery: <script sr
スマフォアプリの操作が気持ちいいエフェクトがたくさん！タップ操作時のエフェクトのまとめ -Tapotype
Tapotype 掲載されている各エフェクトはタップやクリック操作で、実際にアニメーションで動作します。 サイト閲覧には、Safariをオススメします。 各エフェクトはカテゴリ別にまとめられており、それぞれ詳細ページも用意されています。
スマホのマルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」
スマホでのタップやスワイプなど、マルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」を紹介します。 Hammer.js １．機能 このプラグインを利用すれば、スマホなどのタッチデバイスで、 タップ ダブルタップ スワイプ 長押し トランスフォーム（ピンチイン・ピンチアウト） ドラッグ のイベントを判断できるようになります。 （クリックで拡大） ２．プラグインのダウンロード 公式サイトにある「DOWNLOAD SOURCE」をクリック。 ３．使い方 jQueryと、ダウンロードアーカイブに含まれるhammer.jsおよびjquery.hammer.jsを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src
無料で商用利用OKなタッチ操作のジェスチャー30種類を表したアイコン「Touch Gesture Icons」
スマートフォンやタブレットなどタッチスクリーンで操作する場合に使える操作のジェスチャー30種類を表したアイコンが「Touch Gesture Icons」。個人で使うだけでなく商用利用も可能、ファイル形式はPNG、PSD、EPSの3種類があります。 Touch Gesture Icons | Mobile Tuxedo http://www.mobiletuxedo.com/touch-gesture-icons/ シングルタップ ダブルタップ プレス＆ホールド ホールドタイマー 上へスワイプ 下へスワイプ 左へスワイプ 右へスワイプ ピンチアウト ピンチイン 2本指でタップ 2本指でダブルタップ 2本指でプレス＆ホールド 2本指でホールドタイマー 2本指で上へスワイプ 2本指で下へスワイプ 2本指で左へスワイプ 2本指で右へスワイプ 2本指で左に回転 2本指で右に回転 3本指で上へスワイ
iPhone/iPad/iPodをマルチタッチ可能なトラックパッドに変える「TRiCKtrac」
PCでの操作はマウスやノートPCについているタッチパッドで行う、というのが主流ですが、iPhoneやiPad・iPodをマルチタッチ可能なトラックパッドに早変わりさせ、PC上の操作もタッチスクリーンでタップ・スワイプ・ピンチアウトで行うことを可能にするのが「TRiCKtrac」です。 TRiCKtrac -- Indiegogo http://www.indiegogo.com/TRiCKtrac ムービーは以下から。 TrickTrac 8 24 - YouTube トラックパッドとして使用する時のiPad画面はこんな感じ。 使用時には、画面右上にツールバー、真ん中に操作場所があり、画面下部のエッジに触れるとファイルエリアが出現します。 TRiCKtracを使えばこれまでPC上においてマウスで行っていたクリックやドラッグアンドドロップといった操作を、全て指で操作することが可能。 タップし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gestures