結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari
36,087views／投稿 2015-08-16／更新 2019-02-17 ［この問題はiOS9から解消されてます。］ iOSのSafariで、:hoverに事件が起きています。 CSSでaタグに:hoverで何かの変化を施してある場合は、そのマウスオーバー変化が１クリック換算で止まってしまい、リンク先に飛ばない確率が高い感じです。要は２回クリックしないとハイパーリンク先にページ遷移しないです。iOS 8.4.1のiPhoneやiPadなどタッチデバイスでの話です。 １回タップ（a:hover描画処理のみで止まる） ２回タップ（やっとリンク先に飛ぶ） テキストリンク系は大丈夫ですが、「画像の透かし」や「お申込はこちら」的なボタン装飾も該当していそうです。 ［追記］サンプルページを作りました。iOSデバイスで確認してみてください。Chromeもどうやら対象のようです。 :hover事件の
インテル、無償のHTML5アプリ開発環境「Intel XDK」を公開。iOS/Android/Kindleなどクロスプラットフォーム対応
インテル、無償のHTML5アプリ開発環境「Intel XDK」を公開。iOS/Android/Kindleなどクロスプラットフォーム対応 インテルは、先週4月10日から11日かけて中国北京で開催された「Intel Developers Forum Beijing 2013」（IDF Beijing 2013）において、クロスプラットフォームに対応したHTML5アプリケーションの開発ツール「Intel XDK」を発表しました。 Intel XDKはブラウザ上で動作するHTML5アプリケーション開発ツール（ChromeブラウザとJavaのインストールが必要）。HTML/CSS/JavaScriptで開発したアプリケーションを、PhoneGap機能でビルドし、iOS/Android/Kindle/Facebookなどのアプリケーションが開発できます。開発したアプリケーションは、各アプリストアで販
アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
DeNAが明かすHTML5でのソーシャルゲームの作り方【本日のスライド】 / GameBusiness.jp
スマートフォンにてソーシャルゲームを作ろうとすると、HTML5を中心にブラウザで動作するもの、もしくはネイティブアプリでの提供ということになります。モバゲータウンやグリーはその両方をサポートしています。ネイティブアプリの作り方は既に文献も多数なのですが、HTML5となるとまだ十分とは言えません。この資料は必見です。 「HTML5@iPhoneゲーム開発」はディー・エヌ・エーのスマートフォン開発グループの岸弘倫氏が「DeNA Technology Seminar #3」での講演用に作成したものになります。同社では北米のMiniNation向けにiPhone『Pirate Nation』(海賊トレジャー)をHTML、CSS、JavaScriptで開発して提供していて、そのノウハウを凝縮したものです。 『Pirate Nation』は冒頭の括りで分けるとブラウザで動作するアプリということにな
ブロック要素にいとも簡単にiOS風の通知件数を表示できる「Badger」:phpspot開発日誌
Badger - Super sexy iOS style badges for jQuery ブロック要素にいとも簡単にiOS風の通知件数を表示できる「Badger」 $(element).badger(22);みたいに実行すると次のようにブロック要素に通知件数が追加されるというもの。 ちょっとめんどくさそうな処理もたった１行で実行できるのは有難い限りです。 既存の数値にプラスしたり、コールバック関数の指定なんかもできちゃいます。 関連エントリ div全体をクリッカブルにするjQueryプラグイン「DIV LINKER」 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 良い感じの水平アコーディオン実装jQueryプラグイン「liteAccordion」
iPhone等での表示をPCで確認出来るAir製のシミュレーター・Mobilizerがローカルファイルにも対応出来るし、割と良かった
iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。 シミュレーター（エミュレーター？よくわからｎ）はいくつかありますが、選択肢の一つとして。WinでもMacでもOKです。完璧ではないですけど、今までで一番良かった気がしました。もともと優れたシミュレーターはまだ無い気がしますしね・・・あるのかな？ｗ 動画あったので貼っておきました。iPhone4は勿論、Plam PreやBlackBerry、HTCなど4種のデバイスを同時に確認出来ます。ローカル上のHTMLも動作確認出来ますよ。Airアプリなので動作にはAdobeAirが必要です。 4つ同時に起動可能 日本なら、基本的にiPhoneとAndroidだけあれば
マイコミジャーナル｜【レポート】iPhone 4に対応したWebサイトを作る方法（2010/07/05）
The WebKit Open Source Project iPhone 4にはRetinaディスプレイと呼ばれる高解像度ディスプレイが搭載されている。これは従来のiPhone 3GSの4倍の解像度にあたり、その美しさはiPhone 4の売りのひとつになっている。iPhone 4 Retinaディスプレイの美しさはユーザを満足させるものかもしれないが、同時に、WebデベロッパやWebデザイナに対してこれまで議論に上がっていた「High DPIに対応するWebサイト」という課題を実感させるものにもなった。 サイズが同じでディスプレイの解像度だけが上がるということは、従来と同じ方法でレンダリングすればその分小さく表示されることを意味している。これでは読めたものではないため、見やすいサイズまでスケールを上げる。iPhone 3GSとiPhone 4のケースなら、縦を2倍、横を2倍にすればいい。
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
iPhone対応Webサイト構築入門（前編）：SourceForge.JP Magazine
iPhoneにはWebブラウザとしてMac OS X/Windows用のSafari（以下、PC版Safari）のサブセット版が搭載されている。iPhoneのSafariでは一般的なWebサイトのほとんどが閲覧可能だが、Appleが提供している「iPhone向けのWebサイトデザイン」に従ったデザインを施すことで、iPhoneで閲覧した際により操作しやすいWebサイトを構築できる。本記事では、このようなiPhone向けのWebサイトを作成するテクニックを紹介する。 なお、以下では主にiPhoneについて述べているが、iPod touchに搭載されているSafariについても仕様はまったく同一だ。 iPhone版Safariの特徴 iPhoneに搭載されているSafariは、PC版Safariに採用されているレンダリングエンジン「WebKit」を使用している。また、フォントについてもMac
スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ | バシャログ。
禁煙してから３ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます
Viewport [iPhone生活]
*device-widthはiPhone横持ちの場合でも必ず320px、device-heightはiPhone縦持ちの場合でも必ず480pxとなります 例えば以下は、Viewportの横幅がiPhoneのディスプレイのサイズで、倍率は1、2倍まで拡大可能、という内容です。 描写のプロセスを検証するに当たっての条件 以下の説明では複雑な状況を説明する場合もあるため、特定の語句を特定の意味でのみ使用しています。特定の語句は以下です。 viewport Viewportのメタタグで指定した値または後にSafariが計算した値。initial-scale/width/heightの3つ。 コンテンツ（サイズ） HTMLに設置したコンテンツのサイズ ドキュメント（サイズ） 余白を含めたHTML全体のサイズ。ウィンドウよりも大きい場合は、スクロールすることで見ることが出来る全体のサイズ。 ウィンドウ
iPhone 4 の CSS を切り替える方法
携帯電話 (Nokia, Sonye Eicsson, iPhone) やMac、写真、吉田カバン、スマートフォンサイト制作 (HTML5, CSS3) などについてのブログ iPhone 4とiPhone 3G/3GSとで、スタイルシートを切り換える方法を考えてみました。 iPhone 4のディスプレイ解像度は従来機と比べて縦横それぞれ2倍になりましたが、iPhone 4のSafariではviewportを従来どおり「width=device-width」と指定しても、320×480ピクセルの画面を2倍に拡大して表示されるため、ディスプレイ解像度の違いを考慮しなくても、従来と同様に表示できます。 しかし、これでは画像にジャギーが発生してしまうので、iPhone 4を区別できないかと色々探っていたところ、JavaScript（DOM？）に「window.devicePixelRatio」と
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
Titanium - JavaScript で iPhone/Android アプリを作る - naoyaのはてなダイアリー
Titanium Mobile は JavaScript で iPhone/Android のアプリ (not Webアプリ) を開発できる開発環境。詳しくは Titaniumで始めるモバイルアプリ作成の基礎知識 (1/3)：Web技術でネイティブアプリを作れるTitanium（2） - ＠IT などに解説があります。 少し時間があったので、JavaScript で作るというのがどんな感じか試してみました。作ったアプリは こんな感じで TableView があり、選択すると WebView でアプリ内ブラウザが立ち上がる、ブラウザはツールバーで「戻る」や「リロード」が可能。あとはタブコントロールがあったり･･･という単純なもの。初期起動画面のサイトリストは、HTTP でローカルに立てたサーバーから JSON で読み込んでいます。 Web上のドキュメントを見ながら2, 3時間試行錯誤で一応の
iPhone向けWebサイトの制作等に役立ちそうな情報まとめ - かちびと.net
iPhone向けのWebサイトを制作する 際に役立ちそうな情報のまとめです。 情報が多くて混乱し始めたので、個人 的なメモ。iPhone関連のWeb制作情 報は基本的に載せています。アプリ 制作とかそっち系はたいして無いの でご了承下さい。 個人的にグッと来たiPhone / iPad周りの情報をメモ的にまとめておきます。素材とかフレームワークとかTipsとかそういうの中心で、SDKとかObjective-C的な情報は無いです。順不同。 フレームワークとかスクリプト WebアプリとかiPhoneサイト向けのフレームワークとか。 jQuery Mobile スマートフォン向けのjQuery公式ライブラリ。リリースが待ち遠しいですね。 jQuery Mobile Sencha 以前触ってみたので記事にしました。HTML5とjsのみのWebアプリ向けフレームワーク。 Sencha Titaniu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5とCSS3を使ってスマートフォン向けサイトを構築 － iPhone版Yahoo!JAPANトップの開発事例紹介
Webサイトをスマートフォン対応してと言われた時に見ておきたいサイトまとめ｜caraldo.net | WebとiPhoneとロードバイクが大好き！