スマホのマルチタッチジェスチャーを判断できる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
iPhone/SafariでjQueryを使ったイベントのバインドにおける注意点 : nogunogu
こんにちは。のぐちです。 先日、このブログの存在が社内に告知されました。 開始からしばらくはひっそりと生きようということで特に教えていなかったのです。 で、早速というか何というか、社内の開発者からの応援メッセージ（ツッコミ）が届きました。 そのひとつが 「何故jQueryを使ってるのに、addEventListener してるのか？」 でした。 確かにわざわざ次のように書きました。 box.addEventListener(“touchmove”, touchHandler, false); 僕も最初はjQueryを使って $(“#box”).bind(“touchstart”, touchHandler); なんて書いたのですが、タッチしても全然反応がないので、 「ああ、touch系のイベントはjQueryが対応してないんだろうな」 と思い込んでいました。 が、このツッコミを機
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」 iPhone/iPadでダブルタップをJavaScriptで実装するで紹介してたダブルタップの実装方法をjQueryプラグインにしてみました。 利用方法 jQuery本体とjquery.event.dblTap.jsをhead要素などで読み込みます。 <script src="jquery-.min.js"></script> <script src="jquery.event.dblTap.js"></script> 後は「dblTap」をbindするとdblTapイベントが実装できます(クリックにも反応するようにしています)。 $("button").bind("dblTap",function(){ alert("duble tap"); }) デモ 初期設定では5
iPhone最適化 ~ viewportについて ~ - entacl Lab.
はじめに 最近はスマートフォンの普及率が格段に上がりました。それに伴い、スマートフォンに最適化したサイトを作成するのが当たり前になってきています。最適化といっても作りたいサイトによって方法は様々です。 可能であればリキッドデザイン（サイズ可変デザイン）にするのがベターですが、状況によりサイズを固定しなければならないパターンも多いはず。 まずはどのように表示させたいのか、しっかり確認する事が大切です。 iPhoneの画面サイズと解像度 画面サイズ iPhoneが縦向きの状態はportrait、横向きの状態はlandscapeといいます。 縦向き（portrait）のサイズ：320x480(px) 横向き（landscape）のサイズ：480x320(px) 縦と横では幅（width）が変わる為、幅320pxで作った場合、横向きにすると160px余ってしまいます。 その為、どちらに傾けても快適
要注意！1月15日から始まったFacebook広告画像、カバー写真の規約変更6個の勘違いポイント詳細解説（逆にあれはOKにｗ）
a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:
hg1088皇冠welcome-首页
您打开的这个的页面不存在！ 当您看到这个页面,表示您的访问出错,这个错误是您打开的页面不存在,请确认您输入的地址是正确的,如果是在本站点击后出现这个页面,请联系站长进行处理,祥云平台感谢您的支持!
今から始めるiPhoneコーディング｜クロノドライブ
何だか周りにiPhoneを持ってる人が増えてきたなぁと思う今日この頃です。 それにつれてiPhone用のサイトをコーディングする案件も増えて来ましたので、コーディングするときのポイントをまとめました。 iPhoneの特徴 まずは、iPhoneの特徴を見てみましょう。 一つの端末で複数の解像度を持つ iPhoneの特徴の一つとして、縦持ち・横持ちのときで横幅の解像度が変わります。 例えば、縦持ちのときは320pxで、横持ちのときは480pxとなります。 ※縦持ちのとき ※横持ちのとき そのため、320pxに最適化したコーディングをすると、横持ちのときに160px分の余白が空いてしまうため、320pxにも480pxにも対応出来るコーディングをする必要があります。 ※そのためには、デザインをしっかりと考えたものにしなければいけませんが…。 HTMLやCSSの実装状況はパソコンと同様 iPhone
レスポンシブWebデザインにする為に行った事のまとめ
ブログのデザインを変えました！（IEでの確認未）以前からモバイル対応もしたいと思っていたので、これを機にレスポンシブWebデザインを取り入れてみました。 今のところ800pxと480pxでデザインが変わる様にしています。忘れないうちにMedia Queriesの書き方、スマートフォンへの対応方法など、このブログでレスポンシブにする為に行った事をまとめてみました。 参考記事 edia Queriesの使い方やスマートフォンへの対応方法など下記の記事を参考にさせて頂きました。 Media Queriesの書き方 Media Queriesの書き方は3種類あります。このブログでは2.のスタイルシート内で画面サイズ事のスタイルを適用するようにしました。 1. スタイルシートをサイズごとに用意する スタイルシートをサイズごとに用意し、HTMLのヘッドを読み込む時に画面サイズによって適用するスタイルシ
マルチデバイス対応方法(viewport,CSSの出し分け)をまとめてみた - NEZU.log
初期値は端末によって異なるため、除いてあります。 それぞれpxや乗数で入力して調整できますが、ほとんどの端末にもれなく対応するためには、以下のように記述するのがベターかと思います。 <!-- ▼ユーザーの拡大、縮小あり --> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <!-- ▼ユーザーの拡大、縮小なし --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> user-scalable、つまりユーザーの拡大と縮小の可否で分けてあります。ユーザーはデフォルトで拡大できると認識していることがほとんどだと思うので、基本的には拡大縮小
【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ
【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ このブログでは、HTML5+CSS3+Javascriptなどの情報を定期的に提供していきます。 運営企業：株式会社ニーロク（http://i26.jp/）
ハイブリッドアプリというアプリ開発アプローチ
モバイル（スマホ、タブレット向け）アプリを開発する際に「ネイティブアプリで作るか？ブラウザアプリで作るか？」という議論は色々なとこでされているかと思います。 通常はアプリの目的・内容に応じて、それぞれのメリット・デメリットを考慮して選択する事になりますが、今回は第3のアプローチ「ハイブリッドアプリ」について考察します。 ハイブリッドアプリとは？ 本エントリーでのハイブリッドアプリとは、ネイティブアプリの中でWebView（アプリ内で動作する簡易ブラウザのようなもの）を使ってウェブコンテンツ（HTML5、CSS3、JavaScript）を配信するアプリを指します。 ブラウザアプリとの違いは、ブラウザからはアクセス出来ないデバイスの機能（カメラやノーティフィケーションなど）が利用可能になるため、ブラウザを起動していない時でも通知出来たり、各ストアにネイティブアプリ同様に申請が出来るといった違い
Webとネイティブの好いとこ取り？ ハイブリッドアプリ開発のススメ
はじめに はじめまして、最近「Nexus 7」が手放せないアシアルの岡本雄樹です。端末の性能向上もあいまって、HTML5を活用したハイブリッドアプリ開発の手法が注目されています。JavaScriptから利用できる機能が豊富に用意されたことや、CSS3の表現力豊かなスタイルが使えることから、HTML5でアプリを開発することが現実的になりました。 ハイブリッドアプリ開発とは、HTML5を中心としたWeb技術で、端末上で動作する、いわゆるネイティブ形式のアプリを開発する手法です。Web技術はモバイルのOSに関係なく共通です。つまり、一つのソースコードからAndroidとiOSの両方に対応したアプリを作ることができるわけです。Java言語も「Write once, run anywhere」という標語を掲げていたように、一度書いたプログラムをプラットフォームに依存せずに動かしたいというニーズは根強
Monaca
Mobile App Development Fast, Easy and Flexible.Cross-platform hybrid mobile app development platform and tools in the cloud GET STARTED FREE Monaca makes HTML5 hybrid mobile app development with Apache Cordova simple and easy. Monaca is the most open hybrid app development platform available and ready to be immediately plugged into your existing workflow and development environment. From Cloud IDE
おれはHTML5 Boilerplate(ボイラープレート)を使い始めるぞ！ジョジョーッ！！
おれはHTML5 Boilerplate(ボイラープレート)を使い始めるぞ！ジョジョーッ！！ 2012.11.20 | この方法お勧めです！ ほらみんなも！ | レスポンシブ ども、パープル・ヘイズのフィギュア買うかどうかどうしようかなあ。と悩み中のパープルです。表題でも叫ばしていただきました通り、今日はHTML5でサイトを構築していくためのベスト・プラクティスと言われているHTML5 Boilerplate(ボイラープレート)についてのお話です。知っている人は知っていますし、すでに使い初めているでしょう。というかこれを使わないと話にならないよ。ぐらいの感じかもしれません。 転換期を迎えたっぽいWEB制作環境 なにやら昨今は、インブラウザデザインや、Sassにless、フレームワークにパッケージ、レスポンシブでモバイルファーストで、プログレッシブ・エンハンスメントですから、WEBサイト構築
Initializr - HTML5 project - template
Wix is a top-ranked website builder, but its value for money is a mixed bag. Wix offers a range of pricing plans from $17 to $159 per month, billed annually. The prices increased in May 2024, with the entry-level plan… Read More »Wix Pricing 2024: How To Get The Best Deal Wix reigns supreme as our top website builder for 2024, outshining other platforms. With its unparalleled features, an expansiv
http://sanjyu.jp/blog/bootstrap-css-performance-12/
CSSフレームワークの一つであるBootstrapの簡単な使い方を紹介します。CSSを書いてて良く思うのですが、決まった挙動やレイアウトにする場合に毎回書くのがめんどくさくなるんですよね。 そういうときに役立つのがフレームワーク。このBootstrapもフレームワークの一つで既にCSSが記述されているファイルを読み込んで、HTMLにクラス属性を書くだけで簡単に使うことができます。 このブログでもBootstrapに切り替え、簡単にレスポンシブデザインを構築することができました。また、レイアウトだけでなくjQueryを使ってドロップダウンメニューやタブナビ、ツールチップなど一般的なWebアプリで使えるようなライブラリが入っています。 Bootstrapのダウンロード では早速使ってみましょう。まずはファイルのダウンロードをします。 Bootstrap 解凍すると中にはCSSファイル、
Groundwork CSS ♥ Say Hello to Responsive Design Made Easy
Built with SASS & Compass Groundwork has been built from the ground up with the incredibly powerful CSS preprocessor, Sass. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Flexible & Responsive Groundwork offers the most advanced responsive la
Bootstrapの固定幅レスポンシブデザインのメモ : CSS | FindxFine
履歴 愛知高等学校 東海大学文学部北欧文学科 東北大学大学院経済学研究科(中途退学) 個人サイト »Hiroshi Sawai »Info Town ご質問などありましたら下記アドレス宛へメールをお送りください。 info@findxfine.com WordPress テーマ、プラグインを公式テーマディレクトリ、公式プラグインディレクトリで公開しています。 テーマ WordPress › Theme Directory › kanagata プラグイン Category Archives « WordPress Plugins List Calendar « WordPress Plugins Min Calendar « WordPress Plugins Resize Editor « WordPress Plugins concrete5 Infotown Table 簡単な操作で
レスポンシブウェブデザインに対応したCSSフレームワーク「Bootstrap」の肝 | hijiriworld Web
Posted on: 2012/06/22 レスポンシブウェブデザインに対応したCSSフレームワーク「Bootstrap」の肝 Bootstrapの概要 Bootstrap とは、Twitter 社が提供する CSS フレームワークです。 実体は CSS と JavaScript で、決められたルールに従ってコーディングするだけで、いま流行りのいろいろな UI を作ることができます。 Bootstrap では LESS を採用しており、スタイルをカスタマイズして CSS をコンパイルすることができます。 LESS についてはこちら。 実際には、コンパイルされた CSS を読み込んで利用することになるので、LESS の仕組みを意識する必要はありません。 もちろん、コンパイルされた CSS を編集することもできます。 Bootstrap をはじめて使う時は、まずは一式ダウンロードして、いろいろ
メディアクエリー
この文書は「Media Queries (W3C Recommendation 19 June 2012)」の日本語訳である。日本語訳は参考情報であり、公式な文書ではない。また、翻訳に誤りがある可能性にも注意されたい。 原文の最新版 は、この日本語訳が参照した版から更新された可能性がある。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照されたい。 公開日: 2012-06-29 翻訳者: 矢倉 眞隆 <yakura-masataka@mitsue.co.jp> メディアクエリー 2012 年 6 月 19 日付 W3C 勧告 (Recommendation) この版: http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/ 最新版: http://www.w3.org/TR/css3-mediaqueries/ 最新
可変グリッドレイアウトで実現するレスポンシブWebデザイン（後編） | ADC - Adobe Developer Connection
Dreamweaver CS6 では、 デスクトップやスマートフォン、タブレットなど様々な画面サイズに適したコンテンツレイアウトを実現するための「可変グリッドレイアウト」機能は、「レス ポンシブWebデザイン」といわれる、CSS3の Media Queries を使用してワンソースでマルチデバイス対応させる振り分け方法を容易に実装するための機能です。 前編では、この「可変グリッドレイアウト」機能を利用して、実際に3つのデバイスでレイアウトが可変する大枠のHTMLまでを準備しました。 後編では、以下の様な作例のデザインを元にして、実際の細かい部分のコーディングにあたってのTipsや注意点を紹介いたします。 ※このサンプルサイトは本記事用に作成した架空のサイトであり、公式のページではありません。 モバイル→タブレット→デスクトップというCSSの継承順序と Media Queries まず、前編
Slideshow with jmpress.js | Codrops
Today we will create a slideshow using jmpress.js. The jQuery plugin that is based on impress.js will allow us to use some interesting 3D effects for the slides. You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The jQuery port jmpress.js let’s you use this library as a jQuery plugin with some added options. We want to show yo
【jQuery】Preziのようなアニメーションを実現するjQuery「jmpress.js」
こんにちは。今回はjQeryプラグイン「jmpress.js」を紹介します。 このjmpress.jsはimpress.jsのjQuery版で、ウェブページを一枚のキャンバスに見立て、様々なアニメーションを展開してコンテンツを表示します。まずはデモページを見ていただいたほうがはやいと思います。 http://jmpressjs.github.com/jmpress.js/#/home ※矢印キーまたはスペースで操作します。 まさにアニメーションがPreziのようです。というのも、実際にこのプラグイン制作者はPreziにinspireを受けて制作したからだそうです。私も試しに作ってみました。（デモを多少改良しただけですが。） http://demo006.hotcom-web.com/#/step-1 目が回って気持ち悪くなった方申し訳ありません。 コンテンツをボックス要素で囲み、位置情報を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://eightmedia.github.io/hammer.js/
Linker.in Domain Name Is Available to Buy - Domain Name Marketplace
showjin.me
1216彩票-官网平台
Read It Later
http://www.99lime.com/elements/
レスポンシブデザインに対応したCSSフレームワーク
http://jmpressjs.github.io/customize/