HOME ＞ (旧)開発者blog ＞ モバイル対応サイトの作成メモ（PHP・CSS・JSON）－２

モバイル対応サイトの作成メモ（PHP・CSS・JSON）－２

※以前別の場所で書いた文章を備忘的に書き記しておきます。

【投稿年月日】2013-03-09　【ジャンル】PHP/MySQL

　昨日エントリーした「モバイル対応サイトの作成メモ（PHP・CSS・JSON）」 の続き。
  1. モバイル判定はユーザーエージェントとセッションで実施（PHP）
  2. テーブルはデータをJSON化した上で処理
  3. モバイル用のMETAタグ設定
  4. モバイル用のCSSを作成
  5. チェックボックスはlabelのCSS等で対応
  6. モバイル広告の幅は最大320pxに

3. モバイル用のMETAタグ設定

　スマートフォン（iPhoneやandroid等）でＷｅｂサイトを見やすくするために必要不可欠なのが、METAタグでviewportを指定すること。これをやらないと、中途半端に表示されてしまう。
　viewportの書式については様々なサイトで言及されているが、最も参考にしたのは下記ページ。
　
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
tech.nitoyon.com/ja/blog/2013/02/15/viewport/
　
　以下、サンプル。
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />


4. モバイル用のCSSを作成

　上記viewportの指定と共にやっておきたいのがCSSの設定。スマートフォンは、たいていのCSSを理解するので便利です。
　全体に関係するCSSとして以下の指定をしています。
/**********************************************
CSSサンプル
**********************************************/
* {
 margin: 0;
 padding: 0;
}
body {
 -webkit-text-size-adjust: 100%;
 width: 100%;
}


5. チェックボックスはlabelのCSS等で対応

　スマートフォンの画面は小さいので、チェックボックスなどがクリックしにくい。クリック範囲を広げるためには<label>を使えばよい。
　なお、iPhoneやiPadでは<label>が反応しないらしいので、おまじないとして「onclick=""」を付加する。
/**********************************************
HTMLサンプル（チェックボックス）
**********************************************/
<label for="label_1" onclick=""><input type="checkbox" name="label_1" id="label_1" value="1" />Yes</label>
<label for="label_2" onclick=""><input type="checkbox" name="label_2" id="label_2" value="2" />No</label>

　合わせてCSSで<label>を装飾すると、更に使い勝手が向上する。
/**********************************************
CSSサンプル（チェックボックス）
**********************************************/
label {
 display:inline-block;
 padding: 5px;
 background:#eff;
 border:1px solid #aaa;
}


6. モバイル広告の幅は最大320pxに

　スマートフォンの横幅はパソコンに比べて狭い。画像を扱う場合、サイズに注意が必要となる。バナー広告があるなら尚更である。
　一般的にスマートフォンで使用する画像サイズはどれくらいなのか。GoogleのAdSenseの下記ページが参考になる。

使用できるモバイル広告のサイズ
support.google.com/adsense/bin/answer.py?hl=ja&...

　上記によると、スマートフォンのモバイル広告においては（320×50）や（300×250）が大きい部類に入る。よって、バナー広告など、画像の横幅は320ピクセルを最大値とするのが無難だということが分かる。

おまけ（amazonの短縮リンク）

　スマートフォン向けページであるならば、広告リンクもスマートフォンを意識したい。amazonでは携帯端末向けページが用意されているので、パソコン向けの短縮リンク
amazon.co.jp/o/ASIN/ [商品ID]/[トラッキングID]
を、
amazon.co.jp/gp/aw/d/ [商品ID]/?tag=[トラッキングID]
に変更すればＯＫ。
　ただし、amazonの携帯端末向けページは、必ずしもスマートフォン向けページではないため、通常のパソコン向けページにリンクさせた方がいいかもしれない。
HOME ＞ (旧)開発者blog ＞ モバイル対応サイトの作成メモ（PHP・CSS・JSON）－２

EDIUNET | PHP/MySQL | 独り言 | 提供サービス | JavaScript