スマートフォン・タブレットに対応したサイト構築の考え方

2013/7/14 youhei iwasaki

◻自己紹介名前：岩崎洋平

言語：php、mysql

facebook：岩崎洋平

twitter：@youhei_iwasaki

色々と勉強中です！ ご指導の程よろしくお願い致します！

スマートフォン・ タブレットの歴史

1996年最初のスマートフォンが登場

Nokia 9000 Communicator

電話機能 ＋ PDA

2007年

iPhoneの普及

最適化したwebページ制作の増加※画像解像度 320x480(px)

2008年

2010年

デバイスの多様化

iPhone等の特定デバイスのみ対応でOKだったが、、、

Androidを搭載したスマートフォンやiPad等のタブレットにも対応する必要

対応策は！？

レスポンシブwebデザイン

◻レスポンシブwebデザイン

画面の横幅に合わせてデザインを変化することにより、多様なデバイスに対応するwebページの制作手法。

問題点

横幅はどうする？

実は、、、、

<meta name="viewport" content="width=device-width">

とソースに追加すれば、 デバイスごとに固定された幅に設定が可能。

3～4inch

8inch

7inch

10inch

720x1280 640x960

540x960 480x854

600x1024 600x1024

768x1280 800x1280 800x1280

3～4inch

720x1280 640x960

540x960 480x854

densityに基づいて ビューポートの解像度を求める。

densityに基づいた ビューポートの解像度

＝デバイスの画像解像度

デバイスに設定された densityの値

※公式

各デバイスではppi(ピクセル密度)に応じて、 densityの値が設定されている。

※ppi(pixel per inch) 1inch(25.4mm)あたりのピクセル数(ドット数)

1inch10pixel

10ppi

ppiによるデバイスの分類 ppi density

ldpi(low) 約120 0.75

mdpi(medium) 約160 1

hdpi(high) 約240 1.5

xhdpi(extra high) 約320 2

機種名 画面解像度 ppi densitydensityに基づいたビューポートの解像度

(画像解像度/density)

Xperia Ray 480x854 297 1.5 320x569

motorola PHOTON 540x960 256 1.5 360x640

iPhone4S 640x960 326 2 320x480

Xperia acro HD 720x1280 342 2 360x640

～640px 641px～1024px 1025px～(スマートフォン) (タブレット) (PC)

small.css medium.css large.css

特定の画面サイズで表示した時のみ適用 するスタイルシートを指定する。

<link rel="stylesheet" href="xxxx.css" media="only メディアタイプ and (特性)">

<title>サンプル</title> <meta name="viewport" content="width=device-width">

①<link rel="stylesheet" href="large.css">

②<link rel="stylesheet" href="medium.css" media="only screen and (min-width:551px) and (max-width:1024px)">

</head>

③<link rel="stylesheet" href="small.css" media="only screen and (max-width:550px)">

sample.html

～640px(スマートフォン)

641px～1024px(タブレット)

1025px～(PC)

small.css medium.css large.css

レスポンシブwebデザイン

◻まとめ

・スマートフォン・タブレットのデバイスの 多様化により最適化が困難になった。

[最適化対策] ・アクセスしてきたデバイスの横幅を取得。 ・その横幅に合わせてページデザインを切り替える。 (レスポンシブwebデザイン)

※参考文献:スマートフォンサイトのためのHTML5＋CSS3