モバイル対応サイトの作成メモ(PHP・CSS・JSON)-2

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

【投稿年月日】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等)でWebサイトを見やすくするために必要不可欠なのが、METAタグでviewportを指定すること。これをやらないと、中途半端に表示されてしまう。
 viewportの書式については様々なサイトで言及されているが、最も参考にしたのは下記ページ。
 
これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ
tech.nitoyon.com/ja/blog/20...
 
 以下、サンプル。
<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/...

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

おまけ(amazonの短縮リンク)

 スマートフォン向けページであるならば、広告リンクもスマートフォンを意識したい。amazonでは携帯端末向けページが用意されているので、パソコン向けの短縮リンク
amazon.co.jp/o/ASIN/[商品ID]/[トラッキングID]
を、
amazon.co.jp/gp/aw/d/[商品ID]/?tag=[トラッキングID]
に変更すればOK。
 ただし、amazonの携帯端末向けページは、必ずしもスマートフォン向けページではないため、通常のパソコン向けページにリンクさせた方がいいかもしれない。

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