Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
向けSESSION 2              ン 作             ォ 制            フ の           ト ト       マ サー イ     ス eb        W     ぐち           ...
ドイツの水だよ     ltzer@ se
マカロン本
イト  ホサスマ
?    イト  ホサスマ
その前に...     Smart Phone     スマートフォン            ホ          スマホ
その前に...     Smart Phone     スマートフォン          スマホ
その前に...              !      ケタ違い!
イト  ホサスマ
スマホサイト         Yahoo! Japan         http://ipn.yahoo.co.jp/
スマホサイト         NAVER         http://www.naver.jp/m/
縦+横のスマホサイト      H2O Space.      ... 開発中
PC+スマホサイト        ぐるなび        http://mobile.gnavi.co.jp/
PCサイトそのまま
PCサイトそのまま
マルチスクリーン      BLOG 未来館のひと      http://blog.miraikan.jst.go.jp/
今後はマルチスクリーン?✓ 制作の手間・費用✓ PCでもWebKitが主流に✓ コンテンツの有効活用
マルチスクリーンを攻略せよ✓ HTML5✓ CSS3✓ メディアクエリー✓ WebKitのプレビュー環境
L5 TMH
Why HTML5? ✓ 新要素で、ファイルすっきり ✓ 作るの簡単 ✓ 新機能で次世代Web
HTML5の新要素✓   <article>   記事・内容✓   <section>   コンテンツの区分け✓   <aside>     本体のコンテンツの補足情報など✓   <hgroup>    見出しをグループ化する✓   <head...
HTML5の将来性✓   位置情報を利用したサイト制作 Done!✓   フォームの強化 Done!✓   Webのオフライン利用 Now!✓   ビデオのインライン再生✓   操作性の向上
HTML5の新機能
HTML5の新機能      ✓   placeholder=”例”      ✓   type=”number”          type=”email”      ✓   autocapitalize=”off”      ✓   aut...
HTML5の注意点                ?   iPhone OS 3.xは HTML5の新要素に非対応
HTML5の注意点        HTML5 reset css   検索
S3CS
Why CSS3?✓   セレクタ強化で、要素をバシッと指定✓   表現力強化で、画像削減    (角丸、グラデーション、複数背景、シャドウ)✓   CSSアニメーションでサクサク
Why CSS3?            !
メディアクエリー<link rel="stylesheet" type="text/css" href="mobile.css"                       media="screen and (max-device-width...
マルチスクリーンを攻略せよ✓ HTML5✓ CSS3✓ メディアクエリー✓ WebKitのプレビュー環境
マルチスクリーンを攻略せよ✓ HTML5✓ CSS3✓ メディアクエリー✓ WebKitのプレビュー環境
moDe
とめま
には いう訳      せんと きまい
Android...
user-scalableを noに<meta name="viewport"content="width=device-width;user-scalable=no">
zoomプロパティを変更jQuery(window).bind(load resize,function() {  if ( navigator.userAgent.indexOf(Android) > 0 ) {    var zoom = ...
文字サイズを調整if ( zoom < 1) {  jQuery(#pages-3 a...).css(font-size, 60%);} else {  jQuery(#pages-3 a...).css(font-size, 90%);}
とめ こそ ま今度
まとめ✓ スマホを考慮したデザイン✓ マルチスクリーンとAndroid✓ DWは開発にも活用できる!
h2o space   検索
Upcoming SlideShare
Loading in …5
×

ADC meetup Session.02

1,758 views

Published on

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

Published in: Technology, Design
  • Be the first to comment

ADC meetup Session.02

  1. 1. 向けSESSION 2 ン 作 ォ 制 フ の ト ト マ サー イ ス eb W ぐち まこと たに
  2. 2. ドイツの水だよ ltzer@ se
  3. 3. マカロン本
  4. 4. イト ホサスマ
  5. 5. ? イト ホサスマ
  6. 6. その前に... Smart Phone スマートフォン ホ スマホ
  7. 7. その前に... Smart Phone スマートフォン スマホ
  8. 8. その前に... ! ケタ違い!
  9. 9. イト ホサスマ
  10. 10. スマホサイト Yahoo! Japan http://ipn.yahoo.co.jp/
  11. 11. スマホサイト NAVER http://www.naver.jp/m/
  12. 12. 縦+横のスマホサイト H2O Space. ... 開発中
  13. 13. PC+スマホサイト ぐるなび http://mobile.gnavi.co.jp/
  14. 14. PCサイトそのまま
  15. 15. PCサイトそのまま
  16. 16. マルチスクリーン BLOG 未来館のひと http://blog.miraikan.jst.go.jp/
  17. 17. 今後はマルチスクリーン?✓ 制作の手間・費用✓ PCでもWebKitが主流に✓ コンテンツの有効活用
  18. 18. マルチスクリーンを攻略せよ✓ HTML5✓ CSS3✓ メディアクエリー✓ WebKitのプレビュー環境
  19. 19. L5 TMH
  20. 20. Why HTML5? ✓ 新要素で、ファイルすっきり ✓ 作るの簡単 ✓ 新機能で次世代Web
  21. 21. HTML5の新要素✓ <article> 記事・内容✓ <section> コンテンツの区分け✓ <aside> 本体のコンテンツの補足情報など✓ <hgroup> 見出しをグループ化する✓ <header> ヘッダ、<footer>... フッタ✓ <nav> ナビゲーションなどなど
  22. 22. HTML5の将来性✓ 位置情報を利用したサイト制作 Done!✓ フォームの強化 Done!✓ Webのオフライン利用 Now!✓ ビデオのインライン再生✓ 操作性の向上
  23. 23. HTML5の新機能
  24. 24. HTML5の新機能 ✓ placeholder=”例” ✓ type=”number” type=”email” ✓ autocapitalize=”off” ✓ autocorrect=”off”
  25. 25. HTML5の注意点 ? iPhone OS 3.xは HTML5の新要素に非対応
  26. 26. HTML5の注意点 HTML5 reset css 検索
  27. 27. S3CS
  28. 28. Why CSS3?✓ セレクタ強化で、要素をバシッと指定✓ 表現力強化で、画像削減 (角丸、グラデーション、複数背景、シャドウ)✓ CSSアニメーションでサクサク
  29. 29. Why CSS3? !
  30. 30. メディアクエリー<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-device-width: 320px)">widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid
  31. 31. マルチスクリーンを攻略せよ✓ HTML5✓ CSS3✓ メディアクエリー✓ WebKitのプレビュー環境
  32. 32. マルチスクリーンを攻略せよ✓ HTML5✓ CSS3✓ メディアクエリー✓ WebKitのプレビュー環境
  33. 33. moDe
  34. 34. とめま
  35. 35. には いう訳 せんと きまい
  36. 36. Android...
  37. 37. user-scalableを noに<meta name="viewport"content="width=device-width;user-scalable=no">
  38. 38. zoomプロパティを変更jQuery(window).bind(load resize,function() { if ( navigator.userAgent.indexOf(Android) > 0 ) { var zoom = jQuery(window).width()/500; }}
  39. 39. 文字サイズを調整if ( zoom < 1) { jQuery(#pages-3 a...).css(font-size, 60%);} else { jQuery(#pages-3 a...).css(font-size, 90%);}
  40. 40. とめ こそ ま今度
  41. 41. まとめ✓ スマホを考慮したデザイン✓ マルチスクリーンとAndroid✓ DWは開発にも活用できる!
  42. 42. h2o space 検索

×