• Save
Swap Skills I Phone
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Swap Skills I Phone

  • 3,251 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,251
On Slideshare
3,233
From Embeds
18
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 18

http://swapskills.info 12
http://www.slideshare.net 4
http://www.slideee.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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