Tablet View of COOKPAD Website

Transcript

1. Πϯλʔϯγοϓ੒Ռใࠂ
   JO
   $00,1"%
   
   ,FJTVLF
   5"%"
   ଟా
   ܓ༎
   
2.  
   
3.  
   0VUMJOF
   ɾ#BDLHSPVOE
   ɾ4PMVUJPO
   
4.  
   #BDLHSPVOE
   
5.  
   λϒϨοτ୺຤ͷීٴ
   1$ͱͷڥքͷᐆດԽ
   
6.  
   λϒϨοτ๚໰਺
   ݄ؒ
   
   
   
7.  
   1$
   WT
   λϒϨοτ
   ๚໰਺
   
   4FDSFU
   
8. Ͱ΋
   1$༻ϖʔδͷ··ͰݟΒΕΔ
   
9. Ͱ΋
   1$༻ϖʔδͷ··ͰݟΒΕΔ
   1$ͱλϒϨοτ͸ผ෺
   
10.  
    λϒϨοτݻ༗ͷಛੑ
    ɾ΢Οϯυ΢αΠζ
    ɾλονૢ࡞
    ɾωοτϫʔΫ؀ڥ
    
11.  
    λϒϨοτݻ༗ͷಛੑ
    ɾ΢Οϯυ΢αΠζ
    ɾλονૢ࡞
    ɾωοτϫʔΫ؀ڥ
    ΋ͪΖΜେࣄ͚ͩͲ
    ຊ࣭త͡Όͳ͍
    
12.  
    λϒϨοτʹΑΔϢʔβମݧ
    ɾར༻γʔϯ
    ɾར༻໨త
    ɾϢʔβ͕ظ଴͍ͯ͠Δ͜ͱ
    
13.  
    λϒϨοτʹΑΔϢʔβମݧ
    ɾར༻γʔϯ
    ɾར༻໨త
    ɾϢʔβ͕ظ଴͍ͯ͠Δ͜ͱ
    
14.  
    ํ਑
    1$༻ϖʔδΛݩʹ
    λϒϨοτ༻ʹ࠷దԽ͢Δ
    
15.  
    ํ਑
    1$༻ϖʔδΛݩʹ
    λϒϨοτ༻ʹ࠷దԽ͢Δ
    ͖ͬ͞1$ͱλϒϨοτ͸ผ෺ͬͯ
    ݴͬͨͷʹʜʁ
    
16. ɾར༻γʔϯ
    ɾར༻໨త
    ɾϢʔβ͕ظ଴͍ͯ͠Δ͜ͱ
     
    λϒϨοτʹΑΔϢʔβମݧ
     
    ɾϢʔβ͕ظ଴͍ͯ͠Δ͜ͱ
    
17.  
    λϒϨοτϢʔβͷظ଴
    λϒϨοτ͔Β͸
    1$൛ϖʔδ͕ݟΒΕΔ͸ͣ
    
18.  
    λϒϨοτϢʔβͷظ଴
    λϒϨοτ͔Β͸
    1$൛ϖʔδ͕ݟΒΕΔ͸ͣ
    1$൛ͱಉ͡৘ใྔΛظ଴
    
19.  
    ํ਑
    1$༻ϖʔδΛݩʹ
    λϒϨοτ༻ʹ࠷దԽ͢Δ
    
20.  
    ํ਑
    1$༻ϖʔδΛݩʹ
    λϒϨοτ༻ʹ࠷దԽ͢Δ
    ௥ՃͰ
    $44
    ͱ
    +4
    Λద༻
    )5.-
    ͸ͦͷ··Ͱ
    
21.  
    બ୒ࢶ
    ɾ$44
    ͷ੾Γସ͑
    ɹ
    σόΠεͷछྨ 6"
    ɹ
    ΢Οϯυ΢ͷ෯ .FEJB
    2VFSJFT
    
22.  
    બ୒ࢶ
    ɾ$44
    ͷ੾Γସ͑
    ɹ
    σόΠεͷछྨ 6"
    ɹ
    ΢Οϯυ΢ͷ෯ .FEJB
    2VFSJFT
    ࠓճ͸྆ํ༻͍Δ
    
23.  
    બ୒ࢶ
    ɾ$44
    ͷ੾Γସ͑
    ɹ
    σόΠεͷछྨ 6"
    ɹ
    ΢Οϯυ΢ͷ෯ .FEJB
    2VFSJFT
    λονσόΠε࠷దԽ
    σόΠεαΠζ࠷దԽ
    
