This document provides an overview of the iPhone and tips for designing mobile web content for the iPhone. It discusses iPhone features like screen orientation, touch gestures, and Safari capabilities. It also provides guidance on using CSS, XHTML, and media queries to create responsive designs that work across iPhone and other mobile devices. Key topics include liquid layouts, viewport settings, touch targets, and CSS3 properties like border-radius and multiple backgrounds.

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日
発売されました。

6. iPhone
の
あたえたモノ

7. 市場最強の
アプリ

10. Web

11. Safari3.1
iPhone2.0

12. iPhone
を知る!

13. Orientation

14. portlait

15. landscape

16. viewport

18. 950px ??

20. 仮想スクリーン

22. マルチタッチ

23. pinch in

24. pinch out

25. double tap

28. 指≠マウス

31. mobile
web design

32. どんなサイト ?

33. Facebook

39. サイトを
作る環境

40. 10.4.7

41. SDK
ASPEN SIMULATOR

42. ver5.0

43. 1.指でも使いやすい
2.見やすいデザイン
3.liquid design
4.Safariの為のデザイン

44. XHTML

45. HTML4.01
XHTML1.0

48. 指でもつかいやすい
画面サイズ

49. 320px,480pxでも
画面サイズが
ブレない！

50. viewport

51. <meta />

52. <meta name=quot;viewportquot; id=quot;iphone-
viewportquot; content=quot;width=980,
initial-scale=1.0,
user-scalable=yes,
maximum-scale=3.0quot; />

53. .default
.640px
.480px

54. default

57. width=quot;640quot;

60. width=quot;480quot;

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

65. 指でもつかいやすい
ハイパーリンク

66. <a
href=quot;mailto:mantangs@gmail.comquot;>
Takashi. Kikuchi
</a>

67. 指でもつかいやすい
ハイパーリンク

68. <a
href=quot;http://maps.google.com/maps?
q=cupertinoquot;>
Cupertino
</a>

69. アップルストア銀座 ?

70. http://maps.google.com/maps?
q=アップルストア銀座

72. CSS

74. CSS2.1
CSS3.0

75. CSS
↓
iPhone

76. <link />

77. <link
media=quot;handheldquot;
href=quot;ipodtouch.cssquot;
type=quot;text/cssquot; rel=quot;stylesheetquot; />

78. <link
media=quot;screenquot;
href=quot;pc.cssquot;
type=quot;text/cssquot; rel=quot;stylesheetquot; />

79. handheld

80. handheld

81. php?

82. php?

83. CSS3

84. media query

85. iPod<480px
PC>481px

86. <link
media=quot;only screen and
(max-device-width:480px)quot;
href=quot;ipodtouch.cssquot;
type=quot;text/cssquot; rel=quot;stylesheetquot;/>

87. <link
media=quot;screen and
(min-device-width:481px)quot;
href=quot;pc.cssquot;
type=quot;text/cssquot; rel=quot;stylesheetquot;/>

88. IE ?

89. <!--[if IE]>
<link rel=quot;stylesheetquot; type=quot;
text/cssquot; href=quot;ie.cssquot; />
<![endif]-->

91. Portlait ,landscape
でも使える
liquid design

92. 800px
800px
800px

93. width:100%

94. 100%
100%
100%

96. CSS3

97. 見やすいデザイン
テキストサイズ

98. html{
-webkit-auto-text-size-adjust:
none; }

99. 見やすいデザイン
行 間

100. html{
line-height: 1.8;
}

101. 指でもつかいやすい
デザイン

102. padding
は多目に

103. margin
も多目に

104. 指でもつかいやすい
ハイパーリンク

105. :hover

106. a{
-webkit-tap-highlight-color: rgba
(00,33,99,0.60);
}

108. John Allsop
http://westciv.com/iphonetests/

109. http://westciv.com/browsers/index.php5?
title=Main_Paghttp://westciv.com/browsers/index.php5?
title=Main_Pagee

110. CSS3 selectors

111. a[href^=quot;mailto:quot;] {
background-image: url(email.
gif);
}
a[href$=quot;.pdfquot;] {
background-image: url(pdf.gif);
}

112. 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;
}

114. text-shadow

115. CSS2・・・

116. h1{
text-shadow: #bbb 2px 2px 2px
}

119. text-stroke ?

120. h1{
-webkit-text-stroke: 1px
#990e95;
}

123. border-radius

124. div#mixi{
-webkit-border-radius:10px;
}

127. multiple-
background

129. .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%;}

130. .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;
}

133. 以上
を踏まえると

136. iPhone User Interface

137. ver5.0

138. one more thing

140. flickr
http://www.flickr.com/photos/lightsportnews/386173917/
http://www.flickr.com/photos/yasmapaz/1639244955/

141. EOS