Google TV

Windows

Mobile

家庭用ゲーム機

従来の

携帯電話

iPhone

Android

PC用サイト モバイル用サイト

多重管理が発生

共通コンテンツ

PC用テンプレート モバイル用テンプレート

テンプレートで

デバイスに対応

00800

1

2

3

携帯サイト

iPhoneサイト

カーソルではなくタッチ操作を意識

グラデーションや

陰影などの表現

goo http://goo.ne.jp/

レイアウトは類似

CSS3 グラデーション・ 陰影・角丸などの表現

アニメーションを強化

CSS2

<div class="fnc-btn">

<label>一覧</label>

</div>

.fnc-btn > label {

background: -webkit-gradient /* グラデーション */ (linear, 0% 0%, 0% 100%, from(#6E799D), color-stop(0.05, #93A3D5),

color-stop(0.48, #5A77AF), color-stop(0.52, #3A57A0), to(#1E3A95));

border-radius: 3px; /* 角丸 */

text-shadow: rgba(0, 0, 0, 0.398438) 0px -1px 0px; /* 陰影 */ /* 省略 */

}

幅100%指定

最大480px

隙間を広げて対応

CSS3で複数の透過PNGを指定

スマートフォン市場規模の推移・予測（11年7月） - MM総研

http://www.m2ri.jp/newsreleases/main.php?id=010120110707500

2011年

8.8%

2015年

50%突破

<div style=“font-size: small;”>

<span style=“color: red;”>■</span>このように逐一書きます

</div>

既存サイトをCSSで

対応させるのは難しい

HTMLがPC向けに

特化されている

iPhoneはFlash非対応

ダブルタップ

ダブルタップ

スマホ対応してない？

<span class=“label”>

</span>

<span class=“label” style=“color:red”>

</span>

.label {

/* CSS */

}

おまけ→

<meta name="viewport" content="width=100%; initial-scale=1.0; maximum-

scale=1.0; user-scalable=0;" />

<meta name="format-detection" content="telephone=no" />