スマホ
iPhone portrait 320 x 480 iPhone landscape 480 x 320 Crappy Android portrait 240 x 320 Crappy Android landscape 320 x 240 Nicer Android portrait 295 x 515 (equivalent desktop resolution) Nicer Android landscape 515 x 295 (equivalent deskto…
サイトのURLを入れるだけで、スマートフォンからの見た目を確認できる 「スマートフォン最適化診断レポート」http://www.howtogomo.com/jp さらに、質問項目に「はい」「いいえ」で答えると、 最適度を診断してくれる。※6ページに渡るPDFのレポート （左の図…
小さな観葉植物を扱うショップのスマートフォン用サイト。 jquery Mobileをフルカスタマイズしてスマホサイトを作る。 ピンチイン／ピンチアウト 下記のように、横幅を端末の画面幅に、初期の拡大率を100%に設定するとピンチイン／ピンチアウトの操作が可能…
フラワーショップのスマホ用通販サイト。 iPhoneに最適化。 ※スマホまたは Safari でご欄ください。Firefoxでは正常に表示されません。 CSS3のみでアニメーション 目的（効果） 注目してほしい部分に視線を誘導する 何かが起きたことを伝える このサイトで実…
<meta name="format-detection" content="telephone=no"></meta>
記述 index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>コウベデュカ</title> <meta name="viewport" content="width=device-width" /> <meta name="format-detection" content="telephone=no" /> <link rel="apple-touch-icon" href="img/home.png" /> </link></meta></meta></meta></head></html>
画像付きのリスト 各リスト項目内にimg要素を記述する img要素で指定した画像は80×80pxに自動的にリサイズされる <ul data-role="listview"> <li><a href="#page2"><img src="thumbnail1.jpg">Salmon</a></li> <li><a href="#page3"><img src="thumbnail2.jpg">Takuwan</a></li> <li><a href="#page4"><img src="thumbnail3.jpg">Kanpyou</a></li> <li><a href="#page5"><…</a></li></ul>
jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)作者: 西畑一馬,鍋坂理恵出版社/メーカー: アスキー・メディアワークス発売日: 2012/02/02メディア: 大型本購入: 7人 クリック: 185回この商品を含むブログ (11件) を見る
「jQuery Mobileでサイト構築をはじめる」 jQuery Mobileはタッチパネルに最適化されたUIウィジェットとAJAXによるアニメーション効果のついたスムーズなナビゲーションシステムを実装している。 ☆head 要素には meta 要素として viewport が設定されている…
「10分で分かるjQuery Mobileのキホン」 jQuery Mobileは、 HTMLのhead要素で、 jQueryのスクリプトファイル jQuery Mobileのスクリプトファイル jQuery MobileのCSSファイル 上記3つを読み込むだけで利用できる。 ☆jQuery Mobileを使ったWebページは、HTML5…
授業内で作ったスマホサイト 『Oh! tsumami』。 誤りとまではいかないけれど、修正したいところがでてきてしまい、修正方法を調べたが、分からず。メールで問い合わせ→待ち。 時間がなかったこともあり、トップページのサムネール用の小さい画像をレシピペー…
