サイバーガーデンbiz「スマートフォンサイト制作講座 名古屋」に参加しました!

Published

スマートフォン

スマートフォン


サイバーガーデンbiz 益子貴寛(ましこ たかひろ)さんによる「スマートフォンサイト制作講座 名古屋」に参加しました。とうとうセミナー3日目です。場所はベースキャンプ名古屋さんで行われました。今回はスマートフォンサイト制作講座ということで、実際にサイトを制作して学びました。

スマートフォンサイト制作のための知識

実際に手を動かす前にスマートフォンサイト制作にあたっての知識も教えてもらいました。全てではないですが、箇条書きにしておきます!

  • スマートフォンサイトを制作する際にはiPhoneを基準に制作すると安定する
  • 中でも縦のときの操作性を念頭に置いて制作する
  • 検証するためには白ロムを買ってきてWi-Fiにつなぐと、契約するよりお財布に優しい
  • Androidは画面サイズがバラバラなので、基本は320×480pxで考える
  • レスポンシブデザインはすべてのデザインを読み込んでまうため、案件によっては別に作るのかどうかを考える
  • iPhoneの場合はiOS5、6 Androidは2.3、4.0、4.1 Windows PhoneはIE9、IE10を気にして制作する
  • IE8はHTML5をサポートしていないので「html5 shiv」を入れる(HTML5.JP | HTML5 を IE や Firefox 2 でも使えるようにする方法)

スマートフォンサイト制作


スクリーンショット

スクリーンショット


今回実際にスマートフォンサイトを制作する際にhtml5を使いました。といっても1から自分で書いた訳ではなく、もらったファイルにはすでにHTMLが書かれていました。始めはXHTMLで書かれていたのですが、html5に自分で直すことでより変更点がわかりやすくなっていました。html5で画像は実際にコードを書き換えたサイトです。


スマートフォンサイトの制作のコツ


  • widthは「auto」で解除
  • floatは「none」で解除
  • スマートフォンに不要なUIは「display:none;」
  • font-sizeは「medium」が便利!
  • CSS3セレクタを使いまくる
  • ベンダープレフィックスは心配なら全部書く

apple-touch-icon


apple-touch-icon

apple-touch-icon

ホーム画面に追加ボタンの画像を設定できるようになります。114×114px無いといけません。iPhoneからみると角丸になっていますが、正四角形の状態でも自動的に角丸になってくれるそうです。これをクライアントさんに紹介すると、ちょっとできる人みたいに見えるかもしれません!
書き方:<link rel="apple-touch-icon" href="">
なんか、詳しそうなサイトも見つけましたので貼っておきます。
Web担当者Forum 「iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう」
とりあえず私もサイトのトップページだけ設定してみました〜!


jQuery mobile


最近よく聞くjQuery mobileに関してもお話がありました。簡単なものだと思っていたんですが、お話を聞くとどうやら難しいみたいですね。jQuery mobileとは、スマートフォンサイト用のフレームワークです。(*フレームワーク→フレームワークが主。ユーザーが合わせる。ライブラリ→ユーザーが主。ライブラリが合わせる。)フレームワークが主となっているので、使うなら始めから入れておくこと。そして、jQuery mobileスマートフォンサイトのみに使うことができます。
jQuerymobile 本家サイト

関連している記事

著者について

森田 かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。呼ばれれば登壇もします。Frontend Nagoya主催。ストレス発散方法はかっぱのイラストを描くこと。