タグ タッチデバイス
人気順 10 users 50 users 100 users 500 users 1000 usersCSSでhoverアニメーションの実行をPCのみに制御する｜BLACKFLAG
2021/11/10
5 users
iPhone
BlackFlag
メディアクエリー
CSS
iPhoneやAndroidのスマホやタブレットなどのタッチデバイスでCSSのhoverアニメーションをつけていると、タップ（クリック）動作にいろいろと支障がでることがあります。 CSSで指定するhover動作をPCのみに実行させるために、JavaScriptでデバイスの判定をしたりすることもありますが、CSSのメディアクエリーだけでも制御... 続きを読む
タッチデバイスも完全サポート！さまざまなスライダーをシンプルなコードで実装できる軽量JavaScript -Tiny slider | コリス
2019/07/17
35 users
バニラJS
ライブラリ
コリス
単体
HTML
デスクトップ・タブレット・スマホをサポート、シンプルなスライダーをはじめ、さまざまなスライダーを簡単に実装できる軽量JavaScriptを紹介します。 バニラJSで実装されており、他のライブラリへの依存はなく、単体で動作します。 HTMLは非常にシンプルで、外部ファイルと数行のコードで実装できます。 Tiny Slider -G... 続きを読む
ユーザーを補助するための「見せる」コンテンツ : could
2015/05/08
46 users
ジェスチャー
could
スクリーンショット
タッチ
従来
コンテンツデザイン ユーザーを補助するための「見せる」コンテンツ 従来は明確なテキストや、スクリーンショットを通して説明することが多かったですが、最近では動画が使われる機会が増えています。ユーザーに説明するのも、静止画面ではなく動画にするケースが増えてきました。 語るより見せたほうが早い スマートフォンをはじめとしたタッチデバイスが世の出回って 5 年以上経つわけですが、タッチ & ジェスチャーを... 続きを読む
タッチデバイスで本格MOBA始動―『Vainglory』の魅力を開発者に訊いた | Game*Spark - 国内・海外ゲーム情報サイト
2015/02/18
19 users
Vainglory
Spark
METAL
一線
iTunes
2014年9月、AppleのiPhone 6プレスカンファレンスで発表された、iOS専用の新規MOBAタイトル『Vainglory（ベイングローリー）』。Apple独自のグラフィックAPI「METAL」を採用するなど、既存のiOSアプリゲームとは一線を画しており、欧米のiTunesでは昨年末から配信中。Game*Sparkでは、先日発表のあった国内リリース決定に伴い、本作の開発元Super Evi... 続きを読む
[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity | コリス
2015/01/29
241 users
コリス
スライダー
スクリプト
ユーザー
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script ... 続きを読む
[JS]スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe | コリス
2014/12/16
66 users
PhotoSwipe
コリス
スクリプト
タブレット
スマホ
サポートするタッチジェスチャーの一覧 PhotoSwipeの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <!-- Core CSS file --> <link rel="stylesheet" href="path/to/photoswipe.css"> <!-- Skin CSS file (optional) --> <link rel... 続きを読む
あらゆる平面をタッチデバイスに変える、ポケットサイズの超小型プロジェクター「TouchPico」 | U-NOTE【ユーノート】
2014/08/05
23 users
u-note
平面
ユーノート
ポケットサイズ
最近は、ホームシアターなど家庭でもプロジェクターが容易に準備出来る時代になりました。ですが、それでも専用の設備が必要だったり、プロジェクター自体が持ち運びが大変だったりと不便でした。 続きを読む
selectを大きいボタンの複数カラム形式にできる「Multi-Column-Select」:phpspot開発日誌
2014/07/31
18 users
select
phpspot開発日誌
ボタン
selectを大きいボタンの複数カラム形式にできる「Multi-Column-Select」 2014年07月31日- Multi-Column-Select Demo selectを大きいボタンの複数カラム形式にできる「Multi-Column-Select」。 selectタグのUIを次のようなUIに変更してくれます。タッチデバイスでも使いやすそうで、マルチセレクトも可能。 submit時に通... 続きを読む
壁面をタッチデバイスに変える、Android搭載プロジェクターのTouchPico - TechCrunch
2014/07/29
32 users
TechCrunch
Indiegogo
ミッドレンジ
壁面
TouchPicoというプロジェクターがIndieGogoでのキャンペーンを開始した。これは、今年のCESにも登場したデバイスだ。ミッドレンジのAndroidデバイスとしての機能を持ち、また投影するスクリーンへのタッチを検知するためのカメラを搭載している。TouchPicoを使えば、壁面も大きなアンドロイドタブレットになってしまうわけだ。 先週、編集部ではこのTouchPicoに触ってみたが、その... 続きを読む
タブレット向けWebデザインのノウハウ40選 ―― 第1章 タブレットの機能を知る | Web担当者Forum
2014/03/03
158 users
Web担当者Forum
特性
タブレット
Web担トップ
機能
Web担トップ « 編集記事一覧 « タブレット向けWebデザインのノウハウ40選 « タブレット向けWebデザインのノウハウ40選 ―― 第1章 タブレットの機能を知る ««タブレット向けWebデザインのノウハウ40選 連載タブレット向けWebデザインのノウハウ40選 タブレット向けWebデザインのノウハウ40選 ―― 第1章 タブレットの機能を知る 「タッチデバイスの特性」「タブレットとPCと... 続きを読む
[JS]画像とコンテンツを交互に配置する簡単実装でパララックスコンテンツを作成できるスクリプト -Parallax ImageScroll | コリス
2014/02/10
44 users
コリス
パララックス
jQuer
レスポンシブ
スクリプト
ページをスクロールすると、パララックスのエフェクトで次々に画像とコンテンツをカーテンを引き上げるように表示するjQuerのプラグインを紹介します。 もちろんレスポンシブにも対応、またタッチデバイスではパララックスのエフェクトが重く感じることもあるのでオン・オフの設定もできます。 Parallax ImageScroll -GitHub Parallax ImageScrollのデモ Paralla... 続きを読む
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ | コリス
2014/01/20
618 users
レスポンシブ
コリス
ウェブデザイン
切り口
共感
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大き... 続きを読む
タッチデバイスでリストを並び替えたり削除したりできるUI実装ができる「Slip.js」:phpspot開発日誌
2014/01/15
45 users
phpspot開発日誌
UI実装
clear
リスト
Slip.js タッチデバイスでリストを並び替えたり削除したりできるUI実装ができる「Slip.js」 ClearというTODOアプリがあり... 続きを読む
高品質なものを探すのが難しい、タッチデバイスのジェスチャーをイラスト化したアイコン素材 -Touch Gesture Icons | コリス
2013/12/03
59 users
コリス
ジェスチャー
psd
EPS
ベクター
タッチデバイスで人気が高いジェスチャーをイラスト化したアイコン素材を紹介します。 作者の方より、既存の30種類から新たに18種類のジェスチャーを追加したよ、と連絡を受けました。 Touch Gesture Icons ダウンロードできる素材のフォーマットは、PSDもベクターも揃っています。 .png（すぐ使う用） .psd（ウェブ制作用） .eps（紙用、いろいろ変更したい用） PNGは48, 6... 続きを読む
iPad上でアプリ開発は、どこまでできるのか（4）：Googleリーダーの代わりがない？ ならば、自分好みのアプリを爆速で自作だ - ＠IT
2013/04/26
59 users
爆速
自作
feed
Googleリーダー
プログラ
iPad上でアプリ開発は、どこまでできるのか（4）：Googleリーダーの代わりがない？ ならば、自分好みのアプリを爆速で自作だ タッチデバイスで手軽にアプリを作れる新しい開発ツ－ルの概要や使い方を解説。プログラミングの基本も学べる連載です。今回は、自分好みのfeed（フィード）読み込みアプリの作り方などを紹介します。TouchDevelopなら1行のコードでリーダーを作れます。 前回の「プログラ... 続きを読む
[JS]チェックしておきたいjQueryのプラグインのまとめ -2013年3・4月 | コリス
2013/04/21
291 users
jQuery
lightbox
コリス
キャプション
補足説明
紹介済みから未紹介のものまで、最近リリースされたjQueryのプラグインをまとめました。 Intro.js ページのガイドを表示します。 Chardin.js オーバーレイでページの補足説明を表示します。 HCaptions 画像ホバーでさまざまなアニメーションでキャプションを表示。 SuperBox レスポンシブ対応で画像を拡大表示します、Lightboxの進化形。 tosrus タッチデバイス... 続きを読む
Modern UI のようなフラットデザインを目指して使いづらくなっている件について ｜ Developers.IO
2013/04/14
370 users
Developers.IO
Modern UI
iOS
一線
Windows 8 がリリースされてだいぶ日が経ちました。最大の特徴と言ってもよい Modern UI *1。モバイル端末をはじめとしたタッチデバイスに特化した大きめのタイル（ボタン）とタイポグラフィが一際目を引くデザインで、OS X や iOS のそれとは一線を画しています。 一方の Android。2011年2月にバージョン3.0である Honeycomb がリリースされ、それまでの 2.x ... 続きを読む
プレゼン用のスライドショーを実装する、わずか1KBなのに多彩なエフェクトを備えタッチデバイスにも対応したスクリプト -Bespoke.js | コリス
2013/03/27
95 users
コリス
jQuery
エフェクト
スクリプト
MITライセンス
複数のパネルを多彩なアニメーションで次々にスライドするMITライセンスのスクリプトを紹介します。 jQueryなどの併用はなく、単体で動作し、1KBと超軽量です。 Bespoke.js Bespoke.js -GitHub Bespoke.jsのデモ Bespoke.jsの使い方 Bespoke.jsのデモ デモでは5種類のアニメーションでスライドします。 操作は、デスクトップだとスペースバー・矢... 続きを読む
タッチデバイスに対応したフリーのLightbox・スライドショーjQueryプラグインまとめ6つ - W3Q
2013/03/26
54 users
lightbox
W3Q
【Liquid Slider】 スマートフォンのタッチ操作に対応したjQueryコンテンツスライダープラグイン。 Liquid Slider: A Responsive HTML5 jQuery Content Slider http://liquidslider.kevinbatdorf.com/ The Liquid Slider is a fully featured HTML5-ready... 続きを読む
スワイプできるLightBox実装jQueryプラグイン「Swipebox」:phpspot開発日誌
2013/02/15
70 users
lightbox
Swipebox
jQueryプラグイン
Swipebox | A touchable jQuery lightbox スワイプできるLightBox実装jQueryプラグイン「Swipebox」。 LightBoxが最初に出た時はタッチデバイスがこんなにも流行っているとは思いませんでしたが、今やタッチデバイスの勢いは留まることを知りません。 というわけで、タッチデバイスでも画像をスワイプで送ることのできるjQueryプラグインが公開され... 続きを読む
タッチデバイスにも対応したシンプルなLightboxを実装するjQueryプラグイン・Swipebox - かちびと.net
2013/02/08
71 users
lightbox
net
スマホのマルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」: 小粋空間
2013/02/01
33 users
小粋空間
jQueryプラグイン
Hammer.js
スマホ
スマホでのタップやスワイプなど、マルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」を紹介します。 Hammer.js １．機能 このプラグインを利用すれば、スマホなどのタッチデバイスで、 タップ ダブルタップ スワイプ 長押し トランスフォーム（ピンチイン・ピンチアウト） ドラッグ のイベントを判断できるようになります。 （クリックで拡大） ２．プラグインのダウンロー... 続きを読む
スワイプ操作に対応したイメージスライダーを実装するスクリプト・Swiper - かちびと.net
2012/12/21
61 users
スワイプ操作
イメージスライダー
net
イメー
備忘録
タッチデバイスのスワイプ操作に 対応したイメージスライダーの ご紹介。ありそうであまり見かけ ないので一応備忘録・・・イメー ジスライダーと書きましたが、 基本何でもいけるみたいです。 スワイプ操作に対応したスライダーです。 Swiper 実機でも確認したところ、問題なく動作しました。動作も軽量でなかなかいい感じです。 スライダーの中にスライダーをネストする事も出来ます。縦やグループごとにスライド... 続きを読む
スマフォやタブレットに最適なナビゲーションの考察 -見た目のレスポンシブではなく操作性で！ | コリス
2012/11/08
206 users
コリス
レスポンシブ
ナビゲーション
各デバイス
考察
スマートフォン、タブレット、ラップトップタイプのタブレットなど、タッチデバイスに最適なナビゲーションの考察を紹介します。 単に見た目のレスポンシブではなく、操作性を考慮したレスポンシブです。 Responsive Navigation: Optimizing for Touch Across Devices 下記は各ポイントを意訳したものです。 各デバイスのサイズ 各デバイスのタッチ方法 タッチデ... 続きを読む
スマフォやタブレットなどのタッチデバイスでちょっと面白いサムネイルプレビューを与える -Kort | コリス
2012/10/29
25 users
iPhone
コリス
ポパー
Webkit系
Safari
デスクトップのホバーだけでなく、タッチデバイスのタッチとスワイプでもかっこいいアニメーションを伴ったサムネイル画像のプレビューコンセプトを紹介します。 Kort デモはiPhone, iPadなどのタッチデバイス、デスクトップだったらWebkit系のChrome, Safariでご覧ください。 オススメはタッチデバイスです。 各デモは、サムネイル画像をタッチすると複数の画像がアニメーションで広がる... 続きを読む