iPhone
Safari
Webkit
animation              border-radius
           opacity
                            column
                     rgba
     ...
<meta name=”viewport”
content=”width=320” />
<meta name=”viewport”
content=”width=320” />
<meta name=”viewport”
content=”width=device-width” />
apple-touch-icon
apple-touch-icon-precomposed
rel=”apple-touch-icon”
rel=”apple-touch-icon-precomposed”
<input type=”file” />
      download
       :hover
      tooltip
    Java applet
       Flash
       Frame
  position: fix...
American Typewriter
          Arial
  Courier (Courier New)
         Georgia
Helvetica (Helvetica Neue)
     Times New Rom...
tel:xxx-xxxx-xxxx
<meta name=”format-detection”
 content=”telephone=no” />
http://aluco.jp/iphone/
http://www.smbc.co.jp/smartphone/
http://b.hatena.ne.jp/touch
http://www.excite.co.jp/design/sansuigiga/
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
Upcoming SlideShare
Loading in...5
×

実践!スマートフォンサイト制作

4,522

Published on

SwapSkils2010 vol.4
森 啓輔
1. スマートフォンの概要
2. スマートフォンサイトの基本
3. 制作方法の考え方
4. 実際に作ってみよう!(実演)
5. スマートフォンと知っておくべきトレンド

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,522
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

実践!スマートフォンサイト制作

  1. 1. iPhone
  2. 2. Safari
  3. 3. Webkit
  4. 4. animation border-radius opacity column rgba transition border-image hsla mask box-shadow text-shadow reflect transform
  5. 5. <meta name=”viewport” content=”width=320” />
  6. 6. <meta name=”viewport” content=”width=320” />
  7. 7. <meta name=”viewport” content=”width=device-width” />
  8. 8. apple-touch-icon apple-touch-icon-precomposed
  9. 9. rel=”apple-touch-icon” rel=”apple-touch-icon-precomposed”
  10. 10. <input type=”file” /> download :hover tooltip Java applet Flash Frame position: fixed;
  11. 11. American Typewriter Arial Courier (Courier New) Georgia Helvetica (Helvetica Neue) Times New Roman Trebuchet MS Verdana
  12. 12. tel:xxx-xxxx-xxxx
  13. 13. <meta name=”format-detection” content=”telephone=no” />
  14. 14. http://aluco.jp/iphone/
  15. 15. http://www.smbc.co.jp/smartphone/
  16. 16. http://b.hatena.ne.jp/touch
  17. 17. http://www.excite.co.jp/design/sansuigiga/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×