タグ タッチデバイス
人気順 5 users 10 users 100 users 500 users 1000 users[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... 続きを読む
タブレット向け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と... 続きを読む
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ | コリス
2014/01/20
618 users
レスポンシブ
コリス
ウェブデザイン
切り口
共感
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大き... 続きを読む
高品質なものを探すのが難しい、タッチデバイスのジェスチャーをイラスト化したアイコン素材 -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
スワイプ操作に対応したイメージスライダーを実装するスクリプト・Swiper - かちびと.net
2012/12/21
61 users
スワイプ操作
イメージスライダー
net
イメー
備忘録
タッチデバイスのスワイプ操作に 対応したイメージスライダーの ご紹介。ありそうであまり見かけ ないので一応備忘録・・・イメー ジスライダーと書きましたが、 基本何でもいけるみたいです。 スワイプ操作に対応したスライダーです。 Swiper 実機でも確認したところ、問題なく動作しました。動作も軽量でなかなかいい感じです。 スライダーの中にスライダーをネストする事も出来ます。縦やグループごとにスライド... 続きを読む
スマフォやタブレットに最適なナビゲーションの考察 -見た目のレスポンシブではなく操作性で！ | コリス
2012/11/08
206 users
コリス
レスポンシブ
ナビゲーション
各デバイス
考察
スマートフォン、タブレット、ラップトップタイプのタブレットなど、タッチデバイスに最適なナビゲーションの考察を紹介します。 単に見た目のレスポンシブではなく、操作性を考慮したレスポンシブです。 Responsive Navigation: Optimizing for Touch Across Devices 下記は各ポイントを意訳したものです。 各デバイスのサイズ 各デバイスのタッチ方法 タッチデ... 続きを読む
タッチデバイスに適したMetro UIのスタイルを使ったTwitter Bootstrapベースのフレームワーク -BootMetro | コリス
2012/10/02
112 users
BootMetro
コリス
フレームワーク
Metro UI
Archive by month 2012年10月 (7) 2012年9月 (49) 2012年8月 (59) 2012年7月 (65) 2012年6月 (57) 2012年5月 (37) 2012年4月 (40) 2012年3月 (39) 2012年2月 (41) 2012年1月 (32) 2011年12月 (37) 2011年11月 (40) 2011年10月 (45) 2011年9月 (52... 続きを読む
[JS]キャプションのアニメーションがかっこよすぎ、スマフォもIEも対応のコンテンツスライダー -iView Slider | コリス
2012/07/24
287 users
コリス
jQuery
キャプション
スライダー
iframe
画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサ... 続きを読む
タッチデバイスに最適化されたポートフォリオ用のWordPressのテーマ -Touchfolio | コリス
2012/05/27
67 users
iPhone
コリス
キャプチャ
階層
ナビゲーション
Touchfolioのデモ Touchfolioの特徴 Touchfolioのインストールと使い方 Touchfolioのデモ デモはiPhone, iPadなどのタッチデバイスでも、デスクトップでも、どちらでも閲覧可能です。 まずは、デスクトップ時のキャプチャから紹介します。 デモページ：デスクトップ幅1200pxで表示 デモでは第二階層が5つあり、通常通り左のナビゲーションから階層を移動するこ... 続きを読む
jQuery UIをタッチデバイスに対応させるためのライブラリ・jQuery UI Touch Punch - かちびと.net
2012/04/28
167 users
jQuery UI
net
iPhone
リサイズ
備忘録
jQuery UIをタッチデバイスに対応させる ライブラリ・jQuery UI Touch Punchの ご紹介です。いつか使うかも、と思った ので備忘録。これを見て、そういやスマ フォでjQuery UIを試したことが無いこと に気が付いた次第です・・ jQuery UIのドラッグとかリサイズとかソートとかをiPhoneなどに対応させるためのライブラリです。そういやjQuery UIはタッチデバ... 続きを読む
習慣になるまでの UI と操作の変化 : could
2012/04/03
166 users
could
違和感
価値観
使い勝手
アプリ
UIプロセス 習慣になるまでの UI と操作の変化 タッチデバイスの操作が習慣化されている人とそうでない人では使い勝手の価値観が異なります。新しい価値や操作感を提供するアプリになればなるほど、先進的ではない親しみやすさを作りだすことが、使いやすさに繋がるでしょう。 タッチしてもらうための第一歩 タッチデバイスへの違和感や不安をもっている方はまだ少なくないと思います。 毎日の生活に登場するタッチデバ... 続きを読む
タップやピンチなど、タッチデバイス特有のイベントをサポートする2KBの軽量jQueryプラグイン・Hammer.js - かちびと.net
2012/03/26
58 users
ピンチ
タップ
net
2KB
ダブルタップ
タップ、ダブルタップ、ピンチや 長押しなど、タッチデバイス特有 のイベントをサポートしてくれる JSライブラリ・Hammer.jsのご紹介。 2KBと軽量なのでいつか使うと思っ て記事にしておきます。 jQuery依存みたいです。 ある世代にはなつかしいと思う方がモデルとして登場してます。 Hammer.js サポートしてるイベントはタップ、ダブルタップ、ピンチ、ドラッグ、長押しの5イベント。 動... 続きを読む
404 Blog Not Found:DHTML - 最低限文化的なスライダーの実装
2011/09/29
59 users
DHTML
ライブラリー
ブラウザー
モダン
スライダー
CAVEAT ライブラリー使っていないのは、オフラインでも動くようにしたかったというのが一つ。具体的にはこれのページ早送り/巻き戻しとか。 ごめんなさい。IEでは動きません。だれかこの子をIE--特にWindows Phoneで動くようにしてやってください それ以外の「モダン」ブラウザーでは気持ちよく動きます。特にタッチデバイス。 HTML ElementはDIVタグ二つだけ。最低限文化的。でも何... 続きを読む
[JS]大量ページの本やマンガをiPad/iPhoneで表示できる -Diva.js | コリス
2011/08/21
52 users
iPhone
コリス
Ajax
マンガ
スクリプト
デスクトップ用のブラウザをはじめ、iPadやiPhoneなどのタッチデバイスにも対応したドキュメントイメージビューアー用のスクリプトを紹介します。 表示はAJAXで行われるため、大量のページでも楽らく表示できます。 Di [...] 続きを読む
『一太郎』や『ATOK』を生んだ浮川氏「iPhoneに比べてAndroid端末はタッチ精度が悪い、驚いている」 : ２のまとめＲ
2011/05/29
57 users
iPhone
ATOK
メモアプリ
一太郎
タッチ精度
2011年05月29日 ➥ 『一太郎』や『ATOK』を生んだ浮川氏「iPhoneに比べてAndroid端末はタッチ精度が悪い、驚いている」 1：名無しさん＠涙目です。(福岡県) []：2011/05/28(土) 17:34:03.78 ID:cK6UYBt90● ?2BP(2) タッチデバイスを生かし、スラスラと手書きした文字をテキストに変換できるメモアプリ「7notes」。 2月にiPad版が登... 続きを読む
jQueryやHTML5を使ってiPhoneやiPad向け電子書籍を作成する為のフレームワーク・Laker - かちびと.net
2011/05/06
403 users
iPhone
jQuery
ワーク
iPad
フレーム
iPadや、iPhoneなどのタッチデバイス の普及で、個人的にも電子書籍への 関心がかなり高まりました。そんな中、 割と良さそうな電子書籍専用のフレーム ワークがあったのでメモがてらご紹介。 こういうの覚えておくと重宝しそうですね。 なかなか動きが良かったです。ただ読むだけの電子書籍ではなく、HTML5やjQueryを使って、より「電子」らしく表現出来ると楽しそうですね。 Laker HTML5... 続きを読む
メディアクエリでiPhoneやiPadにもレイアウトが最適化されているHTML5製のWordPressテーマ・Constellation Theme - かちびと.net
2011/04/27
96 users
iPhone
フレームワーク
ライブラリ
メディアクエリ
課題
iPhoneやiPadなど人気のタッチデバイス に対応させる事が最近では大きな課題 の一つでもあり、その方法としてライブラリ やツールを使う方法など様々です。WPも 多くの方法がありますが、今日のテーマは 既に最適化されたフレームワークになります。 css3のメディアクエリで様々なデバイスでも美しいレイアウトを保てるようにされているWPテーマのフレームワーク。HTML5を採用しています。 いままで... 続きを読む