24.  
    ੾Γସ͑ͷྲྀΕ
    ɾαʔόαΠυͰରԠϖʔδʹͷΈ
    ɹCPEZ
    λάʹ
    DMBTT
    ໊͚ͭΔ
    
    
    ɾ+4
    Ͱ
    6"
    ΍্Ͱ͚ͭͨ
    DMBTT
    ໊͔Β
    ɹCPEZ
    λάʹ
    DMBTT
    ໊͚ͭΔ
    ɹ
    λϒϨοτ༻ͷ
    +4
    Λ࣮ߦ͢Δ
    
    ɾ্Ͱ͚ͭͨ
    DMBTT
    ໊ͷ࣌ͷΈελΠϧΛ
    ɹద༻͢ΔΑ͏ͳ
    $44
    ΛಡΈࠐΜͰ͓͘
    
25.  
    ੾Γସ͑ͷྲྀΕ
    ɾ$44
    Ͱ͸
    .FEJB
    2VFSJFT
    Λ༻͍ͯ
    ɹ୺຤ͷαΠζ ݱࡏͷ޲͖ͷ෯ ʹΑͬͯ
    ɹద༻͢ΔελΠϧΛม͑Δ
    $break_point = 800px; // スタイルを切り替える幅 @media screen and (max-width: $break_point) { ... // 端末幅が $break_point 以下の場合 } @media screen and (min-width: $break_point+1) { ... // 端末幅が $break_point 以上の場合 }
26.  
    4PMVUJPO
    
27.  
    ʮ୳͢ʯ
    ʮ࡞Δʯ
    
28.  
    ʮ୳͢ʯPO
    ιϑΝ
    
29.  
    ʮ୳͢ʯPO
    ιϑΝ
     
    ωοταʔϑΟϯ
    ࢮޠ
    
30.  
    ਓؾͷΩʔϫʔυΛଟ͘දࣔ
     
    จࣈೖྗͷͮ͠Β͞Λճආ
    
31.  
    ݕࡧ݁ՌΛબ୒͠΍͘͢
     
    ϒϩοΫશମΛλοϓՄೳʹ
    )5.-
    ม͑ͣʹ
    $44
    ͱ
    +4
    ͷΈͰ
    
32.  
    .:ϑΥϧμʹ௥Ճ͠΍͘͢
    
33.  
    .:ϑΥϧμʹ௥Ճ͠΍͘͢
    #FGPSF
    "GUFS
    
34.  
    .:ϑΥϧμʹ௥Ճ͠΍͘͢
    
35.  
    #FGPSF
    "GUFS
    .:ϑΥϧμʹ௥Ճ͠΍͘͢
    
36.  
    ʮ୳͢ʯGPS
    ྉཧ
    
37.  
    ʮ୳͢ʯGPS
    ྉཧ
     
    ࢖͍͍ͨࡐྉ͕͋Δ
    
38.  
    ݕࡧόʔΛ޿͘
    
39.  
    ϑΝʔετϏϡʔͰࡐྉ෼͔Δ
    
40.  
    ϑΝʔετϏϡʔͰࡐྉ෼͔Δ
    
41.  
    ʮ࡞ΔʯJO
    Ωονϯ
    
    
42.  
    ʮ࡞ΔʯJO
    Ωονϯ
    
     
    ࡐྉͱ࡞Γํಉ࣌ʹݟ͍ͨ
     
    ྉཧத͸εΫϩʔϧͮ͠Β͍
    
43.  
    ࡐྉͱ࡞ΓํΛಉ࣌ʹݟΒΕΔ
    5BQ
    
44.  
    ࡐྉͱ࡞ΓํΛಉ࣌ʹݟΒΕΔ
    0QFO
    
45.  
    ༙͍ͯ͘Δٙ໰
    ɾ͜ͷϘλϯؾ͔ͮͳ͍Μ͡Όʁ
    ɾࡐྉͭ͋Δͷࠞཚ͠ͳ͍ʁ
    
46.  
    WFS
    
    4DSPMM
    
47.  
    WFS
    
    εΫϩʔϧʹ
    ߹Θͤͯ௥ै
    
48.  
    WFS
    
    
49.  
    WFS
    
     
    Ұݟྑͦ͞͏ʹݟ͑Δ͕ʜ
    
50.  
    ໰୊఺
    ɾࡐྉ௕͍ͱԼͷํݟ͑ͳ͍
    ɾ࣮͸஗Εͯ௥ै͢ΔͷͰअຐ
    ɹ
    J04
    ϒϥ΢βͰͷٕज़తͳ੍໿
    
51.  
    WFS
    
    4DSPMM
    
52.  
    WFS
    
    'BEF
    PVU
    
53.  
    WFS
    
    'BEF
    JO
    
