初心者のためのスマートフォンサイトを作るときに見ておきたいサイト

モバイル

スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。
自分はコーディングがメインなので、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属性によってキーボードが変わります。知らなかった・・・