iPhoneのウェブ

 2008/12/20(Sat)
 SwapSkill version
SwapSkills

       x

allWebクリエイター塾
Agenda
1. iPhoneの与えたもの。
2. iPhoneを知る
3. iPhoneの便利な機能を
   最大限に生かすXHTMLマークアップ
4. safariの先進的なCSS3を利用した
   使いやすくて実用的なWEB
7月11日
発売されました。
iPhone
   の
あたえたモノ
市場最強の
 アプリ
Web
Safari3.1
iPhone2.0
iPhone
を知る!
Orientation
portlait
landscape
viewport
950px ??
仮想スクリーン
マルチタッチ
pinch in
pinch out
double tap
指≠マウス
mobile
web design
どんなサイト ?
 Facebook
サイトを
作る環境
10.4.7
SDK
ASPEN SIMULATOR
ver5.0
1.指でも使いやすい
2.見やすいデザイン
3.liquid design
4.Safariの為のデザイン
XHTML
HTML4.01
XHTML1.0
指でもつかいやすい
画面サイズ
320px,480pxでも
画面サイズが
ブレない!
viewport
<meta />
<meta name=quot;viewportquot; id=quot;iphone-
viewportquot; content=quot;width=980,
initial-scale=1.0,
user-scalable=yes,
...
.default
.640px
.480px
default
width=quot;640quot;
width=quot;480quot;
<meta name=quot;viewportquot; id=quot;iphone-
viewportquot; content=quot;width=480,
user-scalable=no,
maximum-scale=0.6667...
指でもつかいやすい
ハイパーリンク
<a
href=quot;mailto:mantangs@gmail.comquot;>
Takashi. Kikuchi
</a>
指でもつかいやすい
ハイパーリンク
<a
href=quot;http://maps.google.com/maps?
q=cupertinoquot;>
Cupertino
</a>
アップルストア銀座 ?
http://maps.google.com/maps?
q=アップルストア銀座
CSS
CSS2.1
CSS3.0
CSS
   ↓
iPhone
<link />
<link
media=quot;handheldquot;
href=quot;ipodtouch.cssquot;
type=quot;text/cssquot; rel=quot;stylesheetquot; />
<link
media=quot;screenquot;
href=quot;pc.cssquot;
type=quot;text/cssquot; rel=quot;stylesheetquot; />
handheld
handheld
php?
php?
CSS3
media query
iPod<480px
PC>481px
<link
media=quot;only screen and
(max-device-width:480px)quot;
href=quot;ipodtouch.cssquot;
type=quot;text/cssquot; rel=qu...
<link
media=quot;screen and
(min-device-width:481px)quot;
href=quot;pc.cssquot;
type=quot;text/cssquot; rel=quot;styleshee...
IE ?
<!--[if IE]>
<link rel=quot;stylesheetquot; type=quot;
text/cssquot; href=quot;ie.cssquot; />
<![endif]-->
Portlait ,landscape
     でも使える
   liquid design
800px


800px


800px
width:100%
100%


100%


100%
CSS3
見やすいデザイン
テキストサイズ
html{
-webkit-auto-text-size-adjust:
none; }
見やすいデザイン
行 間
html{
line-height: 1.8;
}
指でもつかいやすい
デザイン
padding
は多目に
margin
も多目に
指でもつかいやすい
ハイパーリンク
:hover
a{
-webkit-tap-highlight-color: rgba
(00,33,99,0.60);
}
John Allsop




    http://westciv.com/iphonetests/
http://westciv.com/browsers/index.php5?
title=Main_Paghttp://westciv.com/browsers/index.php5?
                   title=Mai...
