2011年6月11日に開催された、「ADC meetup ROUND01」で使用したスライドです

1. 向け
SESSION 2
ン 作
ォ 制
フ の
ト ト
マ サー イ
ス eb
W ぐち
まこと
たに

2. ドイツの水だよ
ltzer
@ se

3. マカロン本

4. イト
ホサ
スマ

5. ？
イト
ホサ
スマ

6. その前に...
Smart Phone
スマートフォン
ホ
スマホ

7. その前に...
Smart Phone
スマートフォン
スマホ

8. その前に...
！
ケタ違い！

9. イト
ホサ
スマ

10. スマホサイト
Yahoo! Japan
http://ipn.yahoo.co.jp/

11. スマホサイト
NAVER
http://www.naver.jp/m/

12. 縦+横のスマホサイト
H2O Space.
... 開発中

13. PC+スマホサイト
ぐるなび
http://mobile.gnavi.co.jp/

14. PCサイトそのまま

15. PCサイトそのまま

16. マルチスクリーン
BLOG 未来館のひと
http://blog.miraikan.jst.go.jp/

17. 今後はマルチスクリーン？
✓ 制作の手間・費用
✓ PCでもWebKitが主流に
✓ コンテンツの有効活用

18. マルチスクリーンを攻略せよ
✓ HTML5
✓ CSS3
✓ メディアクエリー
✓ WebKitのプレビュー環境

19. L5
TM
H

20. Why HTML5?
✓ 新要素で、ファイルすっきり
✓ 作るの簡単
✓ 新機能で次世代Web

21. HTML5の新要素
✓ <article> 記事・内容
✓ <section> コンテンツの区分け
✓ <aside> 本体のコンテンツの補足情報など
✓ <hgroup> 見出しをグループ化する
✓ <header> ヘッダ、<footer>... フッタ
✓ <nav> ナビゲーション
などなど

22. HTML5の将来性
✓ 位置情報を利用したサイト制作 Done!
✓ フォームの強化 Done!
✓ Webのオフライン利用 Now!
✓ ビデオのインライン再生
✓ 操作性の向上

23. HTML5の新機能

24. HTML5の新機能
✓ placeholder=”例”
✓ type=”number”
type=”email”
✓ autocapitalize=”off”
✓ autocorrect=”off”

25. HTML5の注意点
？
iPhone OS 3.xは
HTML5の新要素に非対応

26. HTML5の注意点
HTML5 reset css 検索

27. S3
CS

28. Why CSS3?
✓ セレクタ強化で、要素をバシッと指定
✓ 表現力強化で、画像削減
（角丸、グラデーション、複数背景、シャドウ）
✓ CSSアニメーションでサクサク

29. Why CSS3?
!

30. メディアクエリー
<link rel="stylesheet" type="text/css" href="mobile.css"
media="screen and (max-device-width: 320px)">
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid

31. マルチスクリーンを攻略せよ
✓ HTML5
✓ CSS3
✓ メディアクエリー
✓ WebKitのプレビュー環境

32. マルチスクリーンを攻略せよ
✓ HTML5
✓ CSS3
✓ メディアクエリー
✓ WebKitのプレビュー環境

33. mo
De

34. とめ
ま

35. には
いう訳
せん
と
きま
い

36. Android...

37. user-scalableを noに
<meta name="viewport"
content="width=device-width;
user-scalable=no">

38. zoomプロパティを変更
jQuery(window).bind('load resize',
function() {
if ( navigator.userAgent.indexOf
('Android') > 0 ) {
var zoom = jQuery(window).width
()/500;
}
}

39. 文字サイズを調整
if ( zoom < 1) {
jQuery('#pages-3 a...').css('font-
size', '60%');
} else {
jQuery('#pages-3 a...').css('font-
size', '90%');
}

40. とめ
こそ ま
今度

41. まとめ
✓ スマホを考慮したデザイン
✓ マルチスクリーンとAndroid
✓ DWは開発にも活用できる！

42. h2o space 検索