スマホでアニメーションするときはcss3の「translate3d」を使おう
Posted: 2011.09.16 / Category: javascript / Tag: CSS3, jQuery, アニメーション スマートフォン向けのサイトでアニメーションさせたいとき、PCサイトのようにjQueryのanimateを使ってしまうと動きがガタガタになってしまい。これがWebアプリの限界なのかー。って叫びそうになりますが、そんなときはcss3の「translate3d」を使えば滑らかに動きますよ。 jQueryのアニメーション たとえばある要素をクリックしたときスライドするアニメーションをjQueryで書くとこんな感じですね。 javascript $('#rect').click(function(){ $(this).stop().animate({'marginLeft' : '300px'}, 300); }); css3のアニメーション 同じことをcss
statCounter – Naofumi Kagami
以前に「ブラウザの使用シェア統計はどれが正確か？」という書き込みをしました。ブラウザの使用率統計としてしばしば引用されるNetMarketShareとStatCounterのどっちが信用できるかについての内容でした。 NetMarketShareもStatCounterもアクセスログ分析ツールです。Google Analyticsと同じようなものです。そしてNetMarketShareやStatCounterのツールが導入されているウェブサイトのすべてからデータを集めて、ブラウザの使用シェア統計を算出しています。 しかしここが大きな問題です。ウェブに関わっている人は一人残らずGoogle Analyticsのことを知っていますが、NetMarketShareにしてもStatCounterにしても、全く聞いたことがない人が多いのではないでしょうか。 それもそのはずです。Wappalyzerと
Googleモバイルフレンドリーテスト
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more. You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against t
スマートフォン(iPhone/Android)でhover (rollover) を実装したい - ハリーかつき・旧技術ブログ
touch系のイベントを使って、「touchしたらボタンを光らせて、離したら消える」 といった実装を行いたい場合。 cssの:hover疑似クラスは一応使えますが手を離しても色が戻らなかったので、こんな感じでtouch系のイベントで実装してみました。 $(function(){ var start = "touchstart"; var end = "touchend"; $(".touchHover").bind(start,function(){ $(this).addClass("touchstart"); }); $(".touchHover").bind(end,function(){ $(this).removeClass("touchstart"); }); }); <a href="#" class="touchHover">ボタン</a> a{background:#cc
スマホサイト最適化25の最新ルール | グロースハックジャパン | growth hack japan
Ryutaro Mori TwitterでGHJをフォロー！ FacebookでGHJをフォロー！ NEW スタートアップに欠かせない6種類の人間 検索エンジン大手グーグルが、スマホサイト最適化に関する大規模なリサーチを行いました。 その結果から導き出した「スマホサイト最適化25のルール」は、モバイル時代、特にtoCビジネスには欠かせない内容です。 調査に関して 本調査は、GoogleとAnswerLabの共同指揮の下に行われました。 モバイルサイトにとって最良のデザイン慣行を提言することを目的に行われた本調査は、以下の方法論で実行されています。 ・シカゴ・サンフランシスコにて、119時間のユーザービリティテストを敢行 ・iOS・Android両方を含むユーザーに調査を実施 ・ユーザーは、商品の購入、価格の調査、予約など、コンバージョンに関連するタスクを実行し、各サイトのユーザービリティを
Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices
We built screensiz.es to help you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from a variety of sources. For a better understanding of Pixel Density, check out this great post by Teehan+Lax. Our “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzz
スマートフォン向けページに最適な meta viewport の指定で迷う
スマートフォンでページが見やすくなるように、metaタグでviewportを指定。 試行錯誤の結果、以下の書式に決定。 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> viewportの属性の内容は以下の通り。 ・width デフォルトの幅は 980、範囲は [200, 10,000]。 つまり、viewportが指定されていない場合は、デフォルトは幅980pxでページが表示されるので、表示コンテンツが小さくなり、見にくくなる。 ・height デフォルトの高さは、width と縦横比から計算され、範囲は [223, 10,000]。 ・initial-scale ページが最初に読み込まれるときの拡大率。デフォルトではページ
iPhone、Android position:fixed 対応状況と対応方法 – LIQUID BLOG
iPhone、Androidなどのスマートフォンは、これまで position:fixed に対応していませんでした。 固定メニューの実装などに困っていたのですが、iOS 5で対応していました！ iOS 5 iPhoneやiPad、iPod TouchのMobile Safariは、iOS 5から position:fixed に対応しました！ 他にも、overflow:scroll などに対応しています。 via New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 Android 2.3 viewport で、content=”user-scalable=no” にすると対応できます。 Android 4.1
iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った
iPhoneやAndroidなどの人気の スマートフォン向けのJavascript製 フレームワーク・wink toolkitを触っ てみました。動作サンプルが豊富 で割と応用できそうだったので日本 語でサンプルを作ってみました。 スマートフォン向けのWebサイトやネイティブアプリに使えそうなJavaScript製のフレームワークです。沢山の動作サンプルがあって、内容もとっても分かりやすかったので（完全ではないけど）日本語サンプルを作成してみました。 スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜
NRHR » iPhone、iPadでinputタグなどの内側の影を消す
フォーム関連のパーツ見た目調整についてはブラウザ間の差異が激しく、いつも悩まされます。。。orz 今回はiPhone、iPadで勝手についてしまう内側の影やグラデーションについて。 inputタグについて。 inputタグの枠線や角丸ぐあいなどはborderの指定だけで指定可能。 でも、iPhone、iPadだけは内側に影が。 box-shadow:noneとかつけても消えず。 でも、以下の指定で消すことに成功！ -webkit-appearance:none; selectタグについて。 ・上記指定(-webkit-appearance:none)をselectタグにつけてみたら、グラデーションは消えるが、右側にある下向き矢印もすっぱり消える！ ・セレクトタグ自体に背景画像を設定しても、右側にある下向き矢印が消える！ ※FireFoxでは消えないので注意。 ・セレクトタグに
『200サイトのiPhoneデザインを見て感じたスマートフォンの最適化』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ 現在、私はiPhoneのWebデザインを集めた「iPhoneデザインボックス」を運営しています。 掲載しているデザインは、良いデザインだけでなく、レイアウトやUIなどにも注目しています。サイトを運営して、多くのサイトを見て感じたiPhone（スマートフォン）の最適化についてまとめてみました。 iPhoneデザインの最適化 目次デザインUIフルFlashURL デザイン当初のデザインの傾向としてグローバルメニューをアイコンにして、iPhoneのホーム画面を意識したデザインが流行っていました。 最近は、iPhone向けサイトの必要性が高まりとりあえず作った
【デザイン】 iPhoneアプリアイコンのデザイン過程晒してみた 【TimerCamera】
いちばんシンプルなiPhoneのセルフタイマーカメラアプリ、「TimerCamera」のアイコンを作った時の過程を晒しました。
NHKオンライン
よくご覧になる地域を選択してください。 選択した地域の「番組表」「ただいま放送中」「放送局」が自動的に表示されます。 現在設定中の地域：東京
SPIRAL VENTURES | スパイラルベンチャーズ
Advancing innovation through technology investments across Asia. 当社の前身である「IMJ Investment Partners」は、2012年にデジタルマーケティング事業を展開する株式会社アイ・エム・ジェイ（以下“IMJ”）の傘下で、独立した投資活動を行うベンチャーキャピタル子会社として国内に設立されました。2013年にIMJがカルチュア・コンビニエンス・クラブ株式会社（以下“CCC”）のグループ会社となって以降も、CCCグループの傘下で独立した投資活動を継続しつつ、拠点をシンガポールに移し、東南アジア向けファンドの運営を開始致しました。その後、2015年に新たに国内拠点を設立し、日本向けファンドの運営を開始致しました。 これらの事業拡大を踏まえ、2017年にCCCグループを離れ、独立したベンチャーキャピタル「Spiral
スマートフォンサイトで電話番号やメールの自動リンクを解除したい – helog
iPhoneやAndroidなどスマートフォンサイトでは、電話番号やメールアドレスらしき文字列があった場合に、自動でリンクが設定されます。 リンクをタッチするだけで、電話をかけれたりメールを送ることができるので、一見して親切な機能のように思われます。 しかし、あくまでブラウザが自動で検出しているので、その精度は完全ではありません。 長いメールアドレスがレイアウトの関係で折りかえってる場合や、電話番号の間にハイフンやスペースがある場合など、ブラウザがリンクの範囲を認識できずに、誤った番号への通知リンクとなる危険性があります。 例えば「aaaaa.bbbbb.ccccc@abc.jp」をクリックすると「ccccc@abc.jp」があて先にセットされるなど、実際起こるとなると恐ろしい事ですね。 自動リンクを無効にする このような問題を回避するために、自動リンクを無効にする方法があります。 電話番
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://mmenu.frebsite.nl/
App Icon Template
Mobile Patterns - UI UX Inspirational Gallery for iOS and Android
Sevnthsin
BLOG × WORLD ENDING