CSS3 selectors
a[href^=quot;mailto:quot;] {
background-image: url(email.
gif);
}
a[href$=quot;.pdfquot;] {
background-image: url(pdf.gif)...
a[href^=quot;http:quot;] {
background: url(images/externalLink.gif) no-
repeat
right top;
padding-right: 10px;
}
a[href^=q...
text-shadow
CSS2・・・
h1{
text-shadow: #bbb 2px 2px 2px
}
text-stroke ?
h1{
-webkit-text-stroke: 1px
#990e95;
}
border-radius
div#mixi{
-webkit-border-radius:10px;
}
multiple-
background
.box {
width: 20em;
background: #effce7 url(images/bottom-
left.gif) norepeat
left bottom;
}
.box-outer {
background: url(...
.box {
background-image:
url(top-left.gif), url(topright.gif), url(bottom-left.
gif), url(bottomright.gif);

background-re...
以上
を踏まえると
iPhone  User Interface
ver5.0
one more thing
flickr
http://www.flickr.com/photos/lightsportnews/386173917/
http://www.flickr.com/photos/yasmapaz/1639244955/
EOS
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Swap Skills I Phone
Upcoming SlideShare
Loading in …5
×

Swap Skills I Phone

2,627 views
2,523 views

Published on

i-phoneの制作方法をご紹介しています。

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,627
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Swap Skills I Phone

  1. 1. iPhoneのウェブ 2008/12/20(Sat) SwapSkill version
  2. 2. SwapSkills x allWebクリエイター塾
  3. 3. Agenda 1. iPhoneの与えたもの。 2. iPhoneを知る 3. iPhoneの便利な機能を 最大限に生かすXHTMLマークアップ 4. safariの先進的なCSS3を利用した 使いやすくて実用的なWEB
  4. 4. 7月11日 発売されました。
  5. 5. iPhone の あたえたモノ
  6. 6. 市場最強の アプリ
  7. 7. Web
  8. 8. Safari3.1 iPhone2.0
  9. 9. iPhone を知る!
  10. 10. Orientation
  11. 11. portlait
  12. 12. landscape
  13. 13. viewport
  14. 14. 950px ??
  15. 15. 仮想スクリーン
  16. 16. マルチタッチ
  17. 17. pinch in
  18. 18. pinch out
  19. 19. double tap
  20. 20. 指≠マウス
  21. 21. mobile web design
  22. 22. どんなサイト ?
  23. 23.  Facebook
  24. 24. サイトを 作る環境
  25. 25. 10.4.7
  26. 26. SDK ASPEN SIMULATOR
  27. 27. ver5.0
  28. 28. 1.指でも使いやすい 2.見やすいデザイン 3.liquid design 4.Safariの為のデザイン
  29. 29. XHTML
  30. 30. HTML4.01 XHTML1.0
  31. 31. 指でもつかいやすい 画面サイズ
  32. 32. 320px,480pxでも 画面サイズが ブレない!
  33. 33. viewport
  34. 34. <meta />
  35. 35. <meta name=quot;viewportquot; id=quot;iphone- viewportquot; content=quot;width=980, initial-scale=1.0, user-scalable=yes, maximum-scale=3.0quot; />
  36. 36. .default .640px .480px
  37. 37. default
  38. 38. width=quot;640quot;
  39. 39. width=quot;480quot;
  40. 40. <meta name=quot;viewportquot; id=quot;iphone- viewportquot; content=quot;width=480, user-scalable=no, maximum-scale=0.6667quot; /> 480 x 0.6667=320.016
  41. 41. 指でもつかいやすい ハイパーリンク
  42. 42. <a href=quot;mailto:mantangs@gmail.comquot;> Takashi. Kikuchi </a>
  43. 43. 指でもつかいやすい ハイパーリンク
  44. 44. <a href=quot;http://maps.google.com/maps? q=cupertinoquot;> Cupertino </a>
  45. 45. アップルストア銀座 ?
  46. 46. http://maps.google.com/maps? q=アップルストア銀座
  47. 47. CSS
  48. 48. CSS2.1 CSS3.0
  49. 49. CSS ↓ iPhone
  50. 50. <link />
  51. 51. <link media=quot;handheldquot; href=quot;ipodtouch.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot; />
  52. 52. <link media=quot;screenquot; href=quot;pc.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot; />
  53. 53. handheld
  54. 54. handheld
  55. 55. php?
  56. 56. php?
  57. 57. CSS3
  58. 58. media query
  59. 59. iPod<480px PC>481px
  60. 60. <link media=quot;only screen and (max-device-width:480px)quot; href=quot;ipodtouch.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot;/>
  61. 61. <link media=quot;screen and (min-device-width:481px)quot; href=quot;pc.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot;/>
  62. 62. IE ?
  63. 63. <!--[if IE]> <link rel=quot;stylesheetquot; type=quot; text/cssquot; href=quot;ie.cssquot; /> <![endif]-->
  64. 64. Portlait ,landscape でも使える liquid design
  65. 65. 800px 800px 800px
  66. 66. width:100%
  67. 67. 100% 100% 100%
  68. 68. CSS3
  69. 69. 見やすいデザイン テキストサイズ
  70. 70. html{ -webkit-auto-text-size-adjust: none; }
  71. 71. 見やすいデザイン 行 間
  72. 72. html{ line-height: 1.8; }
  73. 73. 指でもつかいやすい デザイン
  74. 74. padding は多目に
  75. 75. margin も多目に
  76. 76. 指でもつかいやすい ハイパーリンク
  77. 77. :hover
  78. 78. a{ -webkit-tap-highlight-color: rgba (00,33,99,0.60); }
  79. 79. John Allsop http://westciv.com/iphonetests/
  80. 80. http://westciv.com/browsers/index.php5? title=Main_Paghttp://westciv.com/browsers/index.php5? title=Main_Pagee
  81. 81. CSS3 selectors
  82. 82. a[href^=quot;mailto:quot;] { background-image: url(email. gif); } a[href$=quot;.pdfquot;] { background-image: url(pdf.gif); }
  83. 83. a[href^=quot;http:quot;] { background: url(images/externalLink.gif) no- repeat right top; padding-right: 10px; } a[href^=quot;http://www.yoursite.comquot;], a[href^=quot;http:yoursite.comquot;] { background-image: none; padding-right: 0; }
  84. 84. text-shadow
  85. 85. CSS2・・・
  86. 86. h1{ text-shadow: #bbb 2px 2px 2px }
  87. 87. text-stroke ?
  88. 88. h1{ -webkit-text-stroke: 1px #990e95; }
  89. 89. border-radius
  90. 90. div#mixi{ -webkit-border-radius:10px; }
  91. 91. multiple- background
  92. 92. .box { width: 20em; background: #effce7 url(images/bottom- left.gif) norepeat left bottom; } .box-outer { background: url(images/bottom-right.gif) no-repeat right bottom; padding-bottom: 5%;}
  93. 93. .box { background-image: url(top-left.gif), url(topright.gif), url(bottom-left. gif), url(bottomright.gif); background-repeat: no-repeat, no-repeat, norepeat,no-repeat; background-position: top left, top right, bottomleft, bottom right; }
  94. 94. 以上 を踏まえると
  95. 95. iPhone  User Interface
  96. 96. ver5.0
  97. 97. one more thing
  98. 98. flickr http://www.flickr.com/photos/lightsportnews/386173917/ http://www.flickr.com/photos/yasmapaz/1639244955/
  99. 99. EOS

×