HTML5+α初心者勉強会 @福岡 第2回　発表資料。

1. スマートフォン・タブレットに
対応したサイト構築の考え方
2013/7/14
youhei iwasaki

2. ◻自己紹介
名前：岩崎洋平
言語：php、mysql
facebook：岩崎洋平
twitter：@youhei_iwasaki
色々と勉強中です！
ご指導の程よろしくお願い致します！

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

4. 1996年最初のスマートフォンが登場
Nokia 9000 Communicator
電話機能 ＋ PDA

5. 2007年

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

8. 2008年

10. 2010年

12. デバイスの多様化

13. iPhone等の特定デバイスのみ対応でOKだったが、、、
Androidを搭載したスマートフォンやiPad等のタブレット
にも対応する必要

14. 対応策は！？

15. レスポンシブwebデザイン

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

17. 問題点

18. 横幅はどうする？

19. 実は、、、、
<meta name="viewport" content="width=device-width">
とソースに追加すれば、
デバイスごとに固定された幅に設定が可能。

21. 3∼4inch
8inch
7inch
10inch
720x1280 640x960
540x960 480x854
600x1024 600x1024
768x1280 800x1280 800x1280

22. 3∼4inch
720x1280 640x960
540x960 480x854

23. densityに基づいて
ビューポートの解像度を求める。
densityに基づいた
ビューポートの解像度
＝
デバイスの画像解像度
デバイスに設定された
densityの値
※公式

24. 各デバイスではppi(ピクセル密度)に応じて、
densityの値が設定されている。
※ppi(pixel per inch)
1inch(25.4mm)あたりのピクセル数(ドット数)
1inch
10pixel
10ppi

25. ppiによるデバイスの分類 ppi density
ldpi(low) 約120 0.75
mdpi(medium) 約160 1
hdpi(high) 約240 1.5
xhdpi(extra high) 約320 2

26. 機種名 画面解像度 ppi density
densityに基づい
たビューポート
の解像度
(画像解像度/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

27. ∼640px 641px∼1024px 1025px∼
(スマートフォン) (タブレット) (PC)
small.css medium.css large.css

28. 特定の画面サイズで表示した時のみ適用
するスタイルシートを指定する。
<link rel="stylesheet" href="xxxx.css" media="only メディア
タイプ and (特性)">

29. <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

30. ∼640px
(スマートフォン)
641px∼1024px
(タブレット)
1025px∼
(PC)
small.css medium.css large.css
レスポンシブwebデザイン

31. ◻まとめ
・スマートフォン・タブレットのデバイスの
多様化により最適化が困難になった。
[最適化対策]
・アクセスしてきたデバイスの横幅を取得。
・その横幅に合わせてページデザインを切り替える。
(レスポンシブwebデザイン)
※参考文献:スマートフォンサイトのためのHTML5＋CSS3