スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。
自分はコーディングがメインなので、HTML/CSS/JSが主になっています。
制作する前に仕様の確認
スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。
ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド
スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき
iPhone iPad向けサイトを制作するためのいろいろ
こちらには表示できる画像の大きさやファイルサイズ、iPhoneがサポートする動画/音声ファイル形式などが載っています。
デザインをする
デザインページのリンク集
デザインページリンク集は以前紹介しましたので、以下からどうぞ
保存版、iPhone等のモバイルGUIデザイン作成用Photoshop用PSDファイル60個まとめ
こちらはデザインに使用するパーツを配布しているサイトのまとめ記事です。
スマートフォンサイトをデザインする7つのポイント
リキッド（可変幅）でデザインするなど、デザインのポイントについて書かれています。
コーディングをする
ASCII.jp：作って学ぶスマートフォン対応サイトの基本｜実践！iPhone＆Androidサイト制作ガイド
基本からわかりやすく説明しています。
スマートフォン向けサイトの作り方｜ユージック
こちらも基本から。JSやユーザーエージェントなども載っています。
【iPhone・iPad】サイト制作のまとめ
iPhone/iPadなどのスマートフォン独自タグが載っています。
JavaScriptを使う
jQuery Mobileを利用したスマートフォンサイト作成手順｜ユージック
有名なjQueryを使ったプラグインです。
jQuery mobileの class や div などの挙動サンプル
こちらのページにはjQuery mobileのclass指定の挙動がまとめてあります。
iPhoneページ製作用jQueryプラグイン「jQTouch」
こちらは昔紹介しました、jQtouchです。
jQTouchの使い方とclass指定による挙動のまとめ
こちらのページにはjQTouchのclass指定の挙動がまとめてあります。
jCarousel
カルーセルです。スマートフォンは画面が狭いので、カルーセルを使う事が多いかもしれません。
flickGal
こちらはフリックで動かす事ができます。使用するとスマートフォンっぽいねって言われます。
iPhone / iPadなどでposition: fixedが利用できる「iScroll」
スマートフォンに搭載されているmoblie WebkitではCSSのposition:fixed;が使えないので、もし固定表示したい場合はこちらのJavaScriptを使用します。
ASCII.jp：jQueryでiPhone風スライドパネルを作ろう｜実践！iPhone＆Androidサイト制作ガイド
まだ使用した事はないですが使うかもと思ってメモしてます。スライドで表示します。
iPhone用小ネタ
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iphone4だと3と比べて解像度が2倍なので少しぼやけて見えます。その対応方法。
iPhone向けのサイトを作るときのちょっとした気配り
iPhoneでタップしたときに色をつけたり、電話番号にリンクをつけない方法などが載っています。
iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法
inputのtype属性によってキーボードが変わります。知らなかった・・・
コメント
スマートフォンサイトの需要が高まりつつあるので、勉強がてらアスパラガス用に作ってみました
こんにちわ(・∀・) ガラケーを卒業（ほぼ故障のため）し、ついにスマートフォンデビューを果たした☆MNE☆です。 そんなきっかけもあり、弊社WEBサイトに…
Appreciate the item conducive towards pretty good facts. Clearly fair-minded wen up! When i consistently complete definitely definitely not bourgeoning with these but brooding people performed some almost fervently buddy-buddy depredate in addition to I’m indubitable a number of people suavity this fewer regardless.