• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Swap Skills I Phone
 

Swap Skills I Phone

on

  • 3,160 views

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

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

Statistics

Views

Total Views
3,160
Views on SlideShare
3,142
Embed Views
18

Actions

Likes
2
Downloads
0
Comments
0

3 Embeds 18

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Swap Skills I Phone Swap Skills I Phone Presentation Transcript

    • 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, maximum-scale=3.0quot; />
    • .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.6667quot; /> 480 x 0.6667=320.016
    • 指でもつかいやすい ハイパーリンク
    • <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=quot;stylesheetquot;/>
    • <link media=quot;screen and (min-device-width:481px)quot; href=quot;pc.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot;/>
    • 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=Main_Pagee
    • 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^=quot;http://www.yoursite.comquot;], a[href^=quot;http:yoursite.comquot;] { background-image: none; padding-right: 0; }
    • 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(images/bottom-right.gif) no-repeat right bottom; padding-bottom: 5%;}
    • .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; }
    • 以上 を踏まえると
    • iPhone  User Interface
    • ver5.0
    • one more thing
    • flickr http://www.flickr.com/photos/lightsportnews/386173917/ http://www.flickr.com/photos/yasmapaz/1639244955/
    • EOS