スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。
自分はコーディングがメインなので、HTML/CSS/JSが主になっています。
制作する前に仕様の確認
スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に﹁これができない！﹂などの問題が回避できるかもしれません。
●ASCII.jp‥サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド
●スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき
●iPhone iPad向けサイトを制作するためのいろいろ
●スマートフォンサイトのデザイン集サイトのまとめ
●保存版、iPhone等のモバイルGUIデザイン作成用Photoshop用PSDファイル60個まとめ
●スマートフォンサイトをデザインする7つのポイント
●ASCII.jp‥作って学ぶスマートフォン対応サイトの基本｜実践！iPhone＆Androidサイト制作ガイド
●スマートフォン向けサイトの作り方｜ユージック
●︻iPhone・iPad︼サイト制作のまとめ
●jQuery Mobileを利用したスマートフォンサイト作成手順｜ユージック
●jQuery mobileの class や div などの挙動サンプル
●iPhoneページ製作用jQueryプラグイン﹁jQTouch﹂
●jQTouchの使い方とclass指定による挙動のまとめ
●jCarousel
●flickGal
●iPhone / iPadなどでposition: fixedが利用できる﹁iScroll﹂
●ASCII.jp‥jQueryでiPhone風スライドパネルを作ろう｜実践！iPhone＆Androidサイト制作ガイド
●︻Webアプリ︼iPhone4 で画像をきれいに表示する色々な方法︻試行錯誤編︼ | KAYAC DESIGNER’S BLOG – カヤックの意匠部によるデザインやマークアップの話
●iPhone向けのサイトを作るときのちょっとした気配り
ASCII.jp‥サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド
●ASCII.jp‥サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド
スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき
●スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき
iPhone iPad向けサイトを制作するためのいろいろ
こちらには表示できる画像の大きさやファイルサイズ、iPhoneがサポートする動画/音声ファイル形式などが載っています。
●iPhone iPad向けサイトを制作するためのいろいろ
デザインをする
デザインページのリンク集
デザインページリンク集は以前紹介しましたので、以下からどうぞ
●スマートフォンサイトのデザイン集サイトのまとめ
保存版、iPhone等のモバイルGUIデザイン作成用Photoshop用PSDファイル60個まとめ
こちらはデザインに使用するパーツを配布しているサイトのまとめ記事です。
●保存版、iPhone等のモバイルGUIデザイン作成用Photoshop用PSDファイル60個まとめ
スマートフォンサイトをデザインする7つのポイント
リキッド︵可変幅︶でデザインするなど、デザインのポイントについて書かれています。
●スマートフォンサイトをデザインする7つのポイント
コーディングをする
ASCII.jp‥作って学ぶスマートフォン対応サイトの基本｜実践！iPhone＆Androidサイト制作ガイド
基本からわかりやすく説明しています。
●ASCII.jp‥作って学ぶスマートフォン対応サイトの基本｜実践！iPhone＆Androidサイト制作ガイド
スマートフォン向けサイトの作り方｜ユージック
こちらも基本から。JSやユーザーエージェントなども載っています。
●スマートフォン向けサイトの作り方｜ユージック
︻iPhone・iPad︼サイト制作のまとめ
iPhone/iPadなどのスマートフォン独自タグが載っています。
●︻iPhone・iPad︼サイト制作のまとめ
JavaScriptを使う
jQuery Mobileを利用したスマートフォンサイト作成手順｜ユージック
有名なjQueryを使ったプラグインです。
●jQuery Mobileを利用したスマートフォンサイト作成手順｜ユージック
jQuery mobileの class や div などの挙動サンプル
こちらのページにはjQuery mobileのclass指定の挙動がまとめてあります。
●jQuery mobileの class や div などの挙動サンプル
iPhoneページ製作用jQueryプラグイン﹁jQTouch﹂
こちらは昔紹介しました、jQtouchです。
●iPhoneページ製作用jQueryプラグイン﹁jQTouch﹂
jQTouchの使い方とclass指定による挙動のまとめ
こちらのページにはjQTouchのclass指定の挙動がまとめてあります。
●jQTouchの使い方とclass指定による挙動のまとめ
jCarousel
カルーセルです。スマートフォンは画面が狭いので、カルーセルを使う事が多いかもしれません。
●jCarousel
flickGal
こちらはフリックで動かす事ができます。使用するとスマートフォンっぽいねって言われます。
●flickGal
iPhone / iPadなどでposition: fixedが利用できる﹁iScroll﹂
スマートフォンに搭載されているmoblie WebkitではCSSのposition:fixed;が使えないので、もし固定表示したい場合はこちらのJavaScriptを使用します。
●iPhone / iPadなどでposition: fixedが利用できる﹁iScroll﹂
ASCII.jp‥jQueryでiPhone風スライドパネルを作ろう｜実践！iPhone＆Androidサイト制作ガイド
まだ使用した事はないですが使うかもと思ってメモしてます。スライドで表示します。
●ASCII.jp‥jQueryでiPhone風スライドパネルを作ろう｜実践！iPhone＆Androidサイト制作ガイド
iPhone用小ネタ
︻Webアプリ︼iPhone4 で画像をきれいに表示する色々な方法︻試行錯誤編︼
iphone4だと3と比べて解像度が2倍なので少しぼやけて見えます。その対応方法。
●︻Webアプリ︼iPhone4 で画像をきれいに表示する色々な方法︻試行錯誤編︼ | KAYAC DESIGNER’S BLOG – カヤックの意匠部によるデザインやマークアップの話
iPhone向けのサイトを作るときのちょっとした気配り
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.