54.  
    WFS
    
    0QFO
    
55.  
    ໰୊఺
    ɾϑΣʔυΞ΢τ͢Δͷ͕͏͍͟
    ɾϑΣʔυΠϯ͢Δͷ΋͏͍͟
    
56. ࢥ͍ͱͲ·ͬͯ
    ͔Βߟ͑௚͢
    
57.  
    Α͘Α͘ߟ͑ͯΈΕ͹
    ɾྉཧ͢Δ࣌ʹ͚ͩؾ͚ͮ͹ྑ͍
    ɾϢʔβ͕ࠞཚ͠ͳ͚Ε͹ྑ͍
    
58.  
    WFS
    
    ʹ໭Δ
    ݟͤํ͕ؾʹͳΔ
    ػೳͷઆ໌ͬΆ͍ʜ
    
59.  
    WFS
    
    ɾ໨తͬΆ͍χϡΞϯεʹมߋ
    ɾʮ֬ೝʯͱ͍͏ݴ༿Ͱಉ͡಺༰
    ɹͭ͋Δ͜ͱͷҧ࿨ײͷܰݮ
    
60.  
    WFS
    
     
    'JYFE
    ɾ໨తͬΆ͍χϡΞϯεʹมߋ
    ɾʮ֬ೝʯͱ͍͏ݴ༿Ͱಉ͡಺༰
    ɹͭ͋Δ͜ͱͷҧ࿨ײͷܰݮ
    
61. ʮࡐྉΛ͜͜ʹදࣔʯϘλϯɺ
    J1BEϢʔβʔͱͯ͠ͱͯ΋ศརʹ࢖ͬͯ·͢ɻ
    ख͕ೞΕͯΔ࣌౳εϫΠϓ͕ग़དྷͳ͔ͬͨͷͰ
    εΫϦʔϯ಺Ͱ಺༰͕֬ೝग़དྷΔͷͰָʹͳΓ ·ͨ͠ɻ͋Γ͕ͱ͏͍͟͝·͢ʂ
     
    Ϣʔβ͔Βͷ͝ҙݟ
    
62.  
    5JQT
    εέʔϧௐ੔
    #FGPSF
    
63.  
    5JQT
    εέʔϧௐ੔
     
    த్൒୺ͳ༨ന
    
64.  
    5JQT
    εέʔϧௐ੔
    transform: scale() σόΠεͷ෯ʹ߹Θͤͯ
    ίϯςϯπΛ֦େ
    
65.  
    5JQT
    εέʔϧௐ੔
    # CoffeeScript scale = ... # 拡大率を計算 originX = ... # どこを起点に拡大するか計算 $(‘$main’).css( ‘-webkit-transform’: “scale(#{scale})” ‘-webkit-transform-origin’: “#{originX} 0” ‘visibility’: ‘visible’ )
66. # CoffeeScript scale = ... # 拡大率を計算 originX = ... # どこを起点に拡大するか計算 $(‘$main’).css( ‘-webkit-transform’: “scale(#{scale})” ‘-webkit-transform-origin’: “#{originX} 0” ‘visibility’: ‘visible’ )  
    5JQT
    εέʔϧௐ੔
    ֦େޙʹදࣔ
    ݩͷ
    $44
    Ͱ͸
    hidden
    
    
67.  
    5JQT
    εέʔϧௐ੔
    "GUFS
    
68.  
    5JQT
    εέʔϧௐ੔
     
    0,
    
69.  
    ͦͷଞ΍ͬͨ͜ͱ
    ɾϑολΛλϒϨοτ༻ͷγϯϓϧͳ΋ͷʹ
    ɾλϒϨοτ༻ͷϑΥʔϜΛ࡞੒
    ɾߜΓࠐΈݕࡧϝχϡʔͷϨΠΞ΢τௐ੔
    ɾϖʔδωʔγϣϯΛλονσόΠε޲͚ʹ
    ɾ޲͖Λม͑ͨ࣌ʹ֦େ཰͕มΘΔόάͷରॲ
    ɾςετίʔυॻ͘
    ɾจࣈαΠζɺ༨നͷௐ੔
    
    ɾطଘͷϖʔδͷमਖ਼
    
70.  
    
    ๚໰਺ͷมԽ
    ϦϦʔε
    
71.  
    ࠓޙ ΍ΕΔͳΒ ΍Γ͍ͨ͜ͱ
    ɾλϒϨοτʹ࠷దԽ͞Εͨ޿ࠂ
    ɾଞͷ୺຤΁ͷରԠ
    ɹ ΄΅͜ͷ··ͰରԠͰ͖Δ͸ͣ
    
72. 5IBOL
    :PV