Webkit Detect Webkitからのアクセスを判別するスクリプト。 iPhone/iPod touchに対応してます。 Detecting WebKit with JavaScript http://trac.webkit.org/wiki/DetectingWebKit function isMobile() の結果で携帯端末のWebkitかどうか（＝iPhone/iPod tou…

フルスクリーンでWebを表示させる webアプリモード的な感じ。 上下のアドレスバーや、お気に入りに追加などのメニューバーが消える アドレスバーや戻る進むボタンでの移動ができなくなるため、Webアプリ内のナビゲーションをしっかりしておく必要がある。 ホ…

アイコンを用意する 57*57 png形式 ファイル名は「apple-touch-icon.png」 適当に四角いので作っておくと、自動でiPhoneアプリっぽいエフェクトがつくよ できたら、サーバーの適当なとこに置く ヘッダで呼び出す <link rel="apple-touch-icon" href="apple-touch-icon.png" /></link>

CSSをiPhone向けに切り替える CSS 3のメディアクエリというのを利用して、画面の横幅が480px(iPhoneを横にしたときの最大サイズ)以下になった場合にiPhone用のCSSに切り替えるような設定ができるよ。 <link media="only screen and (max-width:480px)" href="iphone.css" type="text/css" rel="stylesheet" /> </link>

を書いていくところ div#hoge ul.item li { padding: 7px 10px 5px; border-top: 1px solid #fff; /*ここんとこがそれっぽいポイント＞＜*/ border-bottom:1px solid #aea084;/*上に#fff、下に濃い目の色を指定すると、並べたときそれっぽくみえるよ*/ backg…

を書いていくところ。 hoge{ font-size: 20px; font-weight: bold; /* ↓なんかこうするとタイトルバーっぽいところでそれっぽく */ text-shadow: 0px -1px 0px #fff; /* ここんとこのカラーは背景色を弱くしたような色が合うかも。 */ /* わかんないけどちょ…